118 lines
3.1 KiB
TypeScript
118 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
} from "@/components/ui/navigation-menu";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { MobileLink, MobileSectionLabel } from "./mobile-link";
|
|
import { NavDropdown } from "./nav-dropdown";
|
|
import { NAV_SECTIONS } from "./nav-items";
|
|
import { NavPill } from "./nav-pill";
|
|
import { triggerClass } from "./nav-styles";
|
|
import { MobileTools, NavToolsDropdown } from "./nav-tools";
|
|
|
|
export function NavMenu() {
|
|
const [sheetOpen, setSheetOpen] = useState(false);
|
|
const close = () => setSheetOpen(false);
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop */}
|
|
<nav className="hidden md:flex items-center flex-1">
|
|
<NavigationMenu viewport={false}>
|
|
<NavigationMenuList className="gap-0">
|
|
<NavigationMenuItem>
|
|
<NavPill href="/dashboard" preservePeriod>
|
|
Dashboard
|
|
</NavPill>
|
|
</NavigationMenuItem>
|
|
|
|
{NAV_SECTIONS.map((section) => (
|
|
<NavigationMenuItem key={section.label}>
|
|
<NavigationMenuTrigger className={triggerClass}>
|
|
{section.label}
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent>
|
|
<NavDropdown items={section.items} />
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
))}
|
|
|
|
<NavigationMenuItem>
|
|
<NavigationMenuTrigger className={triggerClass}>
|
|
Ferramentas
|
|
</NavigationMenuTrigger>
|
|
<NavigationMenuContent>
|
|
<NavToolsDropdown />
|
|
</NavigationMenuContent>
|
|
</NavigationMenuItem>
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</nav>
|
|
|
|
{/* Mobile */}
|
|
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden text-foreground hover:bg-foreground/10 hover:text-foreground"
|
|
>
|
|
<RiMenuLine className="size-5" />
|
|
<span className="sr-only">Abrir menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-72 p-0">
|
|
<SheetHeader className="p-4 border-b">
|
|
<SheetTitle>Menu</SheetTitle>
|
|
</SheetHeader>
|
|
<nav className="p-3 overflow-y-auto">
|
|
<MobileLink
|
|
href="/dashboard"
|
|
icon={<RiDashboardLine className="size-4" />}
|
|
onClick={close}
|
|
preservePeriod
|
|
>
|
|
Dashboard
|
|
</MobileLink>
|
|
|
|
{NAV_SECTIONS.map((section) => (
|
|
<div key={section.label}>
|
|
<MobileSectionLabel label={section.label} />
|
|
{section.items.map((item) => (
|
|
<MobileLink
|
|
key={item.href}
|
|
href={item.href}
|
|
icon={item.icon}
|
|
onClick={close}
|
|
badge={item.badge}
|
|
preservePeriod={item.preservePeriod}
|
|
>
|
|
{item.label}
|
|
</MobileLink>
|
|
))}
|
|
</div>
|
|
))}
|
|
|
|
<MobileSectionLabel label="Ferramentas" />
|
|
<MobileTools onClose={close} />
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</>
|
|
);
|
|
}
|