[Navigation bar] Mark current paths as active

UniversityOfHelsinkiCS · Nov 11, 2024 · 9ef0d8b · 9ef0d8b
1 parent 9aa4150
commit 9ef0d8b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx b/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx
@@ -1,7 +1,7 @@
 import { ArrowDropDown } from '@mui/icons-material'
 import { Button, Menu, MenuItem } from '@mui/material'
 import { Fragment, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import { checkUserAccess, getFullStudyProgrammeRights, isDefaultServiceProvider } from '@/common'
 import { languageCenterViewEnabled } from '@/conf'
@@ -11,12 +11,13 @@ import { NavigationItem } from './navigationItems'
 export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   const { iamGroups, programmeRights, roles } = useGetAuthorizedUserQuery()
   const fullStudyProgrammeRights = getFullStudyProgrammeRights(programmeRights)
+  const location = useLocation()
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
   const { key, label, path, items } = item
 
-  const showSearch = (subItemKey: string) => {
-    if (subItemKey === 'class' || subItemKey === 'overview') {
+  const showItem = (subItemKey: string) => {
+    if (['class', 'completedCoursesSearch', 'overview'].includes(subItemKey)) {
       return true
     }
 
@@ -36,10 +37,6 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
       return true
     }
 
-    if (subItemKey === 'completedCoursesSearch') {
-      return true
-    }
-
     if (
       (checkUserAccess(['admin'], roles) || iamGroups.includes('grp-kielikeskus-esihenkilot')) &&
       subItemKey === 'languageCenterView' &&
@@ -62,35 +59,46 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
     return false
   }
 
-  const style = {
+  const isActivePath = (mainPath: string | undefined, subPaths: (string | undefined)[] = []) => {
+    const allPaths = [mainPath, ...subPaths].filter(Boolean)
+    return allPaths.some(currentPath => location.pathname.includes(currentPath!))
+  }
+
+  const subItemPaths = items ? items.map(subItem => subItem.path) : []
+  const isActive = isActivePath(path, subItemPaths)
+
+  const buttonStyle = {
     color: 'inherit',
+    fontWeight: isActive ? 'bold' : 'normal',
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
     '&:hover': {
       color: 'inherit',
       textDecoration: 'underline',
     },
-    whiteSpace: 'nowrap',
   }
 
   if (items) {
     return (
-      <Fragment key={`menu-item-drop-${key}`}>
+      <Fragment key={`men-item-drop-${key}`}>
         <Button
           data-cy={`navbar-${key}`}
           endIcon={<ArrowDropDown />}
           onClick={event => setAnchorEl(event.currentTarget)}
-          sx={style}
+          sx={buttonStyle}
         >
           {label}
         </Button>
         <Menu anchorEl={anchorEl} onClose={() => setAnchorEl(null)} open={Boolean(anchorEl)}>
           {items.map(
             subItem =>
-              showSearch(subItem.key) && (
+              showItem(subItem.key) && (
                 <MenuItem
                   component={Link}
                   data-cy={`navbar-${subItem.key}`}
-                  key={`menu-item-${subItem.path}`}
+                  key={subItem.path}
                   onClick={() => setAnchorEl(null)}
+                  selected={location.pathname.includes(subItem.path)}
                   to={subItem.path}
                 >
                   {subItem.label}
@@ -103,7 +111,7 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   }
 
   return (
-    <Button component={Link} data-cy={`navbar-${key}`} key={`menu-item-${path}`} sx={style} to={path}>
+    <Button component={Link} data-cy={`navbar-${key}`} sx={buttonStyle} to={path}>
       {label}
     </Button>
   )

diff --git a/services/frontend/src/components/material/NavigationBar/UserButton/index.tsx b/services/frontend/src/components/material/NavigationBar/UserButton/index.tsx
@@ -1,5 +1,5 @@
-import { Check, Language } from '@mui/icons-material'
-import { Avatar, Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
+import { AccountCircle, Check, Language } from '@mui/icons-material'
+import { Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
 import { useState } from 'react'
 
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
@@ -23,8 +23,8 @@ export const UserButton = () => {
 
   return (
     <Box sx={{ flexGrow: 0 }}>
-      <IconButton onClick={event => setAnchorEl(event.currentTarget)} sx={{ p: 0 }}>
-        <Avatar alt={username}>{username[0].toUpperCase()}</Avatar>
+      <IconButton color="inherit" onClick={event => setAnchorEl(event.currentTarget)} sx={{ p: 0 }}>
+        <AccountCircle />
       </IconButton>
       <Menu
         anchorEl={anchorEl}