From 46b17cb97171b5b4a910c2ad0726b0d894932fd9 Mon Sep 17 00:00:00 2001
From: ashmeetsmonga <ashmeetsmonga@gmail.com>
Date: Fri, 18 Aug 2023 19:14:34 +0530
Subject: [PATCH 1/2] fix: menu not highlighted while navigating via url fixed

---
 frontend/src/app/Navigation/index.jsx | 34 +++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/Navigation/index.jsx b/frontend/src/app/Navigation/index.jsx
index a8eef05a0..ce5e8333d 100644
--- a/frontend/src/app/Navigation/index.jsx
+++ b/frontend/src/app/Navigation/index.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Button, Drawer, Layout, Menu } from 'antd';
 
 import { useAppContext } from '@/context/appContext';
@@ -34,10 +34,17 @@ export default function Navigation() {
 }
 
 function Sidebar({ collapsible }) {
+  let location = useLocation();
+
   const { state: stateApp, appContextAction } = useAppContext();
   const { isNavMenuClose } = stateApp;
   const { navMenu } = appContextAction;
   const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
+  const [currentPath, setCurrentPath] = useState(location.pathname);
+
+  useEffect(() => {
+    if (location) if (currentPath !== location.pathname) setCurrentPath(location.pathname);
+  }, [location, currentPath]);
 
   useEffect(() => {
     if (isNavMenuClose) {
@@ -56,7 +63,6 @@ function Sidebar({ collapsible }) {
 
   return (
     <>
-
       <Sider
         collapsible={collapsible}
         collapsed={collapsible ? isNavMenuClose : collapsible}
@@ -74,47 +80,45 @@ function Sidebar({ collapsible }) {
             />
           )}
         </div>
-
-
-        <Menu mode="inline">
-          <Menu.Item key={'Dashboard'} icon={<DashboardOutlined />}>
+        <Menu mode="inline" selectedKeys={[currentPath]}>
+          <Menu.Item key={'/'} icon={<DashboardOutlined />}>
             <Link to={'/'} />
             Dashboard
           </Menu.Item>
-          <Menu.Item key={'Customer'} icon={<CustomerServiceOutlined />}>
+          <Menu.Item key={'/customer'} icon={<CustomerServiceOutlined />}>
             <Link to={'/customer'} />
             Customer
           </Menu.Item>
-          <Menu.Item key={'Invoice'} icon={<FileTextOutlined />}>
+          <Menu.Item key={'/invoice'} icon={<FileTextOutlined />}>
             <Link to={'/invoice'} />
             Invoice
           </Menu.Item>
-          <Menu.Item key={'Quote'} icon={<FileSyncOutlined />}>
+          <Menu.Item key={'/quote'} icon={<FileSyncOutlined />}>
             <Link to={'/quote'} />
             Quote
           </Menu.Item>
-          <Menu.Item key={'PaymentInvoice'} icon={<CreditCardOutlined />}>
+          <Menu.Item key={'/payment/invoice'} icon={<CreditCardOutlined />}>
             <Link to={'/payment/invoice'} />
             Payment Invoice
           </Menu.Item>
-          <Menu.Item key={'Employee'} icon={<UserOutlined />}>
+          <Menu.Item key={'/employee'} icon={<UserOutlined />}>
             <Link to={'/employee'} />
             Employee
           </Menu.Item>
-          <Menu.Item key={'Admin'} icon={<TeamOutlined />}>
+          <Menu.Item key={'/admin'} icon={<TeamOutlined />}>
             <Link to={'/admin'} />
             Admin
           </Menu.Item>
           <SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
-            <Menu.Item key={'SettingsPage'}>
+            <Menu.Item key={'/settings'}>
               <Link to={'/settings'} />
               General Settings
             </Menu.Item>
-            <Menu.Item key={'PaymentMode'}>
+            <Menu.Item key={'/payment/mode'}>
               <Link to={'/payment/mode'} />
               Payment Mode
             </Menu.Item>
-            <Menu.Item key={'Role'}>
+            <Menu.Item key={'/role'}>
               <Link to={'/role'} />
               Role
             </Menu.Item>

From 2262ca191b1ee42cb033bd849de4b35d88768f2d Mon Sep 17 00:00:00 2001
From: ashmeetsmonga <ashmeetsmonga@gmail.com>
Date: Mon, 21 Aug 2023 15:42:11 +0530
Subject: [PATCH 2/2] fix:added a constant array for sidebar menu and submenu
 items in navigation

---
 frontend/src/app/Navigation/index.jsx | 68 +++++++++++----------------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/Navigation/index.jsx b/frontend/src/app/Navigation/index.jsx
index ce5e8333d..19f48388a 100644
--- a/frontend/src/app/Navigation/index.jsx
+++ b/frontend/src/app/Navigation/index.jsx
@@ -19,6 +19,22 @@ import {
   MenuOutlined,
 } from '@ant-design/icons';
 
+const SIDEBAR_MENU = [
+  { key: '/', icon: <DashboardOutlined />, title: 'Dashboard' },
+  { key: '/customer', icon: <CustomerServiceOutlined />, title: 'Customer' },
+  { key: '/invoice', icon: <FileTextOutlined />, title: 'Invoice' },
+  { key: '/quote', icon: <FileSyncOutlined />, title: 'Quote' },
+  { key: '/payment/invoice', icon: <CreditCardOutlined />, title: 'Payment Invoice' },
+  { key: '/employee', icon: <UserOutlined />, title: 'Employee' },
+  { key: '/admin', icon: <TeamOutlined />, title: 'Admin' },
+];
+
+const SETTINGS_SUBMENU = [
+  { key: '/settings', title: 'General Settings' },
+  { key: '/payment/mode', title: 'Payment Mode' },
+  { key: '/role', title: 'Role' },
+];
+
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
@@ -81,47 +97,19 @@ function Sidebar({ collapsible }) {
           )}
         </div>
         <Menu mode="inline" selectedKeys={[currentPath]}>
-          <Menu.Item key={'/'} icon={<DashboardOutlined />}>
-            <Link to={'/'} />
-            Dashboard
-          </Menu.Item>
-          <Menu.Item key={'/customer'} icon={<CustomerServiceOutlined />}>
-            <Link to={'/customer'} />
-            Customer
-          </Menu.Item>
-          <Menu.Item key={'/invoice'} icon={<FileTextOutlined />}>
-            <Link to={'/invoice'} />
-            Invoice
-          </Menu.Item>
-          <Menu.Item key={'/quote'} icon={<FileSyncOutlined />}>
-            <Link to={'/quote'} />
-            Quote
-          </Menu.Item>
-          <Menu.Item key={'/payment/invoice'} icon={<CreditCardOutlined />}>
-            <Link to={'/payment/invoice'} />
-            Payment Invoice
-          </Menu.Item>
-          <Menu.Item key={'/employee'} icon={<UserOutlined />}>
-            <Link to={'/employee'} />
-            Employee
-          </Menu.Item>
-          <Menu.Item key={'/admin'} icon={<TeamOutlined />}>
-            <Link to={'/admin'} />
-            Admin
-          </Menu.Item>
-          <SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
-            <Menu.Item key={'/settings'}>
-              <Link to={'/settings'} />
-              General Settings
-            </Menu.Item>
-            <Menu.Item key={'/payment/mode'}>
-              <Link to={'/payment/mode'} />
-              Payment Mode
-            </Menu.Item>
-            <Menu.Item key={'/role'}>
-              <Link to={'/role'} />
-              Role
+          {SIDEBAR_MENU.map((menuItem) => (
+            <Menu.Item key={menuItem.key} icon={menuItem.icon}>
+              <Link to={menuItem.key} />
+              {menuItem.title}
             </Menu.Item>
+          ))}
+          <SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
+            {SETTINGS_SUBMENU.map((menuItem) => (
+              <Menu.Item key={menuItem.key}>
+                <Link to={menuItem.key} />
+                {menuItem.title}
+              </Menu.Item>
+            ))}
           </SubMenu>
         </Menu>
       </Sider>