set up breadcrumb nav with path

bcgov · Aug 9, 2024 · 114455b · 114455b
1 parent 319ab80
commit 114455b
Showing 1 changed file with 13 additions and 4 deletions.
diff --git 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 ? (
-            <Typography key={segment} color="text.primary">
-              {segment}
+            <Typography key={path} color="text.primary">
+              {path}
             </Typography>
           ) : (
-            <Link key={segment} color="primary" href={url}>
-              {segment}
+            <Link key={path} color="primary" href={url}>
+              {path}
             </Link>
           );
         })}