nandi.uk
This repository has no description
1.4 kB
52 lines
1'use client';
2
3import { AppShell } from '@mantine/core';
4import Navbar from '@/components/navigation/navbar/Navbar';
5import ComposerDrawer from '@/features/composer/components/composerDrawer/ComposerDrawer';
6import { useNavbarContext } from '@/providers/navbar';
7import { usePathname } from 'next/navigation';
8import BottomBar from '../bottomBar/BottomBar';
9import { useMediaQuery } from '@mantine/hooks';
10
11interface Props {
12 children: React.ReactNode;
13}
14
15export default function AppLayout(props: Props) {
16 const { mobileOpened, desktopOpened } = useNavbarContext();
17 const isMobile = useMediaQuery('(max-width: 48em)', true); // "sm" breakpoint
18 const pathname = usePathname();
19
20 const ROUTES_WITH_ASIDE = ['/url'];
21 const hasAside = ROUTES_WITH_ASIDE.some((prefix) =>
22 pathname.startsWith(prefix),
23 );
24 const asideWidth = hasAside ? 300 : 0;
25
26 return (
27 <AppShell
28 header={{ height: 0 }}
29 navbar={{
30 width: 300,
31 breakpoint: 'xs',
32 collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
33 }}
34 aside={{
35 width: asideWidth,
36 breakpoint: 'xl',
37 collapsed: { mobile: true },
38 }}
39 footer={{
40 height: isMobile ? 80 : 0,
41 }}
42 >
43 <Navbar />
44
45 <AppShell.Main>
46 {props.children}
47 <ComposerDrawer />
48 </AppShell.Main>
49 <BottomBar />
50 </AppShell>
51 );
52}