@cullsin/lnc-menu 3.0.90 → 3.0.92
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 +43 -56
- package/dist/src/src/sidemenu.scss +19 -14
- package/package.json +1 -1
package/dist/src/SideMenu.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
|
|
3
|
-
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
|
4
2
|
import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
|
|
5
3
|
import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
|
|
6
|
-
import AppBar from "@mui/material/AppBar";
|
|
7
4
|
import Box from "@mui/material/Box";
|
|
8
5
|
import Drawer from "@mui/material/Drawer";
|
|
9
6
|
import List from "@mui/material/List";
|
|
@@ -23,37 +20,27 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
23
20
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
24
21
|
const t = React.useMemo(() => getTranslations(language), [language]);
|
|
25
22
|
const menuItems = React.useMemo(() => [
|
|
26
|
-
{
|
|
27
|
-
text: t.menu.home,
|
|
28
|
-
icon: _jsx(DashboardOutlinedIcon, {}),
|
|
29
|
-
subMenu: [{ text: t.menu.dashboard, path: "/super-site/dashboard" }],
|
|
30
|
-
},
|
|
31
23
|
{
|
|
32
24
|
text: t.menu.patientManagement,
|
|
33
25
|
icon: _jsx(RecentActorsOutlinedIcon, {}),
|
|
34
26
|
subMenu: [
|
|
35
|
-
{ text: t.menu.patient, path:
|
|
36
|
-
{ text: t.menu.family, path:
|
|
27
|
+
{ text: t.menu.patient, path: `/patient/${language}/patient-listing` },
|
|
28
|
+
{ text: t.menu.family, path: `/family/${language}/family-listing` },
|
|
37
29
|
],
|
|
38
30
|
},
|
|
39
31
|
{
|
|
40
32
|
text: t.menu.sampleManagement,
|
|
41
33
|
icon: _jsx(SampleMgmtIcon, {}),
|
|
42
34
|
subMenu: [
|
|
43
|
-
{ text: t.menu.sampleListing, path:
|
|
35
|
+
{ text: t.menu.sampleListing, path: `/sample/${language}/sample-listing` }
|
|
44
36
|
],
|
|
45
37
|
},
|
|
46
|
-
{
|
|
47
|
-
text: t.menu.reports,
|
|
48
|
-
icon: _jsx(ArticleOutlinedIcon, {}),
|
|
49
|
-
path: "/reports/",
|
|
50
|
-
},
|
|
51
38
|
{
|
|
52
39
|
text: t.menu.carrierDuoTrio,
|
|
53
40
|
icon: _jsx(GroupAddOutlinedIcon, {}),
|
|
54
|
-
path:
|
|
41
|
+
path: `/carrier-duo-trio/${language}/`,
|
|
55
42
|
},
|
|
56
|
-
], [SampleMgmtIcon, t]);
|
|
43
|
+
], [SampleMgmtIcon, t, language]);
|
|
57
44
|
// 🔁 Sync selection with current path
|
|
58
45
|
React.useEffect(() => {
|
|
59
46
|
const currentPath = location.pathname;
|
|
@@ -93,46 +80,46 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
93
80
|
toggleDrawer();
|
|
94
81
|
window.location.href = path;
|
|
95
82
|
};
|
|
96
|
-
return (
|
|
83
|
+
return (_jsx(Box, { sx: { flexGrow: 1 }, children: _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
|
|
84
|
+
width: isDrawerOpen ? 230 : 64,
|
|
85
|
+
flexShrink: 0,
|
|
86
|
+
"& .MuiDrawer-paper": {
|
|
97
87
|
width: isDrawerOpen ? 230 : 64,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
if (item.subMenu) {
|
|
108
|
-
if (openMenuIndex === index) {
|
|
109
|
-
handleMenuClose();
|
|
110
|
-
}
|
|
111
|
-
else {
|
|
112
|
-
handleMenuOpen(event, index);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
else if (item.path) {
|
|
116
|
-
setSelectedMainMenu(item.text);
|
|
117
|
-
setSelectedSubMenuPath(null);
|
|
118
|
-
if (isDrawerOpen)
|
|
119
|
-
toggleDrawer();
|
|
120
|
-
window.location.href = item.path;
|
|
88
|
+
transition: "width 0.3s ease",
|
|
89
|
+
height: "100vh",
|
|
90
|
+
borderRight: "1px solid #B1BECB",
|
|
91
|
+
overflowY: "auto",
|
|
92
|
+
},
|
|
93
|
+
}, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
|
|
94
|
+
if (item.subMenu) {
|
|
95
|
+
if (openMenuIndex === index) {
|
|
96
|
+
handleMenuClose();
|
|
121
97
|
}
|
|
122
|
-
else
|
|
123
|
-
|
|
124
|
-
setSelectedMainMenu(item.text);
|
|
98
|
+
else {
|
|
99
|
+
handleMenuOpen(event, index);
|
|
125
100
|
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
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))) }) }) }));
|
|
137
124
|
}
|
|
138
125
|
export default SideMenu;
|
|
@@ -104,6 +104,8 @@
|
|
|
104
104
|
color: #efffff;
|
|
105
105
|
padding: 0 0 5px 10px;
|
|
106
106
|
display: block;
|
|
107
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
108
|
+
margin-bottom: 5px;
|
|
107
109
|
}
|
|
108
110
|
.MuiMenuItem-root {
|
|
109
111
|
&.Mui-focusVisible {
|
|
@@ -118,25 +120,28 @@
|
|
|
118
120
|
}
|
|
119
121
|
}
|
|
120
122
|
}
|
|
121
|
-
}
|
|
122
123
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
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
|
+
}
|
|
136
140
|
}
|
|
137
141
|
}
|
|
138
142
|
}
|
|
139
143
|
|
|
144
|
+
|
|
140
145
|
.MuiPopover-root {
|
|
141
146
|
.MuiPaper-root {
|
|
142
147
|
overflow: visible;
|