From 3c5588927c0d3503a4ed925cae2842178c5fcec2 Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Tue, 29 Aug 2023 10:14:54 +0200
Subject: [PATCH] Improve navbar

---
 src/components/AppNavBar.tsx          | 9 ++++++++-
 src/components/AppNavBarLinkGroup.tsx | 8 ++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/AppNavBar.tsx b/src/components/AppNavBar.tsx
index e5c9290..59a166b 100644
--- 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
index 2cbe1af..ab34ae2 100644
--- 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}>