@cullsin/lnc-menu 6.6.0 → 6.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/SideMenu.js +1 -2
- package/dist/src/sidemenu.scss +36 -3
- package/package.json +1 -1
package/dist/src/SideMenu.js
CHANGED
|
@@ -63,7 +63,6 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
63
63
|
overflowY: "auto",
|
|
64
64
|
zIndex: 100,
|
|
65
65
|
},
|
|
66
|
-
}, children: _jsx(List, { children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true,
|
|
67
|
-
, onClick: () => handleMenuClick(item), children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
|
|
66
|
+
}, 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))) }) }) }));
|
|
68
67
|
}
|
|
69
68
|
export default SideMenu;
|
package/dist/src/sidemenu.scss
CHANGED
|
@@ -18,14 +18,33 @@
|
|
|
18
18
|
.MuiList-root {
|
|
19
19
|
.MuiListItem-root {
|
|
20
20
|
// Apply capsule layout with gradient permanently for testing
|
|
21
|
-
padding: 10px
|
|
22
|
-
margin:
|
|
23
|
-
border-radius:
|
|
21
|
+
padding: 10px 16px;
|
|
22
|
+
margin: 12px 0px 0px 0px;
|
|
23
|
+
border-radius: 15px;
|
|
24
24
|
display: flex;
|
|
25
25
|
align-items: center;
|
|
26
26
|
justify-content: center;
|
|
27
27
|
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
28
28
|
|
|
29
|
+
// Width based on menu open/closed state
|
|
30
|
+
&.menu-closed {
|
|
31
|
+
width: 58px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&.menu-open {
|
|
35
|
+
width: 200px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Hover design - override the default background on hover
|
|
39
|
+
&:hover {
|
|
40
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Default state (not hovered) - transparent background
|
|
44
|
+
&:not(:hover) {
|
|
45
|
+
background: transparent !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
29
48
|
// Normalize all icons (MUI icons and custom SVGs)
|
|
30
49
|
.MuiListItemIcon-root {
|
|
31
50
|
color: #1e2f97;
|
|
@@ -47,6 +66,15 @@
|
|
|
47
66
|
}
|
|
48
67
|
}
|
|
49
68
|
|
|
69
|
+
// Icon color changes on hover
|
|
70
|
+
&:not(:hover) .MuiListItemIcon-root {
|
|
71
|
+
svg,
|
|
72
|
+
.MuiSvgIcon-root {
|
|
73
|
+
fill: #fff;
|
|
74
|
+
color: #fff;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
50
78
|
// Add margin-right to icon only when text is visible
|
|
51
79
|
.MuiListItemIcon-root + .MuiListItemText-root {
|
|
52
80
|
margin-left: 8px;
|
|
@@ -62,6 +90,11 @@
|
|
|
62
90
|
white-space: nowrap;
|
|
63
91
|
}
|
|
64
92
|
}
|
|
93
|
+
|
|
94
|
+
// Text color changes on hover
|
|
95
|
+
&:not(:hover) .MuiListItemText-root .MuiTypography-root {
|
|
96
|
+
color: #fff;
|
|
97
|
+
}
|
|
65
98
|
}
|
|
66
99
|
}
|
|
67
100
|
|