@cullsin/lnc-menu 3.0.15 → 3.0.16
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 +113 -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, navigate }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default SideMenu;
|
|
@@ -0,0 +1,113 @@
|
|
|
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 AppBar from "@mui/material/AppBar";
|
|
6
|
+
import Box from "@mui/material/Box";
|
|
7
|
+
import Drawer from "@mui/material/Drawer";
|
|
8
|
+
import List from "@mui/material/List";
|
|
9
|
+
import ListItem from "@mui/material/ListItem";
|
|
10
|
+
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
11
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
12
|
+
import Menu from "@mui/material/Menu";
|
|
13
|
+
import MenuItem from "@mui/material/MenuItem";
|
|
14
|
+
import * as React from "react";
|
|
15
|
+
import { useLocation } from "react-router-dom"; // Import useLocation
|
|
16
|
+
function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
|
|
17
|
+
const [selectedMainMenu, setSelectedMainMenu] = React.useState(null); // Track selected main menu
|
|
18
|
+
const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
|
|
19
|
+
const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
|
|
20
|
+
const { isDrawerOpen, toggleDrawer } = useDrawer();
|
|
21
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
22
|
+
const location = useLocation(); // Get the current location object
|
|
23
|
+
// Effect to set initial selection based on URL
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
const currentPath = location.pathname;
|
|
26
|
+
menuItems.forEach((mainItem) => {
|
|
27
|
+
if (mainItem.subMenu) {
|
|
28
|
+
const matchingSubMenu = mainItem.subMenu.find((subItem) => subItem.path === currentPath);
|
|
29
|
+
if (matchingSubMenu) {
|
|
30
|
+
setSelectedMainMenu(mainItem.text);
|
|
31
|
+
setSelectedSubMenuPath(matchingSubMenu.path);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
}, [location.pathname]); // Re-run when the path changes
|
|
37
|
+
const handleMenuOpen = (event, index) => {
|
|
38
|
+
setAnchorEl(event.currentTarget);
|
|
39
|
+
setOpenMenuIndex(index); // Keep track of which menu to open
|
|
40
|
+
};
|
|
41
|
+
const handleMenuClose = () => {
|
|
42
|
+
setAnchorEl(null);
|
|
43
|
+
setOpenMenuIndex(null);
|
|
44
|
+
};
|
|
45
|
+
const handleSubMenuItemClick = (path, parentText) => {
|
|
46
|
+
setSelectedMainMenu(parentText);
|
|
47
|
+
setSelectedSubMenuPath(path); // Set based on path for unique identification
|
|
48
|
+
handleMenuClose();
|
|
49
|
+
if (isDrawerOpen) {
|
|
50
|
+
toggleDrawer();
|
|
51
|
+
}
|
|
52
|
+
// navigating through href
|
|
53
|
+
window.location.href = path;
|
|
54
|
+
};
|
|
55
|
+
const menuItems = [
|
|
56
|
+
{
|
|
57
|
+
text: "Home",
|
|
58
|
+
icon: _jsx(DashboardOutlinedIcon, {}),
|
|
59
|
+
subMenu: [{ text: "Dashboard", path: "/super-site/dashboard" }],
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
text: "Patient Management",
|
|
63
|
+
icon: _jsx(RecentActorsOutlinedIcon, {}),
|
|
64
|
+
subMenu: [
|
|
65
|
+
{ text: "Patient", path: "/patient/patient-listing" },
|
|
66
|
+
{ text: "Family", path: "/patient/family-listing" },
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
text: "Sample Management",
|
|
71
|
+
icon: _jsx(SampleMgmtIcon, {}),
|
|
72
|
+
subMenu: [
|
|
73
|
+
{ text: "Dashboard", path: "/sample/sample-dashboard" },
|
|
74
|
+
{ text: "Sample Listing", path: "/sample/sample-listing" },
|
|
75
|
+
{
|
|
76
|
+
text: "Single Sample Analysis",
|
|
77
|
+
path: "/sample/single-sample-analysis",
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
{ text: "Reports", icon: _jsx(ArticleOutlinedIcon, {}) },
|
|
82
|
+
];
|
|
83
|
+
return (_jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(AppBar, { sx: { position: "fixed", top: 0 } }), _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
|
|
84
|
+
width: isDrawerOpen ? 230 : 64,
|
|
85
|
+
flexShrink: 0,
|
|
86
|
+
"& .MuiDrawer-paper": {
|
|
87
|
+
width: isDrawerOpen ? 230 : 64,
|
|
88
|
+
transition: "width 0.3s ease",
|
|
89
|
+
top: "64px",
|
|
90
|
+
bottom: "0",
|
|
91
|
+
borderRight: "1px solid #B1BECB",
|
|
92
|
+
},
|
|
93
|
+
}, children: _jsx(List, { children: menuItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: selectedMainMenu === item.text ? "selected" : "", onClick: (event) => {
|
|
94
|
+
if (item.subMenu) {
|
|
95
|
+
handleMenuOpen(event, index);
|
|
96
|
+
}
|
|
97
|
+
else if (item.onClick) {
|
|
98
|
+
item.onClick();
|
|
99
|
+
setSelectedMainMenu(item.text);
|
|
100
|
+
}
|
|
101
|
+
}, 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: {
|
|
102
|
+
vertical: "top",
|
|
103
|
+
horizontal: "left",
|
|
104
|
+
}, transformOrigin: {
|
|
105
|
+
vertical: "top",
|
|
106
|
+
horizontal: "left",
|
|
107
|
+
}, PaperProps: {
|
|
108
|
+
style: {
|
|
109
|
+
marginLeft: isDrawerOpen ? 230 : 65,
|
|
110
|
+
},
|
|
111
|
+
}, 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))) }) })] }));
|
|
112
|
+
}
|
|
113
|
+
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.16",
|
|
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",
|