55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
|
|
import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
|
|
import { Navbar } from '@/components/navbar/navbar';
|
|
import { AppShell, Burger, Group } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import { useAtom } from 'jotai';
|
|
|
|
export default function Shell({ children }: { children: React.ReactNode }) {
|
|
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
|
|
const [desktopOpened] = useAtom(desktopSidebarAtom);
|
|
const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
|
|
|
|
|
|
return (
|
|
<AppShell
|
|
layout="alt"
|
|
header={{ height: 45 }}
|
|
navbar={{
|
|
width: 300,
|
|
breakpoint: 'sm',
|
|
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
|
}}
|
|
padding="md"
|
|
>
|
|
<AppShell.Header>
|
|
<Group h="100%" px="md">
|
|
<Burger
|
|
opened={mobileOpened}
|
|
onClick={toggleMobile}
|
|
hiddenFrom="sm"
|
|
size="sm"
|
|
/>
|
|
<Burger
|
|
opened={desktopOpened}
|
|
onClick={toggleDesktop}
|
|
visibleFrom="sm"
|
|
size="sm"
|
|
/>
|
|
|
|
Header
|
|
|
|
</Group>
|
|
</AppShell.Header>
|
|
|
|
<AppShell.Navbar>
|
|
<Navbar />
|
|
</AppShell.Navbar>
|
|
|
|
<AppShell.Main>{children}</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
}
|