flxn-app/src/features/core/components/layout.tsx

import { AppShell, Box } from '@mantine/core';
import { PropsWithChildren } from 'react';
import { useLocation } from '@tanstack/react-router';
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();
  const location = useLocation();

  return (
    <AppShell
      id='app-shell'
      layout='alt'
      header={{
        // Old installs froze black-translucent at add-to-home-screen time, so
        // the webview can extend under the status bar; inset is 0 elsewhere.
        height: 'calc(60px + env(safe-area-inset-top, 0px))',
        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} />
      <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}>
            <Box key={location.pathname} className="flxn-route-enter">
              {children}
            </Box>
          </Page>
        </Pullable>
      </AppShell.Main>
      <Navbar />
      <AppShell.Aside withBorder />
    </AppShell>
  );
}

export default Layout;