Menubar

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";
import {
  Activity,
  Bookmark,
  BookmarkCheck,
  ChartBar,
  Folder,
  Home,
  Layout,
  PlusCircle,
  Share,
  Star,
  Tag,
  UserSettings,
} from "@mynaui/icons-react";

export default function Basic() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>
          <Layout className="mr-2 size-4" stroke={2} />
          Dashboard
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <Home className="mr-2 size-4" stroke={2} />
            Overview
          </MenubarItem>
          <MenubarItem>
            <Activity className="mr-2 size-4" stroke={2} />
            Recent Activity
          </MenubarItem>
          <MenubarItem>
            <ChartBar className="mr-2 size-4" stroke={2} />
            Stats
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Bookmark className="mr-2 size-4" stroke={2} />
          Bookmarks
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <BookmarkCheck className="mr-2 size-4" stroke={2} />
            All Bookmarks
          </MenubarItem>
          <MenubarItem>
            <Tag className="mr-2 size-4" stroke={2} />
            Categories
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Star className="mr-2 size-4" stroke={2} />
            Favorites
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Folder className="mr-2 size-4" stroke={2} />
          Collections
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <PlusCircle className="mr-2 size-4" stroke={2} />
            Create Collection
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <UserSettings className="mr-2 size-4" stroke={2} />
            Manage Collections
          </MenubarItem>
          <MenubarItem>
            <Share className="mr-2 size-4" stroke={2} />
            Shared Collections
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";

export default function Dense() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Projects</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Projects</MenubarItem>
          <MenubarItem>New Project</MenubarItem>
          <MenubarItem>Archived Projects</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Tasks</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>My Tasks</MenubarItem>
          <MenubarItem>Assigned Tasks</MenubarItem>
          <MenubarItem>Completed Tasks</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Calendar</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>View Calendar</MenubarItem>
          <MenubarItem>Schedule Task</MenubarItem>
          <MenubarItem>Events</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Teams</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Teams</MenubarItem>
          <MenubarItem>Create Team</MenubarItem>
          <MenubarItem>Manage Teams</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Messages</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Inbox</MenubarItem>
          <MenubarItem>Sent</MenubarItem>
          <MenubarItem>Drafts</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Files</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Upload File</MenubarItem>
          <MenubarItem>My Files</MenubarItem>
          <MenubarItem>Shared Files</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Reports</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Project Reports</MenubarItem>
          <MenubarItem>Task Reports</MenubarItem>
          <MenubarItem>Time Reports</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Notifications</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Notifications</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Settings</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>History</MenubarItem>
          <MenubarItem>Time Tracking</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Start Timer</MenubarItem>
          <MenubarItem>Time Logs</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar";

export default function Fixed() {
  return (
    <Menubar className="absolute inset-x-0 top-0 w-full rounded-none border-0 border-b">
      <MenubarMenu>
        <MenubarTrigger>Contacts</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Contacts</MenubarItem>
          <MenubarItem>Add Contact</MenubarItem>
          <MenubarItem>Import Contacts</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Leads</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Leads</MenubarItem>
          <MenubarItem>New Lead</MenubarItem>
          <MenubarItem>Lead Scoring</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Opportunities</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Opportunities</MenubarItem>
          <MenubarItem>New Opportunity</MenubarItem>
          <MenubarItem>Sales Pipeline</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Accounts</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Accounts</MenubarItem>
          <MenubarItem>Create Account</MenubarItem>
          <MenubarItem>Account Types</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Activities</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>My Activities</MenubarItem>
          <MenubarItem>Schedule Activity</MenubarItem>
          <MenubarItem>Activity History</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Campaigns</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Campaigns</MenubarItem>
          <MenubarItem>Create Campaign</MenubarItem>
          <MenubarItem>Analytics</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Emails</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Compose Email</MenubarItem>
          <MenubarItem>Sent Emails</MenubarItem>
          <MenubarItem>Templates</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { FileText, Edit, Eye, QuestionCircle } from "@mynaui/icons-react";

export default function EditorMenu() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>
          <FileText className="mr-2 stroke-2 size-4" stroke={2} /> File
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New</MenubarItem>
          <MenubarItem>Save as…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Exit</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Edit className="mr-2 stroke-2 size-4" stroke={2} /> Edit
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo</MenubarItem>
          <MenubarItem>Redo</MenubarItem>
          <MenubarItem>Cut</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Eye className="mr-2 stroke-2 size-4" stroke={2} /> View
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Zoom In</MenubarItem>
          <MenubarItem>Zoom Out</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <QuestionCircle className="mr-2 stroke-2 size-4" stroke={2} /> Help
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Documentation</MenubarItem>
          <MenubarItem>About</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { EnvelopeOpen, Inbox, Pencil, Send } from "@mynaui/icons-react";

export default function EmailMenu() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>
          <EnvelopeOpen className="mr-2 stroke-2 size-4" stroke={2} /> Compose
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New Message</MenubarItem>
          <MenubarItem>Template</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Inbox className="mr-2 stroke-2 size-4" stroke={2} /> Inbox
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Mail</MenubarItem>
          <MenubarItem>Starred</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Pencil className="mr-2 stroke-2 size-4" stroke={2} /> Drafts
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>All Drafts</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Send className="mr-2 stroke-2 size-4" stroke={2} /> Sent
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Sent Mail</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { Lock } from "@mynaui/icons-react";

export default function DisabledMenu() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Account</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Profile</MenubarItem>
          <MenubarItem>Settings</MenubarItem>
          <MenubarItem disabled className="flex items-center">
            <Lock className="stroke-2 size-4" /> Admin
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}