dynamic active sidebar

src/layout/LayoutMenu.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { Menu, Typography, Image } from 'antd';
 import { getSessionData } from '../components/Global/Formatter';
 import {
@@ -145,7 +145,65 @@ const allItems = [
 ];
 
 const LayoutMenu = () => {
+    const location = useLocation();
     const [stateOpenKeys, setStateOpenKeys] = useState(['home']);
+    const [selectedKeys, setSelectedKeys] = useState(['home']);
+
+    // Function to get menu key from current path
+    const getMenuKeyFromPath = (pathname) => {
+        // Remove leading slash and split path
+        const pathParts = pathname.replace(/^\//, '').split('/');
+
+        // Handle different route patterns
+        if (pathname === '/dashboard/home') return 'home';
+        if (pathname === '/user') return 'user';
+        if (pathname === '/role') return 'role';
+        if (pathname === '/notification') return 'notification';
+        if (pathname === '/event-alarm') return 'event-alarm';
+
+        // Handle master routes
+        if (pathname.startsWith('/master/')) {
+            const subPath = pathParts[1];
+            return `master-${subPath}`;
+        }
+
+        // Handle history routes
+        if (pathname.startsWith('/history/')) {
+            const subPath = pathParts[1];
+            return `history-${subPath}`;
+        }
+
+        // Handle shift management routes
+        if (pathname.startsWith('/shift-management/')) {
+            const subPath = pathParts[1];
+            return `shift-${subPath}`;
+        }
+
+        return 'home'; // default
+    };
+
+    // Function to get parent key from menu key
+    const getParentKey = (key) => {
+        if (key.startsWith('master-')) return 'master';
+        if (key.startsWith('history-')) return 'history';
+        if (key.startsWith('shift-')) return 'shift-management';
+        return null;
+    };
+
+    // Update selected and open keys when route changes
+    useEffect(() => {
+        const currentKey = getMenuKeyFromPath(location.pathname);
+        setSelectedKeys([currentKey]);
+
+        const parentKey = getParentKey(currentKey);
+
+        // If current menu has parent, open it. Otherwise, close all dropdowns
+        if (parentKey) {
+            setStateOpenKeys([parentKey]);
+        } else {
+            setStateOpenKeys([]);
+        }
+    }, [location.pathname]);
 
     const getLevelKeys = (items1) => {
         const key = {};
@@ -213,7 +271,7 @@ const LayoutMenu = () => {
         <Menu
             mode="inline"
             items={items}
-            defaultSelectedKeys={['home']}
+            selectedKeys={selectedKeys}
             openKeys={stateOpenKeys}
             onOpenChange={onOpenChange}
             style={{