61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { Sheet, SheetContent, SheetTrigger } from "@/Components/ui/sheet";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { AlignJustifyIcon, Menu } from "lucide-react";
|
|
import { Link } from "@inertiajs/react";
|
|
import { MenuItemProp } from "@/types";
|
|
import ApplicationLogo from "@/Components/ApplicationLogo";
|
|
import { DropdownMenuSeparator } from "./ui/dropdown-menu";
|
|
|
|
const MobileMenu = ({ links }: { links: MenuItemProp[] }) => {
|
|
return (
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="shrink-0 md:hidden"
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle navigation menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="flex flex-col">
|
|
<nav className="text-lg font-medium">
|
|
<Link
|
|
href="#"
|
|
className="flex items-center gap-2 text-lg font-semibold mb-4"
|
|
>
|
|
<ApplicationLogo className="h-8 w-8 fill-current text-gray-500" />
|
|
|
|
<span>Acme Inc</span>
|
|
</Link>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<div className="space-y-2">
|
|
{links.map((link, index) => (
|
|
<MobileMenuItem key={index} link={link} />
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|
|
|
|
const MobileMenuItem = ({ link }: { link: MenuItemProp }) => {
|
|
const Icon = (link.icon ?? AlignJustifyIcon) as React.ElementType;
|
|
|
|
return (
|
|
<Link
|
|
href={link.href}
|
|
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
{link.title}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default MobileMenu;
|