@cullsin/lnc-menu 3.0.15 → 3.0.17
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/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/src/SideMenu.d.ts +12 -0
- package/dist/src/SideMenu.js +133 -0
- package/dist/src/sidemenu.scss +161 -0
- package/package.json +3 -2
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { NavigateFunction } from "react-router-dom";
|
|
3
|
+
interface SideMenuProps {
|
|
4
|
+
useDrawer: () => {
|
|
5
|
+
isDrawerOpen: boolean;
|
|
6
|
+
toggleDrawer: () => void;
|
|
7
|
+
};
|
|
8
|
+
SampleMgmtIcon: React.ElementType;
|
|
9
|
+
navigate: NavigateFunction;
|
|
10
|
+
}
|
|
11
|
+
declare function SideMenu({ useDrawer, SampleMgmtIcon }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default SideMenu;
|
|
@@ -0,0 +1,133 @@
|
|
|
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
|
+
import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
|
|
5
|
+
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
|
6
|
+
import AppBar from "@mui/material/AppBar";
|
|
7
|
+
import Box from "@mui/material/Box";
|
|
8
|
+
import Drawer from "@mui/material/Drawer";
|
|
9
|
+
import List from "@mui/material/List";
|
|
10
|
+
import ListItem from "@mui/material/ListItem";
|
|
11
|
+
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
12
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
13
|
+
import Menu from "@mui/material/Menu";
|
|
14
|
+
import MenuItem from "@mui/material/MenuItem";
|
|
15
|
+
import Tooltip from "@mui/material/Tooltip";
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
import { useLocation } from "react-router-dom";
|
|
18
|
+
function SideMenu({ useDrawer, SampleMgmtIcon }) {
|
|
19
|
+
const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
|
|
20
|
+
const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
|
|
21
|
+
const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
|
|
22
|
+
const { isDrawerOpen, toggleDrawer } = useDrawer();
|
|
23
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
24
|
+
const location = useLocation();
|
|
25
|
+
const menuItems = React.useMemo(() => [
|
|
26
|
+
{
|
|
27
|
+
text: "Home",
|
|
28
|
+
icon: _jsx(DashboardOutlinedIcon, {}),
|
|
29
|
+
subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
text: "Patient Management",
|
|
33
|
+
icon: _jsx(RecentActorsOutlinedIcon, {}),
|
|
34
|
+
subMenu: [
|
|
35
|
+
{ text: "Patient", path: "/patient/patient-listing" },
|
|
36
|
+
{ text: "Family", path: "/patient/family-listing" },
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
text: "Sample Management",
|
|
41
|
+
icon: _jsx(SampleMgmtIcon, {}),
|
|
42
|
+
subMenu: [
|
|
43
|
+
{ text: "Sample Listing", path: "/sample/sample-listing" }
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
text: "Reports",
|
|
48
|
+
icon: _jsx(ArticleOutlinedIcon, {}),
|
|
49
|
+
path: "/variant/",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
text: "Carrier Duo/Trio",
|
|
53
|
+
icon: _jsx(GroupAddIcon, {}),
|
|
54
|
+
path: "/carrier-duo-trio/",
|
|
55
|
+
},
|
|
56
|
+
], [SampleMgmtIcon]);
|
|
57
|
+
// Initialize selected menu based on current URL
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
const currentPath = location.pathname;
|
|
60
|
+
menuItems.forEach((mainItem) => {
|
|
61
|
+
if (mainItem.subMenu) {
|
|
62
|
+
const match = mainItem.subMenu.find((sub) => sub.path === currentPath);
|
|
63
|
+
if (match) {
|
|
64
|
+
setSelectedMainMenu(mainItem.text);
|
|
65
|
+
setSelectedSubMenuPath(match.path);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
else if (mainItem.path === currentPath) {
|
|
69
|
+
setSelectedMainMenu(mainItem.text);
|
|
70
|
+
setSelectedSubMenuPath(null);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
handleMenuClose(); // Close open menu if path changes
|
|
74
|
+
}, [location.pathname]);
|
|
75
|
+
const handleMenuOpen = (event, index) => {
|
|
76
|
+
setAnchorEl(event.currentTarget);
|
|
77
|
+
setOpenMenuIndex(index);
|
|
78
|
+
};
|
|
79
|
+
const handleMenuClose = () => {
|
|
80
|
+
setAnchorEl(null);
|
|
81
|
+
setOpenMenuIndex(null);
|
|
82
|
+
};
|
|
83
|
+
const handleSubMenuItemClick = (path, parentText) => {
|
|
84
|
+
setSelectedMainMenu(parentText);
|
|
85
|
+
setSelectedSubMenuPath(path);
|
|
86
|
+
handleMenuClose();
|
|
87
|
+
if (isDrawerOpen)
|
|
88
|
+
toggleDrawer();
|
|
89
|
+
window.location.href = path; // Maintain microfrontend transition
|
|
90
|
+
};
|
|
91
|
+
return (_jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(AppBar, { sx: { position: "fixed", top: 0 } }), _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
|
|
92
|
+
width: isDrawerOpen ? 230 : 64,
|
|
93
|
+
flexShrink: 0,
|
|
94
|
+
"& .MuiDrawer-paper": {
|
|
95
|
+
width: isDrawerOpen ? 230 : 64,
|
|
96
|
+
transition: "width 0.3s ease",
|
|
97
|
+
top: "64px",
|
|
98
|
+
bottom: "0",
|
|
99
|
+
borderRight: "1px solid #B1BECB",
|
|
100
|
+
},
|
|
101
|
+
}, 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) => {
|
|
102
|
+
if (item.subMenu) {
|
|
103
|
+
if (openMenuIndex === index) {
|
|
104
|
+
handleMenuClose();
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
handleMenuOpen(event, index);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
else if (item.path) {
|
|
111
|
+
setSelectedMainMenu(item.text);
|
|
112
|
+
setSelectedSubMenuPath(null);
|
|
113
|
+
if (isDrawerOpen)
|
|
114
|
+
toggleDrawer();
|
|
115
|
+
window.location.href = item.path;
|
|
116
|
+
}
|
|
117
|
+
else if (item.onClick) {
|
|
118
|
+
item.onClick();
|
|
119
|
+
setSelectedMainMenu(item.text);
|
|
120
|
+
}
|
|
121
|
+
}, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { className: "app-menu-item", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
|
|
122
|
+
vertical: "top",
|
|
123
|
+
horizontal: "left",
|
|
124
|
+
}, transformOrigin: {
|
|
125
|
+
vertical: "top",
|
|
126
|
+
horizontal: "left",
|
|
127
|
+
}, PaperProps: {
|
|
128
|
+
style: {
|
|
129
|
+
marginLeft: isDrawerOpen ? 230 : 65,
|
|
130
|
+
},
|
|
131
|
+
}, children: [_jsx("span", { className: "submenu-title", children: !isDrawerOpen ? item.text : "" }), item.subMenu.map((subItem) => (_jsx(MenuItem, { selected: selectedSubMenuPath === subItem.path, onClick: () => handleSubMenuItemClick(subItem.path, item.text), children: subItem.text }, subItem.text)))] }))] }, index))) }) })] }));
|
|
132
|
+
}
|
|
133
|
+
export default SideMenu;
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
//overwritten the default MUI css
|
|
2
|
+
|
|
3
|
+
.MuiBox-root .MuiList-root {
|
|
4
|
+
background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
|
|
5
|
+
color: #fff;
|
|
6
|
+
height: 100%;
|
|
7
|
+
bottom: 0; // Ensure drawer stretches till bottom
|
|
8
|
+
padding: 20px 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.MuiList-root {
|
|
12
|
+
.MuiListItem-root {
|
|
13
|
+
padding: 15px;
|
|
14
|
+
&.selected {
|
|
15
|
+
padding: 7px;
|
|
16
|
+
|
|
17
|
+
.MuiListItemIcon-root {
|
|
18
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
19
|
+
color: #1e2f97;
|
|
20
|
+
padding: 10px;
|
|
21
|
+
min-width: 25px;
|
|
22
|
+
border-top-left-radius: 5px;
|
|
23
|
+
border-bottom-left-radius: 5px;
|
|
24
|
+
|
|
25
|
+
&:only-of-type {
|
|
26
|
+
border-top-right-radius: 5px;
|
|
27
|
+
border-bottom-right-radius: 5px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.MuiListItemText-root {
|
|
32
|
+
span {
|
|
33
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
34
|
+
padding: 10px 0;
|
|
35
|
+
min-width: 25px;
|
|
36
|
+
border-top-right-radius: 5px;
|
|
37
|
+
border-bottom-right-radius: 5px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:hover:not(.selected) {
|
|
43
|
+
padding: 5px 7px;
|
|
44
|
+
|
|
45
|
+
.MuiListItemIcon-root {
|
|
46
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
47
|
+
color: #1e2f97;
|
|
48
|
+
padding: 10px;
|
|
49
|
+
min-width: 25px;
|
|
50
|
+
border-top-left-radius: 5px;
|
|
51
|
+
border-bottom-left-radius: 5px;
|
|
52
|
+
|
|
53
|
+
&:only-of-type {
|
|
54
|
+
border-top-right-radius: 5px;
|
|
55
|
+
border-bottom-right-radius: 5px;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.MuiListItemText-root {
|
|
60
|
+
span {
|
|
61
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
62
|
+
padding: 10px 0;
|
|
63
|
+
min-width: 25px;
|
|
64
|
+
border-top-right-radius: 5px;
|
|
65
|
+
border-bottom-right-radius: 5px;
|
|
66
|
+
}
|
|
67
|
+
.MuiTypography-root {
|
|
68
|
+
color: #1e2f97;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.MuiListItemIcon-root {
|
|
74
|
+
color: #fff;
|
|
75
|
+
min-width: 30px;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.MuiListItemText-root {
|
|
80
|
+
margin-top: 0;
|
|
81
|
+
margin-bottom: 0;
|
|
82
|
+
.MuiTypography-root {
|
|
83
|
+
font: 14px/24px "OpenSans-SemiBold";
|
|
84
|
+
color: #fff;
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
white-space: nowrap;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
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
|
+
}
|
|
108
|
+
.MuiMenuItem-root {
|
|
109
|
+
&.Mui-focusVisible {
|
|
110
|
+
background-color: transparent;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:hover {
|
|
114
|
+
font: 16px/24px "OpenSans-SemiBold";
|
|
115
|
+
background: #374451;
|
|
116
|
+
border-radius: 6px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
ul.MuiList-root {
|
|
124
|
+
&:has(.submenu-title) {
|
|
125
|
+
&::before {
|
|
126
|
+
content: "";
|
|
127
|
+
position: absolute;
|
|
128
|
+
top: 15px;
|
|
129
|
+
left: -8px;
|
|
130
|
+
width: 0;
|
|
131
|
+
height: 0;
|
|
132
|
+
border-top: 8px solid transparent;
|
|
133
|
+
border-bottom: 8px solid transparent;
|
|
134
|
+
border-right: 8px solid #516578;
|
|
135
|
+
z-index: 2;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.MuiPopover-root {
|
|
141
|
+
.MuiPaper-root {
|
|
142
|
+
overflow: visible;
|
|
143
|
+
position: relative;
|
|
144
|
+
width: max-content;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.MuiList-root.MuiMenu-list {
|
|
149
|
+
border-radius: 5px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
#more-menu {
|
|
153
|
+
.MuiPaper-root {
|
|
154
|
+
.MuiMenu-list {
|
|
155
|
+
color: #1e2f97;
|
|
156
|
+
.MuiMenuItem-root {
|
|
157
|
+
font-size: 14px;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cullsin/lnc-menu",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.17",
|
|
4
4
|
"description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@mui/icons-material": "^5.14.0",
|
|
20
|
-
"@mui/material": "^5.14.0"
|
|
20
|
+
"@mui/material": "^5.14.0",
|
|
21
|
+
"react-router-dom": "^7.6.2"
|
|
21
22
|
},
|
|
22
23
|
"devDependencies": {
|
|
23
24
|
"cpy-cli": "^5.0.0",
|