50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { Sheet, SheetContent, SheetTrigger } from "@/Components/ui/sheet";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Home, Menu } from "lucide-react";
|
|
import { Link } from "@inertiajs/react";
|
|
import { MenuItemProp } from "@/types";
|
|
import ApplicationLogo from "@/Components/ApplicationLogo";
|
|
|
|
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="grid gap-2 text-lg font-medium">
|
|
<Link
|
|
href="#"
|
|
className="flex items-center gap-2 text-lg font-semibold"
|
|
>
|
|
<ApplicationLogo className="h-8 w-8 fill-current text-gray-500" />
|
|
|
|
<span>Acme Inc</span>
|
|
</Link>
|
|
{links.map((link, index) => {
|
|
return (
|
|
<Link
|
|
key={index}
|
|
href={link.href}
|
|
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<Home className="h-5 w-5" />
|
|
{link.title}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|
|
|
|
export default MobileMenu;
|