import {
  Navbar,
  NavbarItem,
  NavbarMainItems,
  BottomNavItems,
  AppLogo,
  NavbarContent,
} from "@/components/ui/navbar/base";

import { Home, Lock, FileText, Settings2, BarChart3 } from "lucide-react";

export default function DefaultDemo() {
  return (
    <Navbar className="z-30">
      <AppLogo href="/" className="h-24 w-12">
        Lao
      </AppLogo>
      {/* Navigation Sections */}
      <NavbarContent>
        {/* Section 1: Main Navigation */}
        <NavbarMainItems>
          <NavbarItem label="Dashboard">
            <Home className="h-6 w-6" />
          </NavbarItem>
          <NavbarItem label="Permissons">
            <Lock className="h-6 w-6" />
          </NavbarItem>

          <NavbarItem label="Active Item" active>
            <FileText className="h-6 w-6" />
          </NavbarItem>

          <NavbarItem label="Admin Settinds">
            <Settings2 className="h-6 w-6" />
          </NavbarItem>

          <NavbarItem label="Permissons">
            <BarChart3 className="size-4" />
          </NavbarItem>
        </NavbarMainItems>
        {/* Bottom Section: User & Logout */}
        <BottomNavItems>foo</BottomNavItems>
      </NavbarContent>
    </Navbar>
  );
}
Navbar Pattern

Default

We use cookies
