62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { AppShell } from '@mantine/core';
|
|
import { PropsWithChildren } from 'react';
|
|
import Header from './header';
|
|
import Navbar from './navbar';
|
|
import Pullable from './pullable';
|
|
import useVisualViewportSize from '../hooks/use-visual-viewport-size';
|
|
import useRouterConfig from '../hooks/use-router-config';
|
|
import Page from '@/components/page';
|
|
import './route-transition.css';
|
|
|
|
const Layout: React.FC<PropsWithChildren> = ({ children }) => {
|
|
const { header, withPadding, fullWidth } = useRouterConfig();
|
|
const viewport = useVisualViewportSize();
|
|
|
|
return (
|
|
<AppShell
|
|
id='app-shell'
|
|
layout='alt'
|
|
header={{ height: 60, collapsed: header.collapsed }}
|
|
navbar={{
|
|
width: { base: 0, sm: 100, md: 200, lg: 300 },
|
|
breakpoint: 'sm',
|
|
collapsed: { mobile: true },
|
|
}}
|
|
aside={{
|
|
width: { base: 0, sm: 100, md: 200, lg: 300 },
|
|
breakpoint: 'sm',
|
|
collapsed: { desktop: false, mobile: true }
|
|
}}
|
|
pos='relative'
|
|
h='100dvh'
|
|
mah='100dvh'
|
|
style={{
|
|
height: `${viewport.height}px`,
|
|
minHeight: '100dvh',
|
|
// top: viewport.top
|
|
}}
|
|
>
|
|
<Header {...header} elevated={scrollPosition.y > 2} />
|
|
<AppShell.Main
|
|
pos='relative'
|
|
h='100%'
|
|
mah='100%'
|
|
pb={{ base: 'calc(65px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
|
|
px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
|
|
maw='100dvw'
|
|
style={{ overflow: 'hidden' }}
|
|
>
|
|
<Pullable>
|
|
<Page noPadding={!withPadding} fullWidth={fullWidth}>
|
|
{children}
|
|
</Page>
|
|
</Pullable>
|
|
</AppShell.Main>
|
|
<Navbar />
|
|
<AppShell.Aside withBorder />
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
export default Layout;
|