@cullsin/lnc-menu 6.5.0 → 6.7.0

package/dist/src/SideMenu.js

@@ -63,6 +63,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: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", 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

@@ -17,19 +17,39 @@
 
 .MuiList-root {
   .MuiListItem-root {
-    // Apply capsule layout permanently to prevent layout shifts
-    padding: 10px 15px;
-    margin: 4px 12px;
-    border-radius: 20px;
+    // Apply capsule layout with gradient permanently for testing
+    padding: 10px 16px;
+    margin: 12px 0px 0px 0px;
+    border-radius: 15px;
     display: flex;
     align-items: center;
-    transition: background 0.2s ease;
+    justify-content: center;
+    background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+
+    // Width based on menu open/closed state
+    &.menu-closed {
+      width: 58px;
+    }
+
+    &.menu-open {
+      width: 200px;
+    }
+
+    // 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: #fff;
+      color: #1e2f97;
       min-width: auto;
-      margin-right: 8px;
+      margin-right: 0;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -41,62 +61,39 @@
         width: 24px;
         height: 25px;
         display: block;
-        transition: fill 0.2s ease, color 0.2s ease;
+        fill: #1e2f97;
+        color: #1e2f97;
       }
     }
 
-    .MuiListItemText-root {
-      margin: 0;
-
-      .MuiTypography-root {
-        font: 14px/24px "OpenSans-SemiBold";
+    // Icon color changes on hover
+    &:not(:hover) .MuiListItemIcon-root {
+      svg,
+      .MuiSvgIcon-root {
+        fill: #fff;
         color: #fff;
-        cursor: pointer;
-        white-space: nowrap;
-        transition: color 0.2s ease;
       }
     }
 
-    // Selected state - active capsule with gradient background
-    &.selected {
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-
-      .MuiListItemIcon-root {
-        color: #1e2f97;
-
-        svg,
-        .MuiSvgIcon-root {
-          fill: #1e2f97;
-          color: #1e2f97;
-        }
-      }
-
-      .MuiListItemText-root {
-        .MuiTypography-root {
-          color: #1e2f97;
-        }
-      }
+    // Add margin-right to icon only when text is visible
+    .MuiListItemIcon-root + .MuiListItemText-root {
+      margin-left: 8px;
     }
 
-    // Hover state - show gradient background on non-selected items
-    &:hover:not(.selected) {
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+    .MuiListItemText-root {
+      margin: 0;
 
-      .MuiListItemIcon-root {
+      .MuiTypography-root {
+        font: 14px/24px "OpenSans-SemiBold";
         color: #1e2f97;
-
-        svg,
-        .MuiSvgIcon-root {
-          fill: #1e2f97;
-          color: #1e2f97;
-        }
+        cursor: pointer;
+        white-space: nowrap;
       }
+    }
 
-      .MuiListItemText-root {
-        .MuiTypography-root {
-          color: #1e2f97;
-        }
-      }
+    // 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.5.0",
+  "version": "6.7.0",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",