From d0ee2b7bd5c4c1aecfb5588fccf1bb3edef89572 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 3 Sep 2024 17:23:03 +0200
Subject: [PATCH] feat(wallet): bottom navbar does not update based on route
 (#2204)

Co-authored-by: cpl121 <100352899+cpl121@users.noreply.github.com>
---
 .../ui/app/components/navigation/index.tsx    | 51 ++++++++-----------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/navigation/index.tsx b/apps/wallet/src/ui/app/components/navigation/index.tsx
index 25cc97a1dad..04a8230e317 100644
--- a/apps/wallet/src/ui/app/components/navigation/index.tsx
+++ b/apps/wallet/src/ui/app/components/navigation/index.tsx
@@ -2,61 +2,54 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useActiveAccount } from '../../hooks/useActiveAccount';
 import { Navbar, type NavbarItemWithId } from '@iota/apps-ui-kit';
 import { Activity, Apps, Assets, Home } from '@iota/ui-icons';
 
+type NavbarItemWithPath = NavbarItemWithId & {
+    path: string;
+};
+
 export function Navigation() {
     const activeAccount = useActiveAccount();
     const navigate = useNavigate();
+    const location = useLocation();
 
-    function onHomeClick() {
-        navigate('/tokens');
-    }
-
-    function onAssetsClick() {
-        navigate('/nfts');
-    }
-
-    function onActivityClick() {
-        navigate('/transactions');
-    }
-
-    function onAppsClick() {
-        navigate('/apps');
-    }
-
-    const NAVBAR_ITEMS: NavbarItemWithId[] = [
-        { id: 'home', icon: <Home />, onClick: onHomeClick },
+    const NAVBAR_ITEMS: NavbarItemWithPath[] = [
+        { id: 'home', icon: <Home />, path: '/tokens' },
         {
             id: 'assets',
             icon: <Assets />,
-            onClick: onAssetsClick,
             isDisabled: activeAccount?.isLocked,
+            path: '/nfts',
         },
         {
             id: 'apps',
             icon: <Apps />,
-            onClick: onAppsClick,
             isDisabled: activeAccount?.isLocked,
+            path: '/apps',
         },
         {
             id: 'activity',
             icon: <Activity />,
-            onClick: onActivityClick,
             isDisabled: activeAccount?.isLocked,
+            path: '/transactions',
         },
     ];
-    const [activeRouteId, setActiveRouteId] = useState<string>(NAVBAR_ITEMS[0].id);
+
+    const activeId = NAVBAR_ITEMS.find((item) => location.pathname.startsWith(item.path))?.id || '';
+
+    function handleItemClick(id: string) {
+        const item = NAVBAR_ITEMS.find((item) => item.id === id);
+        if (item && !item.isDisabled) {
+            navigate(item.path);
+        }
+    }
+
     return (
         <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-white">
-            <Navbar
-                items={NAVBAR_ITEMS}
-                activeId={activeRouteId}
-                onClickItem={(id) => setActiveRouteId(id)}
-            />
+            <Navbar items={NAVBAR_ITEMS} activeId={activeId} onClickItem={handleItemClick} />
         </div>
     );
 }