Highlight active menu item (#236)

GeoWerkstatt · Jul 29, 2024 · 214cd62 · 214cd62
2 parents f677a82 + 2ad8390
commit 214cd62
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/src/Geopilot.Frontend/src/Header.tsx b/src/Geopilot.Frontend/src/Header.tsx
@@ -42,6 +42,13 @@ export const Header: FC<HeaderProps> = ({ clientSettings, hasDrawerToggle, handl
     setUserMenuOpen(newOpen);
   };
 
+  const isActive = (path: string) => {
+    if (path === "") {
+      return location.pathname === "/";
+    }
+    return location.pathname.split("/").includes(path);
+  };
+
   return (
     <>
       <AppBar>
@@ -119,6 +126,7 @@ export const Header: FC<HeaderProps> = ({ clientSettings, hasDrawerToggle, handl
             <List>
               <ListItem key={t("delivery").toUpperCase()} disablePadding>
                 <ListItemButton
+                  selected={isActive("")}
                   onClick={() => {
                     navigate("/");
                   }}>
@@ -128,6 +136,7 @@ export const Header: FC<HeaderProps> = ({ clientSettings, hasDrawerToggle, handl
               <AdminTemplate>
                 <ListItem key={t("administration").toUpperCase()} disablePadding>
                   <ListItemButton
+                    selected={isActive("admin")}
                     onClick={() => {
                       navigate("/admin");
                     }}>
@@ -136,6 +145,7 @@ export const Header: FC<HeaderProps> = ({ clientSettings, hasDrawerToggle, handl
                 </ListItem>
                 <ListItem key={t("stacBrowser").toUpperCase()} disablePadding>
                   <ListItemButton
+                    selected={isActive("browser")}
                     onClick={() => {
                       window.open("/browser", "_blank");
                     }}>

diff --git a/src/Geopilot.Frontend/src/pages/admin/Admin.tsx b/src/Geopilot.Frontend/src/pages/admin/Admin.tsx
@@ -37,6 +37,13 @@ export const Admin: FC<AdminProps> = ({ clientSettings }) => {
     }
   };
 
+  const isActive = (path: string) => {
+    if (path === "") {
+      return location.pathname === "/";
+    }
+    return location.pathname.split("/").includes(path);
+  };
+
   const drawerWidth = "250px";
   const drawerContent = (
     <div>
@@ -45,6 +52,7 @@ export const Admin: FC<AdminProps> = ({ clientSettings }) => {
         <List>
           <ListItem key={"deliveryOverview"} disablePadding>
             <ListItemButton
+              selected={isActive("delivery-overview")}
               onClick={() => {
                 navigateTo("delivery-overview");
               }}>
@@ -57,6 +65,7 @@ export const Admin: FC<AdminProps> = ({ clientSettings }) => {
           {["users", "mandates", "organisations"].map(link => (
             <ListItem key={link} disablePadding>
               <ListItemButton
+                selected={isActive(link)}
                 onClick={() => {
                   navigateTo(link);
                 }}>