From 8ca62f68530509a82369885c9716024cdad49f7e Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 9 Aug 2024 11:46:43 -0400 Subject: [PATCH 01/11] set up breadcrumb nav --- .../Shared/layout/SideNav/BreadcrumbNav.tsx | 68 +++++++++++++++++++ .../{ => layout/SideNav}/SideNavBar.tsx | 17 ++--- 2 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx rename submit-web/src/components/Shared/{ => layout/SideNav}/SideNavBar.tsx (89%) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx new file mode 100644 index 00000000..7567948c --- /dev/null +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from "react"; +import { Box, Breadcrumbs, Link, Typography } from "@mui/material"; +import { Routes, RouteType, AuthenticatedRoutes } from "./SideNavElements"; +import { useRouter } from "@tanstack/react-router"; + +const findRouteTrace = (path: string, routes: RouteType[]): RouteType[] => { + let routeTrace: RouteType[] = []; + + for (const route of routes) { + if (path.startsWith(route.path)) { + routeTrace.push(route); + if (route.routes) { + const nestedRouteTrace = findRouteTrace(path, route.routes); + routeTrace = routeTrace.concat(nestedRouteTrace); + } + } + } + + return routeTrace; +}; + +const BreadcrumbNav: React.FC = () => { + const router = useRouter(); + const { pathname, search } = router.state.location; + + const [currentPath, setCurrentPath] = useState(window.location.pathname); + + // Get the full breadcrumb trace + const routeTrace = findRouteTrace(currentPath, [ + ...Routes, + ...AuthenticatedRoutes, + ]); + + useEffect(() => { + setCurrentPath(pathname); + }, [pathname, search]); + + return ( + + + {routeTrace.map((route, index) => + index < routeTrace.length - 1 ? ( + setCurrentPath(route.path)} + > + {route.name} + + ) : ( + + {route.name} + + ) + )} + + + ); +}; + +export default BreadcrumbNav; diff --git a/submit-web/src/components/Shared/SideNavBar.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx similarity index 89% rename from submit-web/src/components/Shared/SideNavBar.tsx rename to submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx index 66bb6307..c0b82d5f 100644 --- a/submit-web/src/components/Shared/SideNavBar.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx @@ -9,9 +9,9 @@ import { 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'; - +import { AuthenticatedRoutes, Routes } from "./SideNavElements"; +import { alpha } from "@mui/system"; +import BreadcrumbNav from "./BreadcrumbNav"; export default function SideNavBar() { const { isAuthenticated } = useAuth(); @@ -19,12 +19,13 @@ export default function SideNavBar() { let routeMenuItems = Routes; - if (isAuthenticated) { + if (!isAuthenticated) { routeMenuItems = routeMenuItems.concat(AuthenticatedRoutes); } return (
+ setCurrentPath(route.path)} style={{ color: theme.palette.primary.light, - fontWeight: "bold", + fontWeight: "bold", textDecoration: "none", width: "100%", }} @@ -48,9 +49,9 @@ export default function SideNavBar() { sx={{ pl: "2rem", backgroundColor: - currentPath === route.path - ? alpha(theme.palette.secondary.main, 0.1) - : alpha(theme.palette.primary.light, 0.1), + currentPath === route.path + ? alpha(theme.palette.secondary.main, 0.1) + : alpha(theme.palette.primary.light, 0.1), borderLeft: `4px solid ${theme.palette.primary.main}`, }} > From 319ab803f7aa0e0e4edea995328db81c2a05995f Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 9 Aug 2024 12:00:00 -0400 Subject: [PATCH 02/11] set up fetching through path segments --- .../Shared/layout/SideNav/BreadcrumbNav.tsx | 61 +++++-------------- 1 file changed, 15 insertions(+), 46 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx index 7567948c..fced174d 100644 --- a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -1,39 +1,11 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { Box, Breadcrumbs, Link, Typography } from "@mui/material"; -import { Routes, RouteType, AuthenticatedRoutes } from "./SideNavElements"; import { useRouter } from "@tanstack/react-router"; -const findRouteTrace = (path: string, routes: RouteType[]): RouteType[] => { - let routeTrace: RouteType[] = []; - - for (const route of routes) { - if (path.startsWith(route.path)) { - routeTrace.push(route); - if (route.routes) { - const nestedRouteTrace = findRouteTrace(path, route.routes); - routeTrace = routeTrace.concat(nestedRouteTrace); - } - } - } - - return routeTrace; -}; - const BreadcrumbNav: React.FC = () => { const router = useRouter(); - const { pathname, search } = router.state.location; - - const [currentPath, setCurrentPath] = useState(window.location.pathname); - - // Get the full breadcrumb trace - const routeTrace = findRouteTrace(currentPath, [ - ...Routes, - ...AuthenticatedRoutes, - ]); - - useEffect(() => { - setCurrentPath(pathname); - }, [pathname, search]); + const { pathname } = router.state.location; + const pathSegments = pathname.split("/").filter((segment) => segment !== ""); return ( { }} > - {routeTrace.map((route, index) => - index < routeTrace.length - 1 ? ( - setCurrentPath(route.path)} - > - {route.name} - - ) : ( - - {route.name} + {pathSegments.map((segment, index) => { + const url = `/${pathSegments.slice(0, index + 1).join("/")}`; + const isLast = index === pathSegments.length - 1; + return isLast ? ( + + {segment} - ) - )} + ) : ( + + {segment} + + ); + })} ); From 114455b3eb86490fdec99f5cde08e7f4f01cf94b Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 9 Aug 2024 12:03:40 -0400 Subject: [PATCH 03/11] set up breadcrumb nav with path --- .../Shared/layout/SideNav/BreadcrumbNav.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx index fced174d..c8b2405f 100644 --- a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -2,6 +2,14 @@ import React from "react"; import { Box, Breadcrumbs, Link, Typography } from "@mui/material"; import { useRouter } from "@tanstack/react-router"; +// Helper function to format segment names +const formatSegmentName = (segment: string) => { + return segment + .split("-") + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(" "); +}; + const BreadcrumbNav: React.FC = () => { const router = useRouter(); const { pathname } = router.state.location; @@ -19,13 +27,14 @@ const BreadcrumbNav: React.FC = () => { {pathSegments.map((segment, index) => { const url = `/${pathSegments.slice(0, index + 1).join("/")}`; const isLast = index === pathSegments.length - 1; + const path = formatSegmentName(segment); return isLast ? ( - - {segment} + + {path} ) : ( - - {segment} + + {path} ); })} From 0ec91036749161027360c00feb0701d9a7f15f7b Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 9 Aug 2024 12:33:31 -0400 Subject: [PATCH 04/11] remove auth changes --- submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx index c0b82d5f..9aa1c2f9 100644 --- a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx @@ -19,7 +19,7 @@ export default function SideNavBar() { let routeMenuItems = Routes; - if (!isAuthenticated) { + if (isAuthenticated) { routeMenuItems = routeMenuItems.concat(AuthenticatedRoutes); } From 3d607d06f70350b12b7f78757e4afd0bdf8555d3 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Mon, 12 Aug 2024 11:41:29 -0400 Subject: [PATCH 05/11] setup breadcrumb conditional render if on home --- .../Shared/layout/SideNav/BreadcrumbNav.tsx | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx index c8b2405f..529fe350 100644 --- a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -16,30 +16,34 @@ const BreadcrumbNav: React.FC = () => { const pathSegments = pathname.split("/").filter((segment) => segment !== ""); return ( - - - {pathSegments.map((segment, index) => { - const url = `/${pathSegments.slice(0, index + 1).join("/")}`; - const isLast = index === pathSegments.length - 1; - const path = formatSegmentName(segment); - return isLast ? ( - - {path} - - ) : ( - - {path} - - ); - })} - - + <> + {pathSegments.length > 0 && ( + + + {pathSegments.map((segment, index) => { + const url = `/${pathSegments.slice(0, index + 1).join("/")}`; + const isLast = index === pathSegments.length - 1; + const path = formatSegmentName(segment); + return isLast ? ( + + {path} + + ) : ( + + {path} + + ); + })} + + + )} + ); }; From 4d4919b5be683d133b4fb744d4acc55f784b3746 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Mon, 12 Aug 2024 11:42:03 -0400 Subject: [PATCH 06/11] setup boolean --- .../src/components/Shared/layout/SideNav/BreadcrumbNav.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx index 529fe350..cda2fbe9 100644 --- a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -14,10 +14,11 @@ const BreadcrumbNav: React.FC = () => { const router = useRouter(); const { pathname } = router.state.location; const pathSegments = pathname.split("/").filter((segment) => segment !== ""); + const isRoot = pathSegments.length === 0; return ( <> - {pathSegments.length > 0 && ( + {!isRoot && ( Date: Mon, 12 Aug 2024 19:31:46 -0400 Subject: [PATCH 07/11] set up tanstack for routes and meta property for segments --- .../Shared/layout/SideNav/BreadcrumbNav.tsx | 72 ++++++++++++------- .../src/routes/_authenticated/profile.tsx | 1 + .../routes/_authenticated/projects/index.tsx | 1 + .../src/routes/_authenticated/users/index.tsx | 3 +- submit-web/src/routes/aboutpage.lazy.tsx | 1 + submit-web/src/routes/eao-plans/$planId.tsx | 13 ++-- submit-web/src/routes/eao-plans/index.tsx | 1 + submit-web/src/routes/error.tsx | 1 + submit-web/src/routes/index.tsx | 14 ++-- submit-web/src/routes/newpage.lazy.tsx | 6 +- 10 files changed, 76 insertions(+), 37 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx index cda2fbe9..ef52112f 100644 --- a/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx @@ -1,20 +1,37 @@ import React from "react"; -import { Box, Breadcrumbs, Link, Typography } from "@mui/material"; -import { useRouter } from "@tanstack/react-router"; +import { Box, Breadcrumbs, Typography } from "@mui/material"; +import { Link, useRouter } from "@tanstack/react-router"; +import { theme } from "@/styles/theme"; -// Helper function to format segment names -const formatSegmentName = (segment: string) => { - return segment - .split("-") - .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) - .join(" "); +interface RouteSegment { + title: string; + path: string; +} + +const filterUniqueRoutes = (breadcrumbs: RouteSegment[]) => { + const seenPaths = new Set(); + return breadcrumbs.filter((segment) => { + const isUnique = !seenPaths.has(segment.path); + if (isUnique) { + seenPaths.add(segment.path); + } + return isUnique; + }); }; const BreadcrumbNav: React.FC = () => { const router = useRouter(); - const { pathname } = router.state.location; - const pathSegments = pathname.split("/").filter((segment) => segment !== ""); - const isRoot = pathSegments.length === 0; + const breadcrumbs = router.state.matches.map((match) => { + const { meta, pathname } = match; + if (meta) + return { + title: meta[0].title, + path: pathname, + }; + }); + + const uniqueBreadcrumbs = filterUniqueRoutes(breadcrumbs as RouteSegment[]); + const isRoot = uniqueBreadcrumbs.length === 1; return ( <> @@ -27,20 +44,25 @@ const BreadcrumbNav: React.FC = () => { }} > - {pathSegments.map((segment, index) => { - const url = `/${pathSegments.slice(0, index + 1).join("/")}`; - const isLast = index === pathSegments.length - 1; - const path = formatSegmentName(segment); - return isLast ? ( - - {path} - - ) : ( - - {path} - - ); - })} + {uniqueBreadcrumbs.map( + (segment: { title: string; path: string }, index: number) => { + const { title, path } = segment; + const isLast = index === uniqueBreadcrumbs.length - 1; + return isLast ? ( + + {title} + + ) : ( + + {title} + + ); + } + )} )} diff --git a/submit-web/src/routes/_authenticated/profile.tsx b/submit-web/src/routes/_authenticated/profile.tsx index 46ba9e73..e63e7a72 100644 --- a/submit-web/src/routes/_authenticated/profile.tsx +++ b/submit-web/src/routes/_authenticated/profile.tsx @@ -11,6 +11,7 @@ import { useAuth } from "react-oidc-context"; export const Route = createFileRoute("/_authenticated/profile")({ component: Profile, + meta: () => [{ title: "Profile" }], }); function Profile() { diff --git a/submit-web/src/routes/_authenticated/projects/index.tsx b/submit-web/src/routes/_authenticated/projects/index.tsx index b01e5ea1..1a69c05d 100644 --- a/submit-web/src/routes/_authenticated/projects/index.tsx +++ b/submit-web/src/routes/_authenticated/projects/index.tsx @@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"; export const Route = createFileRoute("/_authenticated/projects/")({ component: ProjectsPage, + meta: () => [{ title: "Projects" }], }); function ProjectsPage() { diff --git a/submit-web/src/routes/_authenticated/users/index.tsx b/submit-web/src/routes/_authenticated/users/index.tsx index 83c350fd..075a8e9c 100644 --- a/submit-web/src/routes/_authenticated/users/index.tsx +++ b/submit-web/src/routes/_authenticated/users/index.tsx @@ -25,6 +25,7 @@ import ConfirmationModal from "@/components/Shared/Modals/ConfirmationModal"; export const Route = createFileRoute("/_authenticated/users/")({ component: UsersPage, + meta: () => [{ title: "Users" }], }); function UsersPage() { @@ -78,7 +79,7 @@ function UsersPage() { title="Delete User" description="Are you sure you want to delete this user?" onConfirm={handleDeleteUser} - />, + /> ); }; diff --git a/submit-web/src/routes/aboutpage.lazy.tsx b/submit-web/src/routes/aboutpage.lazy.tsx index f0be0c5c..46db9f8f 100644 --- a/submit-web/src/routes/aboutpage.lazy.tsx +++ b/submit-web/src/routes/aboutpage.lazy.tsx @@ -3,6 +3,7 @@ import { AppConfig } from "@/utils/config"; export const Route = createLazyFileRoute("/aboutpage")({ component: About, + meta: () => [{ title: "About" }], }); function About() { diff --git a/submit-web/src/routes/eao-plans/$planId.tsx b/submit-web/src/routes/eao-plans/$planId.tsx index 71752a5a..19dc7918 100644 --- a/submit-web/src/routes/eao-plans/$planId.tsx +++ b/submit-web/src/routes/eao-plans/$planId.tsx @@ -1,15 +1,16 @@ -import { createFileRoute } from '@tanstack/react-router' +import { createFileRoute } from "@tanstack/react-router"; import { usePlanById } from "@/hooks/usePlans"; import { Plan } from "@/models/Plan"; import { Box, Button, Chip } from "@mui/material"; import { Link, useParams } from "@tanstack/react-router"; -export const Route = createFileRoute('/eao-plans/$planId')({ +export const Route = createFileRoute("/eao-plans/$planId")({ component: PlanPage, + meta: () => [{ title: "Plan" }], notFoundComponent: () => { - return

Plan not found!

- } -}) + return

