62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client";
|
|
import { Link } from "@/i18n/routing";
|
|
import { MenuIcon, PanelsTopLeft } from "lucide-react";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Menu } from "@/components/partials/sidebar/menu";
|
|
import {
|
|
Sheet,
|
|
SheetHeader,
|
|
SheetContent,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
import { MenuClassic } from "./menu-classic";
|
|
import DashCodeLogo from "@/components/dascode-logo";
|
|
import { useMobileMenuConfig } from "@/hooks/use-mobile-menu";
|
|
import { useMediaQuery } from "@/hooks/use-media-query";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
|
|
export function SheetMenu() {
|
|
const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
|
|
const [config, setConfig] = useConfig();
|
|
const { isOpen } = mobileMenuConfig;
|
|
|
|
const isDesktop = useMediaQuery("(min-width: 1280px)");
|
|
if (isDesktop) return null;
|
|
return (
|
|
<Sheet
|
|
open={isOpen}
|
|
onOpenChange={() => setMobileMenuConfig({ isOpen: !isOpen })}
|
|
>
|
|
<SheetTrigger className="xl:hidden" asChild>
|
|
<Button
|
|
className="h-8"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
setConfig({
|
|
...config,
|
|
collapsed: false,
|
|
})
|
|
}
|
|
>
|
|
<Icon icon="heroicons:bars-3-bottom-right" className="h-5 w-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="sm:w-72 px-3 h-full flex flex-col" side="left">
|
|
<SheetHeader>
|
|
<Link href="/" className="flex gap-2 items-center ">
|
|
<img
|
|
className="w-100"
|
|
src="/../images/all-img/mediahub-logo.png"
|
|
alt="logo"
|
|
width={150}
|
|
/>
|
|
</Link>
|
|
</SheetHeader>
|
|
<MenuClassic />
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|