@cullsin/lnc-menu 6.6.0 → 6.8.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,7 +74,6 @@ 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, selected: true, className: "selected" // DEBUG: Force selected class for all items
-                        , 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, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
 }
 export default SideMenu;

package/dist/src/sidemenu.scss

@@ -18,14 +18,33 @@
 .MuiList-root {
   .MuiListItem-root {
     // Apply capsule layout with gradient permanently for testing
-    padding: 10px 15px;
-    margin: 4px 12px;
-    border-radius: 20px;
+    padding: 8px 12px;
+    margin: 12px 6px 0px 6px;
+    border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
 
+    // Width based on menu open/closed state
+    &.menu-closed {
+      width: 52px;
+    }
+
+    &.menu-open {
+      width: 218px;
+    }
+
+    // Hover design - override the default background on hover
+    &:hover {
+      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+    }
+
+    // Default state (not hovered) - transparent background
+    &:not(:hover) {
+      background: transparent !important;
+    }
+
     // Normalize all icons (MUI icons and custom SVGs)
     .MuiListItemIcon-root {
       color: #1e2f97;
@@ -47,6 +66,15 @@
       }
     }
 
+    // Icon color changes on hover
+    &:not(:hover) .MuiListItemIcon-root {
+      svg,
+      .MuiSvgIcon-root {
+        fill: #fff;
+        color: #fff;
+      }
+    }
+
     // Add margin-right to icon only when text is visible
     .MuiListItemIcon-root + .MuiListItemText-root {
       margin-left: 8px;
@@ -62,6 +90,11 @@
         white-space: nowrap;
       }
     }
+
+    // Text color changes on hover
+    &:not(:hover) .MuiListItemText-root .MuiTypography-root {
+      color: #fff;
+    }
   }
 }
 

package/package.json

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