54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { AppShell } from '@mantine/core';
|
|
import { PropsWithChildren, useState } from 'react';
|
|
import Header from './header';
|
|
import Navbar from './navbar';
|
|
import useHeaderConfig from '../hooks/use-header-config';
|
|
import Pullable from './pullable';
|
|
import useVisualViewportSize from '../hooks/use-visual-viewport-size';
|
|
|
|
const Layout: React.FC<PropsWithChildren> = ({ children }) => {
|
|
const headerConfig = useHeaderConfig();
|
|
const viewport = useVisualViewportSize();
|
|
const [scrollPosition, setScrollPosition] = useState({ x: 0, y: 0 });
|
|
|
|
return (
|
|
<AppShell
|
|
id='app-shell'
|
|
layout='alt'
|
|
header={{ height: 60, collapsed: headerConfig.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={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
|
|
>
|
|
<Header scrollPosition={scrollPosition} {...headerConfig} />
|
|
<AppShell.Main
|
|
pos='relative'
|
|
h='100%'
|
|
mah='100%'
|
|
pb={{ base: 70, md: 0 }}
|
|
px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
|
|
style={{ transition: 'none' }}
|
|
>
|
|
<Pullable scrollPosition={scrollPosition} onScrollPositionChange={setScrollPosition}>
|
|
{children}
|
|
</Pullable>
|
|
</AppShell.Main>
|
|
<Navbar />
|
|
<AppShell.Aside withBorder />
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
export default Layout;
|