@cullsin/lnc-menu 3.0.20 → 3.0.22

package/dist/src/SideMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { NavigateFunction } from "react-router-dom";
+import { Location, NavigateFunction } from "react-router-dom";
 interface SideMenuProps {
     useDrawer: () => {
         isDrawerOpen: boolean;
@@ -7,6 +7,7 @@ interface SideMenuProps {
     };
     SampleMgmtIcon: React.ElementType;
     navigate: NavigateFunction;
+    location: Location;
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, SampleMgmtIcon, location }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
 import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
 import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
-import GroupAddOutlinedIcon from '@mui/icons-material/GroupAddOutlined';
+import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
@@ -14,14 +14,12 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
-import { useLocation } from "react-router-dom";
-function SideMenu({ useDrawer, SampleMgmtIcon }) {
+function SideMenu({ useDrawer, SampleMgmtIcon, location }) {
     const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
     const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
     const { isDrawerOpen, toggleDrawer } = useDrawer();
     const [anchorEl, setAnchorEl] = React.useState(null);
-    const location = useLocation();
     const menuItems = React.useMemo(() => [
         {
             text: "Home",
@@ -54,24 +52,29 @@ function SideMenu({ useDrawer, SampleMgmtIcon }) {
             path: "/carrier-duo-trio/",
         },
     ], [SampleMgmtIcon]);
-    // Initialize selected menu based on current URL
+    // 🔁 Sync selection with current path
     React.useEffect(() => {
         const currentPath = location.pathname;
-        menuItems.forEach((mainItem) => {
+        for (const mainItem of menuItems) {
             if (mainItem.subMenu) {
-                const match = mainItem.subMenu.find((sub) => sub.path === currentPath);
-                if (match) {
-                    setSelectedMainMenu(mainItem.text);
-                    setSelectedSubMenuPath(match.path);
+                for (const sub of mainItem.subMenu) {
+                    if (currentPath.startsWith(sub.path)) {
+                        setSelectedMainMenu(mainItem.text);
+                        setSelectedSubMenuPath(sub.path);
+                        return;
+                    }
                 }
             }
-            else if (mainItem.path === currentPath) {
+            else if (mainItem.path && currentPath.startsWith(mainItem.path)) {
                 setSelectedMainMenu(mainItem.text);
                 setSelectedSubMenuPath(null);
+                return;
             }
-        });
-        handleMenuClose(); // Close open menu if path changes
-    }, [location.pathname]);
+        }
+        setSelectedMainMenu(null);
+        setSelectedSubMenuPath(null);
+        handleMenuClose();
+    }, [location.pathname, menuItems]);
     const handleMenuOpen = (event, index) => {
         setAnchorEl(event.currentTarget);
         setOpenMenuIndex(index);
@@ -86,7 +89,7 @@ function SideMenu({ useDrawer, SampleMgmtIcon }) {
         handleMenuClose();
         if (isDrawerOpen)
             toggleDrawer();
-        window.location.href = path; // Maintain microfrontend transition
+        window.location.href = path;
     };
     return (_jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(AppBar, { sx: { position: "fixed", top: 0 } }), _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
                     width: isDrawerOpen ? 230 : 64,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cullsin/lnc-menu",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",