Merge pull request #19 from bcgov/two-level-link-setup

Two level link setup - Jira EPIC SYSTEM 205
bcgov · Jul 31, 2024 · 895e7aa · 895e7aa
2 parents 44b578e + 7a83f27
commit 895e7aa
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 58 deletions.
diff --git a/submit-web/src/components/Shared/SideNavBar.tsx b/submit-web/src/components/Shared/SideNavBar.tsx
@@ -1,45 +1,26 @@
 import { useState } from "react";
-import { Box, List, ListItem, ListItemButton } from "@mui/material";
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+} from "@mui/material";
 import { Link } from "@tanstack/react-router";
 import { theme } from "@/styles/theme";
 import { useAuth } from "react-oidc-context";
+import { AuthenticatedRoutes, Routes } from "./layout/SideNav/SideNavElements";
+import { alpha } from '@mui/system';
+
 
 export default function SideNavBar() {
   const { isAuthenticated } = useAuth();
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
 
-  let routeMenuItems = [
-    {
-      routeName: "Root",
-      path: "/",
-    },
-    {
-      routeName: "About",
-      path: "/aboutpage",
-    },
-    {
-      routeName: "Lazy Loaded Page",
-      path: "/newpage",
-    },
-    {
-      routeName: "Plans",
-      path: "/eao-plans",
-    },
-    {
-      routeName: "Users",
-      path: "/users",
-    },
-  ];
-
-  const authenticatedRouteMenuItems = [
-    {
-      routeName: "Profile",
-      path: "/profile",
-    },
-  ];
+  let routeMenuItems = Routes;
 
-  if(isAuthenticated) {
-    routeMenuItems = routeMenuItems.concat(authenticatedRouteMenuItems);
+  if (isAuthenticated) {
+    routeMenuItems = routeMenuItems.concat(AuthenticatedRoutes);
   }
 
   return (
@@ -51,34 +32,79 @@ export default function SideNavBar() {
       >
         <List>
           {routeMenuItems.map((route) => (
-            <ListItem key={route.routeName}>
-              <Link
-                to={route.path}
-                onClick={() => setCurrentPath(route.path)}
-                activeProps={{style: {
-                  color: theme.palette.primary.main,
-                  fontWeight: currentPath === route.path ? "bold" : "normal",
-                  textDecoration: "none",
-                  width: "100%",
-                }}}
-              >
-                <ListItemButton
-                  sx={{
-                    pl: "2rem",
-                    backgroundColor:
-                      currentPath === route.path
-                        ? "rgba(0, 0, 0, 0.1)"
-                        : "transparent",
-                    borderLeft:
-                      currentPath === route.path
-                        ? `4px solid ${theme.palette.primary.main}`
-                        : "none",
+            <>
+              <ListItem key={route.name}>
+                <Link
+                  to={route.path}
+                  onClick={() => setCurrentPath(route.path)}
+                  style={{
+                    color: theme.palette.primary.light,
+                    fontWeight:  "bold",
+                    textDecoration: "none",
+                    width: "100%",
                   }}
                 >
-                  <span style={{ color: "inherit" }}>{route.routeName}</span>
-                </ListItemButton>
-              </Link>
-            </ListItem>
+                  <ListItemButton
+                    sx={{
+                      pl: "2rem",
+                      backgroundColor:
+                      currentPath === route.path
+                        ? alpha(theme.palette.secondary.main, 0.1)
+                        : alpha(theme.palette.primary.light, 0.1),
+                      borderLeft: `4px solid ${theme.palette.primary.main}`,
+                    }}
+                  >
+                    <span style={{ color: "inherit" }}>{route.name}</span>
+                  </ListItemButton>
+                </Link>
+              </ListItem>
+              {route.routes && route.routes?.length > 0 && (
+                <List disablePadding key={`list-${route.name}`}>
+                  {route.routes?.map((subRoute) => (
+                    <ListItem
+                      key={`sub-list-${subRoute?.name}`}
+                      sx={{ margin: 0, padding: 0 }}
+                    >
+                      <Link
+                        to={subRoute.path}
+                        onClick={() => setCurrentPath(subRoute.path)}
+                        style={{
+                          textDecoration: "none",
+                          margin: 0,
+                          padding: 0,
+                          color: "inherit",
+                        }}
+                        activeProps={{
+                          style: {
+                            color: theme.palette.primary.main,
+                            fontWeight:
+                              currentPath === subRoute.path ? "bold" : "normal",
+                            width: "100%",
+                          },
+                        }}
+                      >
+                        <ListItemButton
+                          key={`sub-list-button-${subRoute?.name}`}
+                          sx={{
+                            marginLeft: "40px",
+                            borderLeft:
+                              currentPath === subRoute.path
+                                ? `4px solid ${theme.palette.primary.main}`
+                                : `1px solid ${theme.palette.divider}`,
+                          }}
+                        >
+                          <ListItemText key={`sub-list-text-${subRoute?.name}`}>
+                            <span style={{ color: "inherit" }}>
+                              {subRoute.name}
+                            </span>
+                          </ListItemText>
+                        </ListItemButton>
+                      </Link>
+                    </ListItem>
+                  ))}
+                </List>
+              )}
+            </>
           ))}
         </List>
       </Box>

diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx
@@ -0,0 +1,36 @@
+export const Routes: RouteType[] = [
+  {
+    name: "Root",
+    path: "/",
+  },
+  {
+    name: "About",
+    path: "/aboutpage",
+  },
+  {
+    name: "Lazy Loaded Page",
+    path: "/newpage",
+  },
+  {
+    name: "Plans",
+    path: "/eao-plans",
+  },
+  {
+    name: "Users",
+    path: "/users",
+  },
+];
+
+export const AuthenticatedRoutes: RouteType[] = [
+  {
+    name: "Profile",
+    path: "/profile",
+  },
+];
+
+export interface RouteType {
+  name: string;
+  path: string;
+  group?: string;
+  routes?: RouteType[];
+}