fix layout issues

bcgov · Aug 13, 2024 · 85031d7 · 85031d7
1 parent c52aba2
commit 85031d7
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 87 deletions.
diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx
@@ -13,10 +13,12 @@ import { useAuth } from "react-oidc-context";
 import { AuthenticatedRoutes, Routes } from "./SideNavElements";
 import { alpha } from "@mui/system";
 import BreadcrumbNav from "./BreadcrumbNav";
+import { useIsMobile } from "@/hooks/common";
 
 export default function SideNavBar() {
   const { isAuthenticated } = useAuth();
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const isMobile = useIsMobile();
 
   let routeMenuItems = Routes;
 
@@ -26,99 +28,106 @@ export default function SideNavBar() {
 
   return (
     <div>
-      <BreadcrumbNav />
-      <Box
-        sx={{
-          overflow: "auto",
-          borderRight: "1px solid #0000001A",
-          width: 240,
-          height: "calc(100vh - 88px)",
-          zIndex: 0,
-          position: "static",
-        }}
-      >
-        <List>
-          {routeMenuItems.map((route) => (
-            <>
-              <ListItem key={route.name}>
-                <Link
-                  to={route.path}
-                  onClick={() => setCurrentPath(route.path)}
-                  style={{
-                    color: theme.palette.primary.light,
-                    fontWeight: "bold",
-                    textDecoration: "none",
-                    width: "100%",
-                  }}
-                >
-                  <ListItemButton
-                    sx={{
-                      pl: "2rem",
-                      backgroundColor:
-                        currentPath === route.path
-                          ? alpha(theme.palette.secondary.main, 0.1)
-                          : theme.palette.primary.light,
-                      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      {!isMobile && (
+        <Box
+          sx={{
+            overflow: "auto",
+            borderRight: "1px solid #0000001A",
+            width: 240,
+            height: "calc(100vh - 88px)",
+            zIndex: 0,
+            position: "static",
+          }}
+        >
+          <List>
+            {routeMenuItems.map((route) => (
+              <>
+                <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: alpha(theme.palette.primary.main, 0.8) }}
+                    <ListItemButton
+                      sx={{
+                        pl: "2rem",
+                        backgroundColor:
+                          currentPath === route.path
+                            ? alpha(theme.palette.secondary.main, 0.1)
+                            : theme.palette.primary.light,
+                        borderLeft: `4px solid ${theme.palette.primary.main}`,
+                      }}
                     >
-                      {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)}
+                      <span
                         style={{
-                          textDecoration: "none",
-                          margin: 0,
-                          padding: 0,
-                          color: "inherit",
-                        }}
-                        activeProps={{
-                          style: {
-                            color: theme.palette.primary.main,
-                            fontWeight:
-                              currentPath === subRoute.path ? "bold" : "normal",
-                            width: "100%",
-                          },
+                          color: alpha(theme.palette.primary.main, 0.8),
                         }}
                       >
-                        <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}`,
+                        {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%",
+                            },
                           }}
                         >
-                          <ListItemText key={`sub-list-text-${subRoute?.name}`}>
-                            <span style={{ color: "inherit" }}>
-                              {subRoute.name}
-                            </span>
-                          </ListItemText>
-                        </ListItemButton>
-                      </Link>
-                    </ListItem>
-                  ))}
-                </List>
-              )}
-            </>
-          ))}
-        </List>
-      </Box>
+                          <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>
+      )}
     </div>
   );
 }
diff --git a/submit-web/src/hooks/common.ts b/submit-web/src/hooks/common.ts
@@ -0,0 +1,8 @@
+import { useMediaQuery, useTheme } from "@mui/material";
+
+export const useIsMobile = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return isMobile;
+};
diff --git a/submit-web/src/routes/__root.tsx b/submit-web/src/routes/__root.tsx
@@ -1,10 +1,13 @@
 import EAOAppBar from "@/components/Shared/EAOAppBar";
 import Footer from "@/components/Shared/layout/Footer";
 import PageNotFound from "@/components/Shared/PageNotFound";
+import SideNavBar from "@/components/Shared/layout/SideNav/SideNavBar";
 import { Box } from "@mui/system";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import { AuthContextProps } from "react-oidc-context";
+import { AuthContextProps, useAuth } from "react-oidc-context";
+import { useIsMobile } from "@/hooks/common";
+import BreadcrumbNav from "@/components/Shared/layout/SideNav/BreadcrumbNav";
 
 type RouterContext = {
   authentication: AuthContextProps;
@@ -13,15 +16,23 @@ type RouterContext = {
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: Layout,
   notFoundComponent: PageNotFound,
+  meta: () => [{ title: "Home" }],
 });
-
 function Layout() {
+  const isMobile = useIsMobile();
+  const { isAuthenticated } = useAuth();
+
   return (
     <>
       <EAOAppBar />
+      <BreadcrumbNav />
       <Box
         height={"calc(100vh - 88px)"}
+        width={isMobile ? "100%" : "calc(100vw)"}
+        flexDirection={"row"}
+        display={"flex"}
       >
+        {<SideNavBar />}
         <Outlet />
       </Box>
       <Footer />