feat: add navigation.

backed-fi · Dec 1, 2023 · 503a24a · 503a24a
1 parent 762e3dc
commit 503a24a
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 8 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -15,6 +15,8 @@ import { AuthContextProvider } from "./context/AuthContext";
 import { ApiContextProvider } from "./context/ApiContext";
 import { ForbiddenPage } from "./pages/errors/ForbiddenPage";
 import { ClientPages } from "./pages/client/ClientPages";
+import { NavigationBar } from "./components/NavigationBar";
+import { DashboardLayout } from "./components/Layout";
 
 function App() {
   return (
@@ -31,15 +33,18 @@ function App() {
         >
           <AuthContextProvider>
             <ApiContextProvider>
+              <NavigationBar></NavigationBar>
               <Routes>
-                {AdminPages}
-                {ClientPages}
-                {AccountPages}
+                <Route element={<DashboardLayout></DashboardLayout>}>
+                  {AdminPages}
+                  {ClientPages}
+                  {AccountPages}
 
-                <Route path="errors">
-                  <Route path="unauthorized" element={<ForbiddenPage />} />
+                  <Route path="errors">
+                    <Route path="unauthorized" element={<ForbiddenPage />} />
+                  </Route>
+                  <Route path="*" element={<Navigate to="/accounts/login" />} />
                 </Route>
-                <Route path="*" element={<Navigate to="/accounts/login" />} />
               </Routes>
             </ApiContextProvider>
           </AuthContextProvider>

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { Outlet } from "react-router-dom";
+import { NavigationBar } from "./NavigationBar";
+
+export const DashboardLayout = () => {
+  return (
+    <Box>
+      <NavigationBar />
+
+      <Box
+        sx={{
+          display: "grid",
+        }}
+      >
+        {/* This is so that the sidebar stays here */}
+
+        <Box
+          sx={{
+            paddingTop: "80px",
+            minHeight: "100vh",
+            backgroundColor: "#f2f4f8",
+          }}
+        >
+          <Box
+            sx={{
+              padding: "3rem",
+              height: "100%",
+            }}
+          >
+            <Outlet />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import { AppBar, Box, IconButton, Typography } from "@mui/material";
+import { Logout } from "@mui/icons-material";
+import { useAuthContext } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+export const NavigationBar: React.FC = ({ ...props }) => {
+  const authContext = useAuthContext();
+  const navigate = useNavigate();
+
+  const onLogout = async () => {
+    await authContext.logout();
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      elevation={0}
+      {...props}
+      sx={({ zIndex }) => ({
+        zIndex: zIndex.drawer + 1,
+      })}
+    >
+      <Box
+        sx={{
+          p: "1.25rem 2rem",
+          display: "flex",
+          height: "80px",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        {!authContext.isAuthenticated && (
+          <Box sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                paddingRight: "32px",
+                cursor: "pointer",
+              }}
+              onClick={() => navigate("/accounts/login")}
+            >
+              Login
+            </Box>
+            <Box
+              sx={{
+                cursor: "pointer",
+              }}
+              onClick={() => navigate("/accounts/register")}
+            >
+              Register
+            </Box>
+          </Box>
+        )}
+        {authContext.isAuthenticated && (
+          <Box
+            sx={{
+              gap: "0.75rem",
+              display: "flex",
+              flexGrow: 1,
+              alignItems: "center",
+            }}
+          >
+            {authContext.isAdmin && (
+              <Box
+                sx={{
+                  cursor: "pointer",
+                  flexGrow: 1,
+                }}
+                onClick={() => navigate("/admin/orders")}
+              >
+                Orders
+              </Box>
+            )}
+            {!authContext.isAdmin && (
+              <Box
+                sx={{
+                  cursor: "pointer",
+                  flexGrow: 1,
+                }}
+                onClick={() => navigate("/client/issue")}
+              >
+                Issue
+              </Box>
+            )}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "flex-end",
+                flexDirection: "column",
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: 14,
+                }}
+              >
+                {authContext.userId}
+              </Typography>
+            </Box>
+
+            <IconButton onClick={onLogout} aria-label="logout" color="inherit">
+              <Logout fontSize="small" />
+            </IconButton>
+          </Box>
+        )}
+      </Box>
+    </AppBar>
+  );
+};
diff --git a/frontend/src/pages/client/pages/IssuePage.tsx b/frontend/src/pages/client/pages/IssuePage.tsx
@@ -8,11 +8,9 @@ export const IssuePage: React.FC = () => {
     <AuthenticatedOnly>
       <Box
         sx={{
-          marginTop: "auto",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          height: "100vh",
         }}
       >
         <InteractionsWidget></InteractionsWidget>