init

src/features/core/components/layout.tsx

@@ -0,0 +1,53 @@
+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;