Menubar

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,  MenubarSubmenu,  MenubarSubmenuTrigger,  MenubarSubmenuTriggerIcon,  MenubarSubmenuContent,  MenubarSeparator,} from "moduix";export function MenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>File</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>New File</MenubarItem>          <MenubarItem closeOnClick>Open...</MenubarItem>          <MenubarItem closeOnClick>Save</MenubarItem>          <MenubarSubmenu>            <MenubarSubmenuTrigger>              Export              <MenubarSubmenuTriggerIcon />            </MenubarSubmenuTrigger>            <MenubarSubmenuContent>              <MenubarItem closeOnClick>PDF</MenubarItem>              <MenubarItem closeOnClick>PNG</MenubarItem>              <MenubarItem closeOnClick>SVG</MenubarItem>            </MenubarSubmenuContent>          </MenubarSubmenu>          <MenubarSeparator />          <MenubarItem closeOnClick>Print</MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>Edit</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>Cut</MenubarItem>          <MenubarItem closeOnClick>Copy</MenubarItem>          <MenubarItem closeOnClick>Paste</MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu disabled>        <MenubarTrigger>Help</MenubarTrigger>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarGroup,  MenubarGroupLabel,  MenubarRadioGroup,  MenubarRadioItem,  MenubarRadioItemIndicator,  MenubarItemText,  MenubarSeparator,  MenubarCheckboxItem,  MenubarCheckboxItemIndicator,} from "moduix";import { useState } from "react";export function GroupsAndControlsMenubarDemo() {  const [sortBy, setSortBy] = useState("name");  const [showSidebar, setShowSidebar] = useState(true);  const [showPanel, setShowPanel] = useState(false);  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>View</MenubarTrigger>        <MenubarContent>          <MenubarGroup>            <MenubarGroupLabel>Sort</MenubarGroupLabel>            <MenubarRadioGroup value={sortBy} onValueChange={setSortBy}>              <MenubarRadioItem value="name">                <MenubarRadioItemIndicator />                <MenubarItemText>Name</MenubarItemText>              </MenubarRadioItem>              <MenubarRadioItem value="date">                <MenubarRadioItemIndicator />                <MenubarItemText>Date Modified</MenubarItemText>              </MenubarRadioItem>              <MenubarRadioItem value="type">                <MenubarRadioItemIndicator />                <MenubarItemText>Type</MenubarItemText>              </MenubarRadioItem>            </MenubarRadioGroup>          </MenubarGroup>          <MenubarSeparator />          <MenubarGroup>            <MenubarGroupLabel>Panels</MenubarGroupLabel>            <MenubarCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>              <MenubarCheckboxItemIndicator />              <MenubarItemText>Sidebar</MenubarItemText>            </MenubarCheckboxItem>            <MenubarCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>              <MenubarCheckboxItemIndicator />              <MenubarItemText>Preview</MenubarItemText>            </MenubarCheckboxItem>          </MenubarGroup>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,  MenubarItemShortcut,  MenubarSeparator,} from "moduix";export function ShortcutsMenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>Edit</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>            Undo            <MenubarItemShortcut>Ctrl+Z</MenubarItemShortcut>          </MenubarItem>          <MenubarItem closeOnClick>            Redo            <MenubarItemShortcut>Ctrl+Y</MenubarItemShortcut>          </MenubarItem>          <MenubarSeparator />          <MenubarItem closeOnClick>            Copy            <MenubarItemShortcut>Ctrl+C</MenubarItemShortcut>          </MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  InfoIcon,  MapIcon,  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarCheckboxItem,  MenubarCheckboxItemIndicator,  MenubarItemText,  MenubarItemTextContent,  MenubarItemTextIcon,  MenubarItemTextLabel,} from "moduix";import { useState } from "react";export function IndicatorRightMenubarDemo() {  const [showSidebar, setShowSidebar] = useState(true);  const [showPanel, setShowPanel] = useState(false);  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>View</MenubarTrigger>        <MenubarContent>          <MenubarCheckboxItem            checked={showSidebar}            onCheckedChange={setShowSidebar}            indicator="end"          >            <MenubarItemText>              <MenubarItemTextContent>                <MenubarItemTextIcon>                  <InfoIcon />                </MenubarItemTextIcon>                <MenubarItemTextLabel>Sidebar</MenubarItemTextLabel>              </MenubarItemTextContent>            </MenubarItemText>            <MenubarCheckboxItemIndicator />          </MenubarCheckboxItem>          <MenubarCheckboxItem            checked={showPanel}            onCheckedChange={setShowPanel}            indicator="end"          >            <MenubarItemText>              <MenubarItemTextContent>                <MenubarItemTextIcon>                  <MapIcon />                </MenubarItemTextIcon>                <MenubarItemTextLabel>Preview</MenubarItemTextLabel>              </MenubarItemTextContent>            </MenubarItemText>            <MenubarCheckboxItemIndicator />          </MenubarCheckboxItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,  MenubarSubmenu,  MenubarSubmenuTrigger,  MenubarSubmenuTriggerIcon,  MenubarSubmenuContent,  MenubarSeparator,} from "moduix";export function NestedMenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>File</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>New File</MenubarItem>          <MenubarSubmenu>            <MenubarSubmenuTrigger>              Export              <MenubarSubmenuTriggerIcon />            </MenubarSubmenuTrigger>            <MenubarSubmenuContent>              <MenubarItem closeOnClick>PDF</MenubarItem>              <MenubarItem closeOnClick>PNG</MenubarItem>              <MenubarItem closeOnClick>SVG</MenubarItem>            </MenubarSubmenuContent>          </MenubarSubmenu>          <MenubarSeparator />          <MenubarItem closeOnClick>Print</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,} from "moduix";export function VerticalMenubarDemo() {  return (    <Menubar orientation="vertical">      <MenubarMenu>        <MenubarTrigger>Project</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>Create branch</MenubarItem>          <MenubarItem closeOnClick>Pull latest</MenubarItem>          <MenubarItem closeOnClick>Open in IDE</MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>Deploy</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>Staging</MenubarItem>          <MenubarItem closeOnClick>Production</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarLinkItem,  MenubarSeparator,  MenubarItem,} from "moduix";export function LinkItemsMenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>Navigate</MenubarTrigger>        <MenubarContent>          <MenubarLinkItem href="#projects">Projects</MenubarLinkItem>          <MenubarLinkItem href="#teams">Teams</MenubarLinkItem>          <MenubarLinkItem href="#billing">Billing</MenubarLinkItem>          <MenubarSeparator />          <MenubarItem closeOnClick>Copy Link</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

import {  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,  MenubarSeparator,} from "moduix";export function CustomStylesMenubarDemo() {  return (    <Menubar className={styles.customRoot}>      <MenubarMenu>        <MenubarTrigger>Window</MenubarTrigger>        <MenubarContent          className={styles.customPopup}          classNames={{            portal: styles.customPortal,            backdrop: styles.customBackdrop,            positioner: styles.customPositioner,            viewport: styles.customViewport,          }}          sideOffset={10}          align="start"          alignOffset={-4}          withArrow          withBackdrop        >          <MenubarItem closeOnClick>Minimize</MenubarItem>          <MenubarItem closeOnClick>Zoom</MenubarItem>          <MenubarSeparator />          <MenubarItem closeOnClick>Bring All to Front</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

.customRoot {  --menubar-bg: var(--color-background);  --menubar-border-color: rgb(37 99 235);  --menubar-radius: var(--radius-lg);  --menubar-trigger-bg-hover: rgb(219 234 254);  --menubar-trigger-color-active: rgb(255 255 255);  --menubar-trigger-bg-active: rgb(37 99 235);}.customPortal {  pointer-events: auto;}.customBackdrop {  background-color: rgb(15 23 42 / 0.48);  backdrop-filter: blur(4px);}.customPositioner {  --menubar-popup-min-width: 14rem;}.customPopup {  --menubar-popup-bg: var(--color-background);  --menubar-popup-border-color: rgb(37 99 235);  --menubar-popup-shadow: var(--shadow-lg);  --menubar-highlight-bg: rgb(37 99 235);  --menubar-highlight-color: rgb(255 255 255);}.customViewport {  padding-block: var(--spacing-2);}

import {  ChevronDownIcon,  MapIcon,  Menubar,  MenubarMenu,  MenubarTrigger,  MenubarContent,  MenubarItem,  MenubarItemTextContent,  MenubarItemTextIcon,  MenubarItemTextLabel,  MenubarSubmenu,  MenubarSubmenuTrigger,  MenubarSubmenuTriggerIcon,  MenubarSubmenuContent,} from "moduix";export function IconsMenubarDemo() {  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>Places</MenubarTrigger>        <MenubarContent>          <MenubarItem closeOnClick>            <MenubarItemTextContent>              <MenubarItemTextIcon>                <MapIcon />              </MenubarItemTextIcon>              <MenubarItemTextLabel>Open map</MenubarItemTextLabel>            </MenubarItemTextContent>          </MenubarItem>          <MenubarSubmenu>            <MenubarSubmenuTrigger>              More              <MenubarSubmenuTriggerIcon>                <ChevronDownIcon />              </MenubarSubmenuTriggerIcon>            </MenubarSubmenuTrigger>            <MenubarSubmenuContent>              <MenubarItem closeOnClick>Nearby</MenubarItem>              <MenubarItem closeOnClick>Routes</MenubarItem>            </MenubarSubmenuContent>          </MenubarSubmenu>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}