Responsive app shell, routes and navigation (#38)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 18:40:34 -04:00
parent a453a84231
commit 998658b42c
17 changed files with 727 additions and 19 deletions
@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router'
+import { BottomBar } from './BottomBar.tsx'
+import { Rail } from './Rail.tsx'
+import { Sidebar } from './Sidebar.tsx'
+import { useBreakpoint } from './useBreakpoint.ts'
+import styles from './AppShell.module.css'
+
+// The responsive frame around every page: one nav layout per breakpoint and a
+// scrolling main area for the routed page.
+export function AppShell() {
+  const breakpoint = useBreakpoint()
+  return (
+    <div className={`${styles.shell} ${styles[breakpoint]}`}>
+      {breakpoint === 'mobile' && <BottomBar />}
+      {breakpoint === 'tablet' && <Rail />}
+      {breakpoint === 'desktop' && <Sidebar />}
+      <main className={styles.main}>
+        <Outlet />
+      </main>
+    </div>
+  )
+}