JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simply-reactive@4.1.0/cdn/simply-reactive.js"></script>
<div id="root"></div>

JavaScript

const {
    createAtom,
    createEffect,
    createSelector,
    createGroup,
} = simplyReactive;

const Menu = createGroup({
  getDefault: id => createAtom({
    key: id,
    default: {
    	expanded: false,
      children: Array(5).fill(id).map((v, i) => `${v}-${i}`),
    },
  })
});

const renderMenu = id => _=>_
	.child('button', _=>_
  	.text(id)
    .style({
    	userSelect: 'none',
    })
    .on('click', (ev) => {
    	if (ev.target !== ev.currentTarget) return;
      Menu.find(id).set(v => ({...v, expanded: !v.expanded}))
    })
  )
  .child('ul', _=>_
    .when(Menu.find(id).get().expanded, _=>_
     .children('li', Menu.find(id).get().children, (_, v)=>_
        .style({
          listStyle: 'none',
          marginLeft: '40px',
          paddingLeft: '0px',
        })
        .do(renderMenu(v))
      )
    )
  );

createEffect(() => brynja.render(_=>_
	.child('ul', _=>_
  	.text('Menu')
    .style({
    	userSelect: 'none',
    })
    .children('li', Menu.find(0).get().children, (_, v)=>_
      .style({
        listStyle: 'none',
      })
      .do(renderMenu(v))
    )
  )
));