Plan not found!

; + }, +}); function PlanPage() { const { planId: planIdParam } = useParams({ strict: false }); @@ -17,7 +18,7 @@ function PlanPage() { const { status, data, isError, error, isFetching, isLoading } = usePlanById(planId); - const plan: Plan = (data as Plan); + const plan: Plan = data as Plan; if (isLoading) { return

Loading...

; diff --git a/submit-web/src/routes/eao-plans/index.tsx b/submit-web/src/routes/eao-plans/index.tsx index c0e8f91f..d7a2123c 100644 --- a/submit-web/src/routes/eao-plans/index.tsx +++ b/submit-web/src/routes/eao-plans/index.tsx @@ -16,6 +16,7 @@ import { OpenInNew } from "@mui/icons-material"; export const Route = createFileRoute("/eao-plans/")({ component: PlanListPage, + meta: () => [{ title: "Plans" }], }); function PlanListPage() { diff --git a/submit-web/src/routes/error.tsx b/submit-web/src/routes/error.tsx index 22ca98e5..bac780d5 100644 --- a/submit-web/src/routes/error.tsx +++ b/submit-web/src/routes/error.tsx @@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"; export const Route = createFileRoute("/error")({ component: Error, + meta: () => [{ title: "Error" }], }); function Error() { diff --git a/submit-web/src/routes/index.tsx b/submit-web/src/routes/index.tsx index 96074899..7c8f3742 100644 --- a/submit-web/src/routes/index.tsx +++ b/submit-web/src/routes/index.tsx @@ -4,14 +4,21 @@ import { useNavigate } from "@tanstack/react-router"; export const Route = createFileRoute("/")({ component: Index, + meta: () => [{ title: "Home" }], }); function Index() { const navigate = useNavigate(); - + return ( <> - +

Environmental Assessments

British Columbia's environmental assessment process provides @@ -22,7 +29,7 @@ function Index() { @@ -30,4 +37,3 @@ function Index() { ); } - diff --git a/submit-web/src/routes/newpage.lazy.tsx b/submit-web/src/routes/newpage.lazy.tsx index 92c564c2..675cb485 100644 --- a/submit-web/src/routes/newpage.lazy.tsx +++ b/submit-web/src/routes/newpage.lazy.tsx @@ -2,13 +2,17 @@ import { createLazyFileRoute } from "@tanstack/react-router"; export const Route = createLazyFileRoute("/newpage")({ component: NewPage, + meta: () => [{ title: "New Page" }], }); function NewPage() { return ( <>

Hello! This is a lazy loaded page

-

This page wont be loaded initially, go back to Root, refresh the tab, and check the network tab

+

+ This page wont be loaded initially, go back to Root, refresh the + tab, and check the network tab +

); } From c52aba29d739db9078a205058f52e6b5da1bba0e Mon Sep 17 00:00:00 2001 From: David Nunez Date: Mon, 12 Aug 2024 20:06:18 -0400 Subject: [PATCH 08/11] fix conflicts and fix side nav styling --- .../Shared/layout/SideNav/SideNavBar.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx index 9aa1c2f9..6f18c4bc 100644 --- a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx +++ b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { Box, + Drawer, List, ListItem, ListItemButton, @@ -27,9 +28,14 @@ export default function SideNavBar() {
{routeMenuItems.map((route) => ( @@ -51,11 +57,15 @@ export default function SideNavBar() { backgroundColor: currentPath === route.path ? alpha(theme.palette.secondary.main, 0.1) - : alpha(theme.palette.primary.light, 0.1), + : theme.palette.primary.light, borderLeft: `4px solid ${theme.palette.primary.main}`, }} > - {route.name} + + {route.name} + From 85031d76d001346e9ef7334dd046f89fab7f36d5 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Mon, 12 Aug 2024 20:18:16 -0400 Subject: [PATCH 09/11] fix layout issues --- .../Shared/layout/SideNav/SideNavBar.tsx | 179 +++++++++--------- submit-web/src/hooks/common.ts | 8 + submit-web/src/routes/__root.tsx | 15 +- 3 files changed, 115 insertions(+), 87 deletions(-) create mode 100644 submit-web/src/hooks/common.ts diff --git a/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx b/submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx index 6f18c4bc..928279dd 100644 --- 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 (
- - - - {routeMenuItems.map((route) => ( - <> - - setCurrentPath(route.path)} - style={{ - color: theme.palette.primary.light, - fontWeight: "bold", - textDecoration: "none", - width: "100%", - }} - > - + + {routeMenuItems.map((route) => ( + <> + + setCurrentPath(route.path)} + style={{ + color: theme.palette.primary.light, + fontWeight: "bold", + textDecoration: "none", + width: "100%", }} > - - {route.name} - - - - - {route.routes && route.routes?.length > 0 && ( - - {route.routes?.map((subRoute) => ( - - setCurrentPath(subRoute.path)} + - + + + + {route.routes && route.routes?.length > 0 && ( + + {route.routes?.map((subRoute) => ( + + 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%", + }, }} > - - - {subRoute.name} - - - - - - ))} - - )} - - ))} - - + + + + {subRoute.name} + + + + + + ))} + + )} + + ))} + + + )}
); } diff --git a/submit-web/src/hooks/common.ts b/submit-web/src/hooks/common.ts new file mode 100644 index 00000000..9cf1a410 --- /dev/null +++ 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 index d62d9bbd..c9c76895 100644 --- 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()({ component: Layout, notFoundComponent: PageNotFound, + meta: () => [{ title: "Home" }], }); - function Layout() { + const isMobile = useIsMobile(); + const { isAuthenticated } = useAuth(); + return ( <> + + {}