Menu

import { LuChevronRight } from "@qwikest/icons/lucide";
import { Menu, MenuItem } from "~/components/ui/base/menu";

<Menu.Root menuKey="example1">
  <Menu.Trigger>Options</Menu.Trigger>
  <Menu.Panel>
    <Menu.Item>Profile</Menu.Item>
    <Menu.Item>Billing</Menu.Item>
    <Menu.Separator />
    <Menu.SubMenu>
      <Menu.SubTrigger>
        More Options
        <MenuItem.End><LuChevronRight /></MenuItem.End>
      </Menu.SubTrigger>
      <Menu.Panel>
        <Menu.Item>Export Data...</Menu.Item>
        <Menu.Separator />
        <Menu.SubMenu>
          <Menu.SubTrigger>
            Advanced
            <MenuItem.End><LuChevronRight /></MenuItem.End>
          </Menu.SubTrigger>
          <Menu.Panel>
            <Menu.Item>Clear Cache</Menu.Item>
            <Menu.Item>Reset Defaults</Menu.Item>
          </Menu.Panel>
        </Menu.SubMenu>
      </Menu.Panel>
    </Menu.SubMenu>
  </Menu.Panel>
</Menu.Root>

import { LuCopy, LuSave, LuTrash } from "@qwikest/icons/lucide";
import { Menu, MenuItem } from "~/components/ui/base/menu";
import { KbdShortcut } from "~/components/ui/base/kbd-shortcut";

<Menu.Root menuKey="example2">
  <Menu.Trigger>File</Menu.Trigger>
  <Menu.Panel>
    <Menu.Item>
      <MenuItem.Start><LuSave /></MenuItem.Start>
      <MenuItem.Label>Save</MenuItem.Label>
      <MenuItem.End><KbdShortcut>⌘S</KbdShortcut></MenuItem.End>
    </Menu.Item>
    <Menu.Item>
      <MenuItem.Start><LuCopy /></MenuItem.Start>
      <MenuItem.Label>Copy</MenuItem.Label>
      <MenuItem.End><KbdShortcut>⌘C</KbdShortcut></MenuItem.End>
    </Menu.Item>
    <Menu.Separator />
    <Menu.Item class="text-color-red">
      <MenuItem.Start><LuTrash /></MenuItem.Start>
      <MenuItem.Label>Move to Trash</MenuItem.Label>
      <MenuItem.End><KbdShortcut>⌘⌫</KbdShortcut></MenuItem.End>
    </Menu.Item>
  </Menu.Panel>
</Menu.Root>

import { useSignal, component$ } from "@builder.io/qwik";
import { Menu, MenuItem } from "~/components/ui/base/menu";

export default component$(() => {
  const checkedSignal = useSignal(false);
  return (
    <Menu.Root menuKey="example3">
      <Menu.Trigger>Preferences</Menu.Trigger>
      <Menu.Panel>
        <Menu.Group>
          <Menu.Label>Settings</Menu.Label>
          <Menu.CheckBoxItem bind:value={checkedSignal}>
            <MenuItem.Label>Enable Sync ({checkedSignal.value ? "ON" : "OFF"})</MenuItem.Label>
          </Menu.CheckBoxItem>
        </Menu.Group>
      </Menu.Panel>
    </Menu.Root>
  );
});

import { useSignal, component$ } from "@builder.io/qwik";
import { Menu, MenuItem } from "~/components/ui/base/menu";

export default component$(() => {
  const radioSignal = useSignal("dark");
  return (
    <Menu.Root menuKey="example4">
      <Menu.Trigger>Theme</Menu.Trigger>
      <Menu.Panel>
        <Menu.Group>
          <Menu.Label>Appearance</Menu.Label>
          <Menu.RadioGroup bind:value={radioSignal}>
            <Menu.RadioButton value="light">
              <MenuItem.Label>Light</MenuItem.Label>
            </Menu.RadioButton>
            <Menu.RadioButton value="dark">
              <MenuItem.Label>Dark</MenuItem.Label>
            </Menu.RadioButton>
            <Menu.RadioButton value="system">
              <MenuItem.Label>System</MenuItem.Label>
            </Menu.RadioButton>
          </Menu.RadioGroup>
        </Menu.Group>
      </Menu.Panel>
    </Menu.Root>
  );
});

import { LuChevronRight } from "@qwikest/icons/lucide";
import { Menu, MenuItem } from "~/components/ui/base/menu";

<Menu.MenuGroup aria-label="Main menu">
  <Menu.Root menuKey="file">
    <Menu.Trigger>File</Menu.Trigger>
    <Menu.Panel>
      <Menu.Item>New</Menu.Item>
      <Menu.Item>Open</Menu.Item>
      <Menu.Separator />
      <Menu.SubMenu>
        <Menu.SubTrigger>
          Recent
          <MenuItem.End><LuChevronRight /></MenuItem.End>
        </Menu.SubTrigger>
        <Menu.Panel>
          <Menu.Item>file1.txt</Menu.Item>
          <Menu.Item>file2.txt</Menu.Item>
        </Menu.Panel>
      </Menu.SubMenu>
    </Menu.Panel>
  </Menu.Root>
  <Menu.Root menuKey="view">
    <Menu.Trigger>View</Menu.Trigger>
    <Menu.Panel>
      <Menu.Item>Zoom In</Menu.Item>
      <Menu.Item>Zoom Out</Menu.Item>
      <Menu.Separator />
      <Menu.SubMenu>
        <Menu.SubTrigger>
          Layout
          <MenuItem.End><LuChevronRight /></MenuItem.End>
        </Menu.SubTrigger>
        <Menu.Panel>
          <Menu.Item>Single</Menu.Item>
          <Menu.Item>Split</Menu.Item>
          <Menu.Item>Grid</Menu.Item>
        </Menu.Panel>
      </Menu.SubMenu>
    </Menu.Panel>
  </Menu.Root>
</Menu.MenuGroup>