44 lines
1.6 KiB
TypeScript
Executable File
44 lines
1.6 KiB
TypeScript
Executable File
import { Menu } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from '#shared/ui/Sheet';
|
|
import { Container } from '#shared/widgets/common/Container';
|
|
import { AppLogo } from '../../shared';
|
|
import { SidebarFooter } from './SidebarFooter';
|
|
import { SidebarHeader } from './SidebarHeader';
|
|
import { SidebarMenu } from './SidebarMenu';
|
|
|
|
export function Header() {
|
|
const { pathname } = useLocation();
|
|
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsSheetOpen(false);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<header className="bg-mono dark:bg-background fixed start-0 end-0 top-0 z-10 flex h-(--header-height) shrink-0 items-center lg:hidden">
|
|
<Container className="flex flex-wrap items-center justify-between gap-3">
|
|
<AppLogo className="h-8.5" />
|
|
|
|
<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="dim" mode="icon" className="hover:text-white">
|
|
<Menu />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="dark w-62.5 gap-0 p-0" side="left" close={false}>
|
|
<SheetHeader className="space-y-0 p-0" />
|
|
<SheetBody className="flex grow flex-col overflow-y-auto p-0">
|
|
<SidebarHeader />
|
|
<SidebarMenu />
|
|
<SidebarFooter />
|
|
</SheetBody>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</Container>
|
|
</header>
|
|
);
|
|
}
|