42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { MenuIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "~/components/ui/sheet";
|
|
import type { NavItem } from "~/types/constants/nav-item";
|
|
import { DashboardNav } from "./dashboard-nav";
|
|
|
|
type MobileSidebarProps = {
|
|
navItems: NavItem[];
|
|
};
|
|
|
|
export function MobileSidebar({ navItems }: MobileSidebarProps) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<Sheet onOpenChange={setOpen} open={open}>
|
|
<SheetTrigger asChild>
|
|
<MenuIcon />
|
|
</SheetTrigger>
|
|
<SheetContent className="!px-0" side="left">
|
|
<SheetTitle>
|
|
<span className="sr-only">Menu Navigasi</span>
|
|
</SheetTitle>
|
|
<SheetDescription>
|
|
<span className="mb-2 px-4 font-semibold text-lg tracking-tight">Menu Navigasi</span>
|
|
</SheetDescription>
|
|
<div className="space-y-4 py-4">
|
|
<div className="px-3 py-2">
|
|
<div className="space-y-1">
|
|
<DashboardNav isMobileNav={true} items={navItems} setOpen={setOpen} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|