chore: add navigation controls

src/components/AuthHeader.tsx

@@ -1,5 +1,9 @@
-import { Settings } from "@mui/icons-material";
+import { Biotech, Dashboard, Settings } from "@mui/icons-material";
 import { Box, Avatar, Chip, Button, Tooltip } from "@mui/material";
+import BottomNavigation from "@mui/material/BottomNavigation";
+import BottomNavigationAction from "@mui/material/BottomNavigationAction";
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export type AuthHeaderProps = {
   user: {
@@ -16,34 +20,46 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
   logOut,
   setOpenSettings,
 }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "row",
-        gap: 2,
-        alignItems: "center",
-        justifyContent: "end",
-      }}
-    >
-      <Avatar alt={user?.login} src={user?.avatar_url} sx={{ mr: 2 }} />
-      <Chip
-        label={user?.login}
-        onClick={() => window.open(user?.url, "_blank")}
-      />
-      <Button
-        variant="text"
-        color="inherit"
-        size="small"
-        onClick={() => setOpenSettings(true)}
+    <>
+      <BottomNavigation
+        showLabels
+        value={location.pathname}
+        onChange={(event, newValue) => navigate(newValue)}>
+        <BottomNavigationAction label="Dashboard" icon={<Dashboard />} sx={{ backgroundColor: "#f5f5f5"}} value="/"/>
+        <BottomNavigationAction label="Coverage" icon={<Biotech />} sx={{ backgroundColor: "#f5f5f5"}} value="/coverage"/>
+      </BottomNavigation>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 2,
+          alignItems: "center",
+          justifyContent: "end",
+        }}
       >
-        <Tooltip title="Settings">
-          <Settings />
-        </Tooltip>
-      </Button>
-      <Button variant="text" color="inherit" onClick={() => logOut()}>
-        Log Out
-      </Button>
-    </Box>
+        <Avatar alt={user?.login} src={user?.avatar_url} sx={{ mr: 2 }} />
+        <Chip
+          label={user?.login}
+          onClick={() => window.open(user?.url, "_blank")}
+        />
+        <Button
+          variant="text"
+          color="inherit"
+          size="small"
+          onClick={() => setOpenSettings(true)}
+        >
+          <Tooltip title="Settings">
+            <Settings />
+          </Tooltip>
+        </Button>
+        <Button variant="text" color="inherit" onClick={() => logOut()}>
+          Log Out
+        </Button>
+      </Box>
+    </>
   );
 };