fix: improve user experience of bottom navigation (#1739)

This change improves bottom navigation in the following ways:
- Adds labels and proper ARIA handling
- Highlights active item (including related subpages)
- Adds badge support from System page
- Fixes to stay above page content.

Co-authored-by: Corey Vaillancourt <coreyjv@gmail.com>

web/src/components/BottomNavBar.tsx

@@ -1,30 +1,60 @@
-import { AppBar, IconButton, Toolbar } from '@mui/material';
+import {
-import { Link } from '@tanstack/react-router';
+  Badge,
-import React from 'react';
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper,
+} from '@mui/material';
+import { Link, useRouterState } from '@tanstack/react-router';
 import { useNavItems } from '../hooks/useNavItems.tsx';
 
+const getBaseSection = (path: string) => '/' + path.split('/')[1];
+
 export const BottomNavBar = () => {
   const navItems = useNavItems();
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+
+  const currentSection = getBaseSection(pathname);
+  const activeItem = navItems
+    .filter((item) => !item.hidden)
+    .find((item) => getBaseSection(item.path) === currentSection);
 
   return (
-    <AppBar position="fixed" sx={{ top: 'auto', bottom: 0 }}>
+    <Paper
-      <Toolbar sx={{ display: 'flex', justifyContent: 'space-around' }}>
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: (theme) => theme.zIndex.appBar,
+      }}
+      elevation={3}
+    >
+      <BottomNavigation value={activeItem?.path ?? false} showLabels>
         {navItems
           .filter((item) => !item.hidden)
           .map((item) => (
-            <React.Fragment key={item.name}>
+            <BottomNavigationAction
-              <IconButton
+              key={item.name}
-                to={item.path}
+              label={item.name}
-                key={item.name}
+              value={item.path}
-                component={Link}
+              sx={{ minWidth: 0, flex: 1 }}
-                sx={{ display: 'inline-block' }}
+              icon={
-                color="inherit"
+                item.badge ? (
-              >
+                  <Badge
-                {item.icon}
+                    badgeContent={item.badge.count}
-              </IconButton>
+                    color={item.badge.color}
-            </React.Fragment>
+                  >
+                    {item.icon}
+                  </Badge>
+                ) : (
+                  item.icon
+                )
+              }
+              component={Link}
+              to={item.path}
+            />
           ))}
-      </Toolbar>
+      </BottomNavigation>
-    </AppBar>
+    </Paper>
   );
 };