@cullsin/lnc-menu 5.0.0 → 5.2.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 +15 -83
- package/dist/src/src/sidemenu.scss +44 -73
- package/package.json +1 -1
package/dist/src/SideMenu.js
CHANGED
|
@@ -1,125 +1,57 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
|
|
3
|
-
import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
|
|
4
3
|
import Box from "@mui/material/Box";
|
|
5
4
|
import Drawer from "@mui/material/Drawer";
|
|
6
5
|
import List from "@mui/material/List";
|
|
7
6
|
import ListItem from "@mui/material/ListItem";
|
|
8
7
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
9
8
|
import ListItemText from "@mui/material/ListItemText";
|
|
10
|
-
import Menu from "@mui/material/Menu";
|
|
11
|
-
import MenuItem from "@mui/material/MenuItem";
|
|
12
9
|
import Tooltip from "@mui/material/Tooltip";
|
|
13
10
|
import * as React from "react";
|
|
14
11
|
import { getTranslations } from "./translations";
|
|
15
12
|
function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
16
13
|
const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
|
|
17
|
-
const
|
|
18
|
-
const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
|
|
19
|
-
const { isDrawerOpen, toggleDrawer } = useDrawer();
|
|
20
|
-
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
14
|
+
const { isDrawerOpen } = useDrawer();
|
|
21
15
|
const t = React.useMemo(() => getTranslations(language), [language]);
|
|
22
16
|
const menuItems = React.useMemo(() => [
|
|
23
17
|
{
|
|
24
18
|
text: t.menu.patientManagement,
|
|
25
19
|
icon: _jsx(RecentActorsOutlinedIcon, {}),
|
|
26
|
-
|
|
27
|
-
{ text: t.menu.patient, path: `/patient/${language}/patient-listing` }
|
|
28
|
-
],
|
|
20
|
+
path: `/patient/${language}/patient-listing`,
|
|
29
21
|
},
|
|
30
22
|
{
|
|
31
23
|
text: t.menu.sampleManagement,
|
|
32
24
|
icon: _jsx(SampleMgmtIcon, {}),
|
|
33
|
-
|
|
34
|
-
{ text: t.menu.sampleListing, path: `/sample/${language}/sample-listing` }
|
|
35
|
-
],
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
text: t.menu.carrierDuoTrio,
|
|
39
|
-
icon: _jsx(GroupAddOutlinedIcon, {}),
|
|
40
|
-
path: `/carrier-duo-trio/${language}/`,
|
|
25
|
+
path: `/sample/${language}/sample-listing`,
|
|
41
26
|
},
|
|
42
27
|
], [SampleMgmtIcon, t, language]);
|
|
43
|
-
//
|
|
28
|
+
// Sync selection with current path
|
|
44
29
|
React.useEffect(() => {
|
|
45
30
|
const currentPath = location.pathname;
|
|
46
|
-
for (const
|
|
47
|
-
if (
|
|
48
|
-
|
|
49
|
-
if (currentPath.startsWith(sub.path)) {
|
|
50
|
-
setSelectedMainMenu(mainItem.text);
|
|
51
|
-
setSelectedSubMenuPath(sub.path);
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
else if (mainItem.path && currentPath.startsWith(mainItem.path)) {
|
|
57
|
-
setSelectedMainMenu(mainItem.text);
|
|
58
|
-
setSelectedSubMenuPath(null);
|
|
31
|
+
for (const item of menuItems) {
|
|
32
|
+
if (currentPath.startsWith(item.path)) {
|
|
33
|
+
setSelectedMainMenu(item.text);
|
|
59
34
|
return;
|
|
60
35
|
}
|
|
61
36
|
}
|
|
62
37
|
setSelectedMainMenu(null);
|
|
63
|
-
setSelectedSubMenuPath(null);
|
|
64
|
-
handleMenuClose();
|
|
65
38
|
}, [location.pathname, menuItems]);
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
};
|
|
70
|
-
const handleMenuClose = () => {
|
|
71
|
-
setAnchorEl(null);
|
|
72
|
-
setOpenMenuIndex(null);
|
|
73
|
-
};
|
|
74
|
-
const handleSubMenuItemClick = (path, parentText) => {
|
|
75
|
-
setSelectedMainMenu(parentText);
|
|
76
|
-
setSelectedSubMenuPath(path);
|
|
77
|
-
handleMenuClose();
|
|
78
|
-
if (isDrawerOpen)
|
|
79
|
-
toggleDrawer();
|
|
80
|
-
window.location.href = path;
|
|
39
|
+
const handleMenuClick = (item) => {
|
|
40
|
+
setSelectedMainMenu(item.text);
|
|
41
|
+
window.location.href = item.path;
|
|
81
42
|
};
|
|
82
|
-
return (_jsx(Box, {
|
|
43
|
+
return (_jsx(Box, { className: "side-menu-container", children: _jsx(Drawer, { variant: "permanent", className: "parent-container", sx: {
|
|
83
44
|
width: isDrawerOpen ? 230 : 64,
|
|
84
45
|
flexShrink: 0,
|
|
85
46
|
"& .MuiDrawer-paper": {
|
|
86
47
|
width: isDrawerOpen ? 230 : 64,
|
|
87
48
|
transition: "width 0.3s ease",
|
|
88
|
-
position: "
|
|
89
|
-
|
|
49
|
+
position: "sticky",
|
|
50
|
+
top: "65px",
|
|
51
|
+
height: "calc(100vh - 65px)",
|
|
90
52
|
borderRight: "1px solid #B1BECB",
|
|
91
53
|
overflowY: "auto",
|
|
92
54
|
},
|
|
93
|
-
}, children: _jsx(List, { children: menuItems.map((item, index) => (
|
|
94
|
-
if (item.subMenu) {
|
|
95
|
-
if (openMenuIndex === index) {
|
|
96
|
-
handleMenuClose();
|
|
97
|
-
}
|
|
98
|
-
else {
|
|
99
|
-
handleMenuOpen(event, index);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
else if (item.path) {
|
|
103
|
-
setSelectedMainMenu(item.text);
|
|
104
|
-
setSelectedSubMenuPath(null);
|
|
105
|
-
if (isDrawerOpen)
|
|
106
|
-
toggleDrawer();
|
|
107
|
-
window.location.href = item.path;
|
|
108
|
-
}
|
|
109
|
-
else if (item.onClick) {
|
|
110
|
-
item.onClick();
|
|
111
|
-
setSelectedMainMenu(item.text);
|
|
112
|
-
}
|
|
113
|
-
}, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: `app-menu-item ${!isDrawerOpen ? 'collapsed-menu' : ''}`, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
|
|
114
|
-
vertical: "top",
|
|
115
|
-
horizontal: "right",
|
|
116
|
-
}, transformOrigin: {
|
|
117
|
-
vertical: "top",
|
|
118
|
-
horizontal: "left",
|
|
119
|
-
}, PaperProps: {
|
|
120
|
-
style: {
|
|
121
|
-
marginLeft: 8,
|
|
122
|
-
},
|
|
123
|
-
}, children: [!isDrawerOpen && (_jsx("span", { className: "submenu-title", children: item.text })), item.subMenu.map((subItem) => (_jsx(MenuItem, { selected: selectedSubMenuPath === subItem.path, onClick: () => handleSubMenuItemClick(subItem.path, item.text), children: subItem.text }, subItem.text)))] }))] }, index))) }) }) }));
|
|
55
|
+
}, 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))) }) }) }));
|
|
124
56
|
}
|
|
125
57
|
export default SideMenu;
|
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
//overwritten the default MUI css
|
|
2
2
|
|
|
3
|
+
// Sticky side menu container
|
|
4
|
+
.side-menu-container {
|
|
5
|
+
position: sticky;
|
|
6
|
+
top: 65px;
|
|
7
|
+
height: calc(100vh - 65px);
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-shrink: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
3
12
|
.MuiBox-root .MuiList-root {
|
|
4
13
|
background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
|
|
5
14
|
color: #fff;
|
|
6
15
|
height: 100%;
|
|
7
|
-
bottom: 0;
|
|
16
|
+
bottom: 0;
|
|
8
17
|
padding: 20px 0;
|
|
9
18
|
}
|
|
10
19
|
|
|
11
20
|
.MuiList-root {
|
|
12
21
|
.MuiListItem-root {
|
|
13
22
|
padding: 15px;
|
|
23
|
+
|
|
24
|
+
// Selected state - capsule style with icon and text combined
|
|
14
25
|
&.selected {
|
|
15
26
|
padding: 7px;
|
|
16
27
|
|
|
@@ -19,51 +30,63 @@
|
|
|
19
30
|
color: #1e2f97;
|
|
20
31
|
padding: 10px;
|
|
21
32
|
min-width: 25px;
|
|
22
|
-
border-top-left-radius:
|
|
23
|
-
border-bottom-left-radius:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
33
|
+
border-top-left-radius: 20px;
|
|
34
|
+
border-bottom-left-radius: 20px;
|
|
35
|
+
border-top-right-radius: 0;
|
|
36
|
+
border-bottom-right-radius: 0;
|
|
37
|
+
|
|
38
|
+
// When collapsed (icon only), make full capsule
|
|
39
|
+
&:only-child {
|
|
40
|
+
border-radius: 20px;
|
|
28
41
|
}
|
|
29
42
|
}
|
|
30
43
|
|
|
31
44
|
.MuiListItemText-root {
|
|
45
|
+
margin: 0;
|
|
46
|
+
|
|
32
47
|
span {
|
|
33
48
|
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
34
|
-
padding: 10px
|
|
49
|
+
padding: 10px 15px 10px 5px;
|
|
35
50
|
min-width: 25px;
|
|
36
|
-
border-top-right-radius:
|
|
37
|
-
border-bottom-right-radius:
|
|
51
|
+
border-top-right-radius: 20px;
|
|
52
|
+
border-bottom-right-radius: 20px;
|
|
53
|
+
display: inline-block;
|
|
38
54
|
}
|
|
39
55
|
}
|
|
40
56
|
}
|
|
41
57
|
|
|
58
|
+
// Hover state - capsule style
|
|
42
59
|
&:hover:not(.selected) {
|
|
43
|
-
padding:
|
|
60
|
+
padding: 7px;
|
|
44
61
|
|
|
45
62
|
.MuiListItemIcon-root {
|
|
46
63
|
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
47
64
|
color: #1e2f97;
|
|
48
65
|
padding: 10px;
|
|
49
66
|
min-width: 25px;
|
|
50
|
-
border-top-left-radius:
|
|
51
|
-
border-bottom-left-radius:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
67
|
+
border-top-left-radius: 20px;
|
|
68
|
+
border-bottom-left-radius: 20px;
|
|
69
|
+
border-top-right-radius: 0;
|
|
70
|
+
border-bottom-right-radius: 0;
|
|
71
|
+
|
|
72
|
+
// When collapsed (icon only), make full capsule
|
|
73
|
+
&:only-child {
|
|
74
|
+
border-radius: 20px;
|
|
56
75
|
}
|
|
57
76
|
}
|
|
58
77
|
|
|
59
78
|
.MuiListItemText-root {
|
|
79
|
+
margin: 0;
|
|
80
|
+
|
|
60
81
|
span {
|
|
61
82
|
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
62
|
-
padding: 10px
|
|
83
|
+
padding: 10px 15px 10px 5px;
|
|
63
84
|
min-width: 25px;
|
|
64
|
-
border-top-right-radius:
|
|
65
|
-
border-bottom-right-radius:
|
|
85
|
+
border-top-right-radius: 20px;
|
|
86
|
+
border-bottom-right-radius: 20px;
|
|
87
|
+
display: inline-block;
|
|
66
88
|
}
|
|
89
|
+
|
|
67
90
|
.MuiTypography-root {
|
|
68
91
|
color: #1e2f97;
|
|
69
92
|
}
|
|
@@ -79,6 +102,7 @@
|
|
|
79
102
|
.MuiListItemText-root {
|
|
80
103
|
margin-top: 0;
|
|
81
104
|
margin-bottom: 0;
|
|
105
|
+
|
|
82
106
|
.MuiTypography-root {
|
|
83
107
|
font: 14px/24px "OpenSans-SemiBold";
|
|
84
108
|
color: #fff;
|
|
@@ -89,59 +113,6 @@
|
|
|
89
113
|
}
|
|
90
114
|
}
|
|
91
115
|
|
|
92
|
-
.app-menu-item {
|
|
93
|
-
.MuiList-root {
|
|
94
|
-
&.MuiMenu-list {
|
|
95
|
-
background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
|
|
96
|
-
color: #fff;
|
|
97
|
-
width: 200px;
|
|
98
|
-
padding: 10px;
|
|
99
|
-
position: relative;
|
|
100
|
-
overflow: visible;
|
|
101
|
-
.submenu-title {
|
|
102
|
-
text-transform: uppercase;
|
|
103
|
-
font: 12px / 18px "OpenSans-Regular";
|
|
104
|
-
color: #efffff;
|
|
105
|
-
padding: 0 0 5px 10px;
|
|
106
|
-
display: block;
|
|
107
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
108
|
-
margin-bottom: 5px;
|
|
109
|
-
}
|
|
110
|
-
.MuiMenuItem-root {
|
|
111
|
-
&.Mui-focusVisible {
|
|
112
|
-
background-color: transparent;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&:hover {
|
|
116
|
-
font: 16px/24px "OpenSans-SemiBold";
|
|
117
|
-
background: #374451;
|
|
118
|
-
border-radius: 6px;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
&.collapsed-menu {
|
|
125
|
-
.MuiList-root {
|
|
126
|
-
&.MuiMenu-list {
|
|
127
|
-
&::before {
|
|
128
|
-
content: "";
|
|
129
|
-
position: absolute;
|
|
130
|
-
top: 15px;
|
|
131
|
-
left: -8px;
|
|
132
|
-
width: 0;
|
|
133
|
-
height: 0;
|
|
134
|
-
border-top: 8px solid transparent;
|
|
135
|
-
border-bottom: 8px solid transparent;
|
|
136
|
-
border-right: 8px solid #516578;
|
|
137
|
-
z-index: 2;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
|
|
145
116
|
.MuiPopover-root {
|
|
146
117
|
.MuiPaper-root {
|
|
147
118
|
overflow: visible;
|