@cullsin/lnc-menu 6.5.0 → 6.6.0

package/dist/src/SideMenu.js

@@ -63,6 +63,7 @@ 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, 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))) }) }) }));
 }
 export default SideMenu;

package/dist/src/sidemenu.scss

@@ -17,19 +17,20 @@
 
 .MuiList-root {
   .MuiListItem-root {
-    // Apply capsule layout permanently to prevent layout shifts
+    // Apply capsule layout with gradient permanently for testing
     padding: 10px 15px;
     margin: 4px 12px;
     border-radius: 20px;
     display: flex;
     align-items: center;
-    transition: background 0.2s ease;
+    justify-content: center;
+    background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !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,61 +42,24 @@
         width: 24px;
         height: 25px;
         display: block;
-        transition: fill 0.2s ease, color 0.2s ease;
+        fill: #1e2f97;
+        color: #1e2f97;
       }
     }
 
+    // Add margin-right to icon only when text is visible
+    .MuiListItemIcon-root + .MuiListItemText-root {
+      margin-left: 8px;
+    }
+
     .MuiListItemText-root {
       margin: 0;
 
       .MuiTypography-root {
         font: 14px/24px "OpenSans-SemiBold";
-        color: #fff;
+        color: #1e2f97;
         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;
-        }
-      }
-    }
-
-    // Hover state - show gradient background on non-selected items
-    &:hover:not(.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;
-        }
       }
     }
   }

package/package.json

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