@cullsin/lnc-menu 6.3.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,13 +17,20 @@
 
 .MuiList-root {
   .MuiListItem-root {
-    padding: 15px;
-    margin-bottom: 4px;
+    // Apply capsule layout with gradient permanently for testing
+    padding: 10px 15px;
+    margin: 4px 12px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
 
     // Normalize all icons (MUI icons and custom SVGs)
     .MuiListItemIcon-root {
-      color: #fff;
-      min-width: 30px;
+      color: #1e2f97;
+      min-width: auto;
+      margin-right: 0;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -35,80 +42,26 @@
         width: 24px;
         height: 25px;
         display: block;
+        fill: #1e2f97;
+        color: #1e2f97;
       }
     }
 
+    // Add margin-right to icon only when text is visible
+    .MuiListItemIcon-root + .MuiListItemText-root {
+      margin-left: 8px;
+    }
+
     .MuiListItemText-root {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin: 0;
 
       .MuiTypography-root {
         font: 14px/24px "OpenSans-SemiBold";
-        color: #fff;
+        color: #1e2f97;
         cursor: pointer;
         white-space: nowrap;
       }
     }
-
-    // Selected state - unified capsule background
-    &.selected {
-      padding: 10px 15px;
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-      border-radius: 20px;
-      margin: 0 12px;
-      display: flex;
-      align-items: center;
-
-      .MuiListItemIcon-root {
-        color: #1e2f97;
-        min-width: auto;
-        margin-right: 8px;
-
-        svg,
-        .MuiSvgIcon-root {
-          fill: #1e2f97;
-          color: #1e2f97;
-        }
-      }
-
-      .MuiListItemText-root {
-        margin: 0;
-
-        .MuiTypography-root {
-          color: #1e2f97;
-        }
-      }
-    }
-
-    // Hover state - unified capsule background
-    &:hover:not(.selected) {
-      padding: 10px 15px;
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
-      border-radius: 20px;
-      margin: 0 12px;
-      display: flex;
-      align-items: center;
-
-      .MuiListItemIcon-root {
-        color: #1e2f97;
-        min-width: auto;
-        margin-right: 8px;
-
-        svg,
-        .MuiSvgIcon-root {
-          fill: #1e2f97;
-          color: #1e2f97;
-        }
-      }
-
-      .MuiListItemText-root {
-        margin: 0;
-
-        .MuiTypography-root {
-          color: #1e2f97;
-        }
-      }
-    }
   }
 }
 

package/package.json

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