Navbar Preskok Demo

"use client"

import { ChevronDownIcon, SearchIcon, ShoppingBagIcon } from "lucide-react"

import { UserMenu } from "@/components/user-menu"
import { Button } from "@/components/ui/preskok-ui/button"
import { Link } from "@/components/ui/preskok-ui/link"
import {
  Menu,
  MenuContent,
  MenuItem,
} from "@/components/ui/preskok-ui/menu"
import {
  Navbar,
  NavbarGap,
  NavbarItem,
  NavbarMobile,
  NavbarProvider,
  NavbarSection,
  NavbarSeparator,
  NavbarSpacer,
  NavbarStart,
  NavbarTrigger,
  type NavbarProps,
} from "@/components/ui/preskok-ui/navbar"
import { PreskokIcon } from "@/components/ui/preskok-ui/preskok-icon"
import { Separator } from "@/components/ui/preskok-ui/separator"

const categories = [
  {
    id: 1,
    label: "Electronics",
    url: "#",
  },
  {
    id: 2,
    label: "Fashion",
    url: "#",
  },
  {
    id: 3,
    label: "Home & Kitchen",
    url: "#",
  },
  {
    id: 4,
    label: "Sports",
    url: "#",
  },
  {
    id: 5,
    label: "Books",
    url: "#",
  },
  {
    id: 6,
    label: "Beauty & Personal Care",
    url: "#",
  },
  {
    id: 7,
    label: "Grocery",
    url: "#",
  },
  {
    id: 8,
    label: "Toys & Games",
    url: "#",
  },
  {
    id: 9,
    label: "Automotive",
    url: "#",
  },
  {
    id: 10,
    label: "Health & Wellness",
    url: "#",
  },
]

export default function AppNavbar(props: NavbarProps) {
  return (
    <NavbarProvider>
      <Navbar {...props} className="max-w-[100cqi]">
        <NavbarStart>
          <Link
            className="flex items-center gap-x-2 font-medium"
            aria-label="Goto documentation of Navbar"
            href="/navigation/navbar"
          >
            <PreskokIcon className="size-6 sm:size-5" />
          </Link>
        </NavbarStart>
        <NavbarGap />
        <NavbarSection>
          <NavbarItem href="#" isCurrent>
            Home
          </NavbarItem>

          <NavbarItem href="#">Orders</NavbarItem>
          <Menu>
            <NavbarItem>
              Categories
              <ChevronDownIcon className="col-start-3" />
            </NavbarItem>
            <MenuContent
              className="min-w-(--trigger-width) sm:min-w-56"
              items={categories}
            >
              {(item) => (
                <MenuItem id={item.id} textValue={item.label} href={item.url}>
                  {item.label}
                </MenuItem>
              )}
            </MenuContent>
          </Menu>
        </NavbarSection>
        <NavbarSpacer />
        <NavbarSection className="max-md:hidden">
          <Button intent="plain" size="sq-sm" aria-label="Search for products">
            <SearchIcon data-slot="icon" />
          </Button>
          <Button intent="plain" size="sq-sm" aria-label="Your Bag">
            <ShoppingBagIcon data-slot="icon" />
          </Button>
          <Separator orientation="vertical" className="mr-3 ml-1 h-5" />
          <UserMenu />
        </NavbarSection>
      </Navbar>
      <NavbarMobile>
        <NavbarTrigger />
        <NavbarSpacer />
        <Button intent="plain" size="sq-sm" aria-label="Search for products">
          <SearchIcon data-slot="icon" />
        </Button>
        <Button intent="plain" size="sq-sm" aria-label="Your Bag">
          <ShoppingBagIcon data-slot="icon" />
        </Button>
        <NavbarSeparator className="mr-2.5" />
        <UserMenu />
      </NavbarMobile>
    </NavbarProvider>
  )
}

"use client"

import {
  CommandIcon,
  HeadphonesIcon,
  LayoutDashboardIcon,
  LogOutIcon,
  SettingsIcon,
  ShieldIcon,
} from "lucide-react"

import { Avatar } from "@/components/ui/preskok-ui/avatar"
import {
  Menu,
  MenuContent,
  MenuHeader,
  MenuItem,
  MenuSection,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/preskok-ui/menu"

export function UserMenu() {
  return (
    <Menu>
      <MenuTrigger aria-label="Open Menu">
        <Avatar alt="Maya Chen" size="md" isSquare initials="MC" />
      </MenuTrigger>
      <MenuContent placement="bottom right" className="min-w-60 sm:min-w-56">
        <MenuSection>
          <MenuHeader separator>
            <span className="block">Maya Chen</span>
            <span className="font-normal text-muted-foreground">@maya</span>
          </MenuHeader>
        </MenuSection>

        <MenuItem href="#dashboard">
          <LayoutDashboardIcon data-slot="icon" />
          Dashboard
        </MenuItem>
        <MenuItem href="#settings">
          <SettingsIcon data-slot="icon" />
          Settings
        </MenuItem>
        <MenuItem href="#security">
          <ShieldIcon data-slot="icon" />
          Security
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <CommandIcon data-slot="icon" />
          Command Menu
        </MenuItem>

        <MenuItem href="#contact">
          <HeadphonesIcon data-slot="icon" />
          Customer Support
        </MenuItem>
        <MenuSeparator />
        <MenuItem href="#logout">
          <LogOutIcon data-slot="icon" />
          Log out
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}