Note

Now there are some nice menus too! Had a bit of fun using the CSS variables for each workspace to pull the theme/contrasting colour through to the menu itself.

I wonder how nested menus might work using CSS anchor positioning 🤔

I landed on a semi-nice syntax in the HTML to auto-style button/hr elements inside of the menu.

<menu-layout>
  <button>First</button>
  <button>Second</button>
  <hr>
  <button>Third</button>
</menu-layout>

sort of inspired by the future of having a <hr> in a <select> element.

This project is just for me, but I wonder if it should be a <ul> inside that <menu-layout> to get the correct aria-labelling

A screen recording showing opening a two menus from a different buttons, one is themed orange the other blue. The menu is a popover under the button with a list of actions and a separator in there too

metadata

Open on GiHub

{
  "mastodon_status": [
    "https://social.lol/@r0b/113670853556966389",
    "https://social.lol/@r0b/113670855627288349",
    "https://social.lol/@r0b/113670861300997056",
    "https://social.lol/@r0b/113670863677139311"
  ]
}