56 lines
1.8 KiB
TypeScript
Executable File
56 lines
1.8 KiB
TypeScript
Executable File
import { Menu } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { useIsMobile } from '@crux-kit/hooks';
|
|
import { toAbsoluteUrl } from '#shared/lib/helpers';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from '#shared/ui/Sheet';
|
|
import { MegaMenuMobile } from './MegaMenuMobile';
|
|
|
|
export function HeaderLogo() {
|
|
const isMobile = useIsMobile();
|
|
const { pathname } = useLocation();
|
|
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
|
|
// Close sheet when route changes
|
|
useEffect(() => {
|
|
setIsSheetOpen(false);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<div className="flex grow items-center gap-1 lg:w-100 lg:grow-0">
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Link to="/">
|
|
<img
|
|
src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
|
|
className="min-h-8.5 shrink-0 dark:hidden"
|
|
alt="logo"
|
|
/>
|
|
<img
|
|
src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
|
|
className="hidden min-h-8.5 shrink-0 dark:inline-block"
|
|
alt="logo"
|
|
/>
|
|
</Link>
|
|
<h3 className="text-mono hidden text-lg font-medium md:block">Metronic</h3>
|
|
</div>
|
|
|
|
{isMobile && (
|
|
<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="dim" mode="icon">
|
|
<Menu />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="w-68.75 gap-0 p-0" side="left" close={false}>
|
|
<SheetHeader className="space-y-0 p-0" />
|
|
<SheetBody className="overflow-y-auto p-0">
|
|
<MegaMenuMobile />
|
|
</SheetBody>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|