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,23 @@
+import { NavLink } from 'react-router'
+import { Icon } from '../ui/Icon.tsx'
+import { navItems } from './navItems.ts'
+import styles from './BottomBar.module.css'
+
+// Mobile nav: a dark pill bar floating over the bottom of the screen. Inactive
+// items show only their icon; the active item adds its label on a grape pill.
+export function BottomBar() {
+  return (
+    <nav aria-label="Primary" className={styles.bar}>
+      {navItems.map((item) => (
+        <NavLink key={item.to} to={item.to} end={item.end} className={styles.item}>
+          {({ isActive }) => (
+            <span className={isActive ? `${styles.pill} ${styles.active}` : styles.pill}>
+              <Icon icon={item.icon} size="nav" />
+              <span className={isActive ? styles.label : styles.hiddenLabel}>{item.label}</span>
+            </span>
+          )}
+        </NavLink>
+      ))}
+    </nav>
+  )
+}