A context menu

[odama626]

In my local code I am using dropdown to make a context menu, and I think it could be useful

.dropdown.context-menu {
  margin: 0;
  &.left {
    ul {
      direction: ltr;
      overflow: hidden;
    }
  }

  summary {
    background-color: transparent !important;
    border: none !important;

    &:after {
      content: none;
    }
  }

  hr {
    margin: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-spacing);
  }

  li {
    &:has(button) {
      padding: 0;
    }

    button {
      color: var(--pico-dropdown-color);
      width: 100%;
    }

    > a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    }

    &:hover {
      background: var(--pico-dropdown-hover-background-color);
      color: var(--pico-dropdown-hover);
    }
  }
}

<details class='dropdown context-menu left'>
  <summary id='overflowMenuTrigger'>
    <MenuIcon />
  </summary>
  <ul dir='rtl'>
    <li>
      <button class='icon ghost' onClick={() => createInviteLink(params.id)}>
        <CopyInviteLinkIcon /> Copy Invite Link
      </button>
    </li>
    <li>
      <button class='icon ghost' onClick={() => setOpenModal('collaborators')}>
        <CollaboratorsIcon /> Collaborators
      </button>
    </li>
    <hr />
    <li>
      <A href='/user/account'>
        <AccountIcon /> Account Settings
      </A>
    </li>
  </ul>
</details>

[Yohn]

I like it! That looks really clean and nice, great addition!

Although the main difference I can see are the styling of the <summary> tag not looking like a button as much, and not having the arrow for open and closed.

I was thinking of doing some kind of attribute to hide the arrow already, which I might add at a later point.

[odama626]

with the summary I agree -- with ghost and maybe another modifier to remove the arrow that would be handled.

the primary thing I was sharing was the changes to buttons, links, and hr tags inside of the menu

[Yohn]

I do not believe the <hr> element can be a direct child element of <ul>, <ol>, or <menu> currently, so it would be better to use an aria-* or role="separator" attribute on an <li> tag and then using ::after to style a line separator - which would be great to have.

As for the button and icon designs in the dropdown, I love them, honestly, and do see that being beneficial to the dropdowns. Using the .ghost class on the buttons could be one way to style the buttons better within the dropdowns, but may need some tweaking to get it perfect

[odama626]

Oh I didn't know about the hr and role, thanks