[Navigation bar] Make the tab clickable

The tab was technically clickable but would not trigger the link. The user would have to hit the text to navigate which was not ideal
UniversityOfHelsinkiCS · Dec 2, 2024 · 4c1e116 · 4c1e116
1 parent 132a21e
commit 4c1e116
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx b/services/frontend/src/components/material/NavigationBar/NavigationButton.tsx
@@ -14,7 +14,7 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   const location = useLocation()
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
-  const { key, label, path, items } = item
+  const { key, label, items } = item
 
   const showItem = (subItemKey: string) => {
     if (['class', 'completedCoursesSearch', 'overview'].includes(subItemKey)) {
@@ -93,14 +93,7 @@ export const NavigationButton = ({ item }: { item: NavigationItem }) => {
   }
 
   return (
-    <Typography
-      color="inherit"
-      component={Link}
-      data-cy={`nav-bar-button-${key}`}
-      sx={{ '&:hover': { color: 'inherit' } }}
-      to={path}
-      variant="button"
-    >
+    <Typography color="inherit" data-cy={`nav-bar-button-${key}`} variant="button">
       {label}
     </Typography>
   )

diff --git a/services/frontend/src/components/material/NavigationBar/index.tsx b/services/frontend/src/components/material/NavigationBar/index.tsx
@@ -1,6 +1,6 @@
 import { AppBar, Box, Container, Tab, Tabs, Toolbar } from '@mui/material'
 import { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import { checkUserAccess, getFullStudyProgrammeRights, isDefaultServiceProvider } from '@/common'
 import { hasFullAccessToTeacherData } from '@/components/Teachers/util'
@@ -92,7 +92,13 @@ export const NavigationBar = () => {
             {!isLoading && (
               <Tabs textColor="inherit" value={activeTab} variant="scrollable">
                 {Object.entries(visibleNavigationItems).map(([key, item]) => (
-                  <Tab key={key} label={<NavigationButton item={item} />} />
+                  <Tab
+                    component={Link}
+                    key={key}
+                    label={<NavigationButton item={item} />}
+                    sx={{ '&:hover': { color: 'inherit' } }}
+                    to={item.path}
+                  />
                 ))}
               </Tabs>
             )}