Menu

import { Menu } from "@prismane/core";

<Menu w={fr(64)} open>
  <Menu.Label>Account</Menu.Label>
  <Menu.Item>
    <Menu.Icon>
      <User />
    </Menu.Icon>
    Account
  </Menu.Item>
  <Menu.Item>
    <Menu.Icon>
      <Chat />
    </Menu.Icon>
    Messages
  </Menu.Item>
  <Divider />
  <Menu.Label>Danger Zone</Menu.Label>
  <Menu.Item>
    <Menu.Icon>
      <GearSix />
    </Menu.Icon>
    Settings
  </Menu.Item>
  <Menu.Item color="red">
    <Menu.Icon>
      <SignOut />
    </Menu.Icon>
    Log Out
  </Menu.Item>
</Menu>

function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <Flex direction="column" gap={fr(2)} w={fr(64)}>
      <Button onClick={() => setOpen(!open)}>Toggle Menu</Button>
      <Menu w={fr(64)} open={open}>
        <Menu.Label>Account</Menu.Label>
        <Menu.Item>
          <Menu.Icon>
            <User />
          </Menu.Icon>
          Account
        </Menu.Item>
        <Menu.Item>
          <Menu.Icon>
            <Chat />
          </Menu.Icon>
          Messages
        </Menu.Item>
        <Menu.Item>
          <Menu.Icon>
            <Images />
          </Menu.Icon>
          Media
        </Menu.Item>
        <Menu.Item>
          <Menu.Icon>
            <MagnifyingGlass />
          </Menu.Icon>
          Search
        </Menu.Item>
        <Divider />
        <Menu.Label>Danger Zone</Menu.Label>
        <Menu.Item>
          <Menu.Icon>
            <GearSix />
          </Menu.Icon>
          Settings
        </Menu.Item>
        <Menu.Item color="red">
          <Menu.Icon>
            <SignOut />
          </Menu.Icon>
          Log Out
        </Menu.Item>
      </Menu>
    </Flex>
  );
}