Merge pull request #7 from beatz174-bit/codex/add-navigation-to-all-pages

Add navigation bar to all pages

src/App.tsx

@@ -1,6 +1,7 @@
 import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DBProvider } from './context/DBProvider';
+import { AppLayout } from './components/AppLayout';
 import { HomeScreen } from './screens/HomeScreen';
 import { StartPickListScreen } from './screens/StartPickListScreen';
 import { PickListsScreen } from './screens/PickListsScreen';
@@ -24,6 +25,7 @@ const AppRoutes = () => {
   useServiceWorker();
   return (
     <Routes>
+      <Route element={<AppLayout />}>
         <Route path="/" element={<HomeScreen />} />
         <Route path="/start" element={<StartPickListScreen />} />
         <Route path="/pick-lists" element={<PickListsScreen />} />
@@ -32,6 +34,7 @@ const AppRoutes = () => {
         <Route path="/products" element={<ManageProductsScreen />} />
         <Route path="/areas" element={<ManageAreasScreen />} />
         <Route path="/scan" element={<BarcodeScannerScreen />} />
+      </Route>
     </Routes>
   );
 };

src/components/AppLayout.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import { NavigationBar } from './NavigationBar';
+
+export const AppLayout = () => (
+  <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <NavigationBar />
+    <Box component="main" sx={{ flexGrow: 1 }}>
+      <Outlet />
+    </Box>
+  </Box>
+);

src/components/NavigationBar.tsx

@@ -0,0 +1,54 @@
+import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+
+const navLinks = [
+  { to: '/', label: 'Home' },
+  { to: '/start', label: 'Start' },
+  { to: '/pick-lists', label: 'Pick Lists' },
+  { to: '/products', label: 'Products' },
+  { to: '/areas', label: 'Areas' },
+  { to: '/scan', label: 'Scan' },
+];
+
+const isActivePath = (currentPath: string, target: string) =>
+  currentPath === target || currentPath.startsWith(`${target}/`);
+
+export const NavigationBar = () => {
+  const location = useLocation();
+
+  return (
+    <AppBar position="static" color="default" elevation={1}>
+      <Toolbar sx={{ gap: 2, overflowX: 'auto' }}>
+        <Typography
+          variant="h6"
+          component={RouterLink}
+          to="/"
+          sx={{ color: 'inherit', textDecoration: 'none', fontWeight: 700 }}
+        >
+          StockFill
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {navLinks.map((link) => {
+            const active = isActivePath(location.pathname, link.to);
+            return (
+              <Button
+                key={link.to}
+                component={RouterLink}
+                to={link.to}
+                color="inherit"
+                sx={{
+                  minWidth: 'fit-content',
+                  opacity: active ? 1 : 0.8,
+                  textTransform: 'none',
+                  fontWeight: active ? 700 : 500,
+                }}
+              >
+                {link.label}
+              </Button>
+            );
+          })}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};