Improve navbar

alephium · Aug 29, 2023 · 3c55889 · 3c55889
1 parent ebeb8b4
commit 3c55889
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/AppNavBar.tsx b/src/components/AppNavBar.tsx
@@ -7,7 +7,8 @@ import {
   IconFileAnalytics,
 } from '@tabler/icons-react'
 import { LinksGroup } from './AppNavBarLinkGroup'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 const mockdata = [
   {
@@ -110,7 +111,13 @@ const useStyles = createStyles((theme) => ({
 
 export function NavbarNested() {
   const { classes } = useStyles()
+  const location = useLocation()
   const [active, setActive] = useState<string>(mockdata[0].label)
+
+  useEffect(() => {
+    setActive(location.pathname)
+  }, [location.pathname])
+
   const links = mockdata.map((item) => (
     <LinksGroup
       {...item}

diff --git a/src/components/AppNavBarLinkGroup.tsx b/src/components/AppNavBarLinkGroup.tsx
@@ -106,12 +106,12 @@ export function LinksGroup({
     <Text
       component={Link}
       className={cx(classes.link, {
-        [classes.linkActive]: label + link.label === active,
+        [classes.linkActive]: link.link === active,
       })}
       to={link.link}
       key={link.label}
       ta="left"
-      onClick={() => setActive(label + link.label)}
+      onClick={() => setActive(link.link)}
     >
       {link.label}
     </Text>
@@ -123,14 +123,14 @@ export function LinksGroup({
         onClick={() => {
           setOpened((o) => !o)
           if (!hasLinks) {
-            setActive(label)
+            setActive(groupLink ?? '')
           }
           if (groupLink) {
             navigate(groupLink)
           }
         }}
         className={cx(classes.control, {
-          [classes.linkActive]: !hasLinks && label === active,
+          [classes.linkActive]: !hasLinks && groupLink === active,
         })}
       >
         <Group position="apart" spacing={0}>