@cullsin/lnc-menu 6.7.0 → 6.9.0

package/dist/src/SideMenu.d.ts

@@ -10,6 +10,7 @@ interface SideMenuProps {
     navigate: NavigateFunction;
     location: Location;
     language?: Language;
+    module?: 'sample' | 'patient';
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, module }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -9,7 +9,7 @@ import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
 import { getTranslations } from "./translations";
-function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
+function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module }) {
     const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const { isDrawerOpen } = useDrawer();
     const t = React.useMemo(() => getTranslations(language), [language]);
@@ -25,8 +25,19 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
             path: `/sample/${language}/sample-listing`,
         },
     ], [SampleMgmtIcon, t, language]);
-    // Sync selection with current path using regex to extract first path segment
+    // Sync selection with module prop or current path
     React.useEffect(() => {
+        // If module prop is provided, use it to set the selection
+        if (module) {
+            if (module === 'sample') {
+                setSelectedMainMenu(t.menu.sampleManagement);
+            }
+            else if (module === 'patient') {
+                setSelectedMainMenu(t.menu.patientManagement);
+            }
+            return;
+        }
+        // Fall back to path-based detection
         const currentPath = location.pathname;
         const pathMatch = currentPath.match(/^\/([^/]+)/);
         if (pathMatch) {
@@ -44,7 +55,7 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
         else {
             setSelectedMainMenu(null);
         }
-    }, [location.pathname, t.menu.sampleManagement, t.menu.patientManagement]);
+    }, [module, location.pathname, t.menu.sampleManagement, t.menu.patientManagement]);
     const handleMenuClick = (item) => {
         setSelectedMainMenu(item.text);
         window.location.href = item.path;
@@ -63,6 +74,21 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
                     overflowY: "auto",
                     zIndex: 100,
                 },
-            }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
+            }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), sx: {
+                            "&.Mui-selected": {
+                                backgroundColor: "rgba(25, 118, 210, 0.08)",
+                                borderLeft: "3px solid #1976d2",
+                                "&:hover": {
+                                    backgroundColor: "rgba(25, 118, 210, 0.12)",
+                                },
+                            },
+                            "&.Mui-selected .MuiListItemIcon-root": {
+                                color: "#1976d2",
+                            },
+                            "&.Mui-selected .MuiListItemText-primary": {
+                                color: "#1976d2",
+                                fontWeight: 600,
+                            },
+                        }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
 }
 export default SideMenu;

package/dist/src/sidemenu.scss

@@ -18,8 +18,8 @@
 .MuiList-root {
   .MuiListItem-root {
     // Apply capsule layout with gradient permanently for testing
-    padding: 10px 16px;
-    margin: 12px 0px 0px 0px;
+    padding: 8px 12px;
+    margin: 12px 6px 0px 6px;
     border-radius: 15px;
     display: flex;
     align-items: center;
@@ -28,11 +28,11 @@
 
     // Width based on menu open/closed state
     &.menu-closed {
-      width: 58px;
+      width: 52px;
     }
 
     &.menu-open {
-      width: 200px;
+      width: 218px;
     }
 
     // Hover design - override the default background on hover

package/package.json

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