@cullsin/lnc-menu 3.0.12 → 3.0.14
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 +28 -10
- package/dist/src/sidemenu.scss +127 -85
- package/package.json +4 -3
package/dist/src/SideMenu.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
|
|
3
|
+
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
|
4
|
+
import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
|
|
3
5
|
import AppBar from "@mui/material/AppBar";
|
|
4
6
|
import Box from "@mui/material/Box";
|
|
5
7
|
import Drawer from "@mui/material/Drawer";
|
|
@@ -9,14 +11,29 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
|
|
9
11
|
import ListItemText from "@mui/material/ListItemText";
|
|
10
12
|
import Menu from "@mui/material/Menu";
|
|
11
13
|
import MenuItem from "@mui/material/MenuItem";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
|
|
14
|
+
import * as React from "react";
|
|
15
|
+
import { useLocation } from "react-router-dom"; // Import useLocation
|
|
15
16
|
function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
|
|
16
17
|
const [selectedMainMenu, setSelectedMainMenu] = React.useState(null); // Track selected main menu
|
|
18
|
+
const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
|
|
17
19
|
const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
|
|
18
20
|
const { isDrawerOpen, toggleDrawer } = useDrawer();
|
|
19
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
|
|
20
37
|
const handleMenuOpen = (event, index) => {
|
|
21
38
|
setAnchorEl(event.currentTarget);
|
|
22
39
|
setOpenMenuIndex(index); // Keep track of which menu to open
|
|
@@ -26,12 +43,14 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
|
|
|
26
43
|
setOpenMenuIndex(null);
|
|
27
44
|
};
|
|
28
45
|
const handleSubMenuItemClick = (path, parentText) => {
|
|
29
|
-
setSelectedMainMenu(parentText);
|
|
46
|
+
setSelectedMainMenu(parentText);
|
|
47
|
+
setSelectedSubMenuPath(path); // Set based on path for unique identification
|
|
30
48
|
handleMenuClose();
|
|
31
49
|
if (isDrawerOpen) {
|
|
32
50
|
toggleDrawer();
|
|
33
51
|
}
|
|
34
|
-
window.location.href
|
|
52
|
+
// Use navigate for client-side routing instead of window.location.href
|
|
53
|
+
navigate(path);
|
|
35
54
|
};
|
|
36
55
|
const menuItems = [
|
|
37
56
|
{
|
|
@@ -74,13 +93,12 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
|
|
|
74
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) => {
|
|
75
94
|
if (item.subMenu) {
|
|
76
95
|
handleMenuOpen(event, index);
|
|
77
|
-
setSelectedMainMenu(item.text); // Set selected when main menu is clicked
|
|
78
96
|
}
|
|
79
97
|
else if (item.onClick) {
|
|
80
98
|
item.onClick();
|
|
81
|
-
setSelectedMainMenu(item.text);
|
|
99
|
+
setSelectedMainMenu(item.text);
|
|
82
100
|
}
|
|
83
|
-
}, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }), item.subMenu && anchorEl && openMenuIndex === index && (_jsxs(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, anchorOrigin: {
|
|
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: {
|
|
84
102
|
vertical: "top",
|
|
85
103
|
horizontal: "left",
|
|
86
104
|
}, transformOrigin: {
|
|
@@ -90,6 +108,6 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
|
|
|
90
108
|
style: {
|
|
91
109
|
marginLeft: isDrawerOpen ? 230 : 65,
|
|
92
110
|
},
|
|
93
|
-
}, children: [_jsx("span", { className: "submenu-title", children: !isDrawerOpen ? item.text : "" }), item.subMenu.map((subItem) => (_jsx(MenuItem, { onClick: () => handleSubMenuItemClick(subItem.path, item.text), children: subItem.text }, subItem.text)))] }))] }, index))) }) })] }));
|
|
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))) }) })] }));
|
|
94
112
|
}
|
|
95
113
|
export default SideMenu;
|
package/dist/src/sidemenu.scss
CHANGED
|
@@ -1,22 +1,103 @@
|
|
|
1
1
|
//overwritten the default MUI css
|
|
2
2
|
|
|
3
3
|
.MuiBox-root .MuiList-root {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
+
}
|
|
9
89
|
}
|
|
10
|
-
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.app-menu-item {
|
|
11
93
|
.MuiList-root {
|
|
12
94
|
&.MuiMenu-list {
|
|
13
95
|
background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
|
|
14
96
|
color: #fff;
|
|
15
|
-
width:
|
|
97
|
+
width: 200px;
|
|
16
98
|
padding: 10px;
|
|
17
99
|
position: relative;
|
|
18
100
|
overflow: visible;
|
|
19
|
-
|
|
20
101
|
.submenu-title {
|
|
21
102
|
text-transform: uppercase;
|
|
22
103
|
font: 12px / 18px "OpenSans-Regular";
|
|
@@ -24,12 +105,11 @@
|
|
|
24
105
|
padding: 0 0 5px 10px;
|
|
25
106
|
display: block;
|
|
26
107
|
}
|
|
27
|
-
|
|
28
108
|
.MuiMenuItem-root {
|
|
29
109
|
&.Mui-focusVisible {
|
|
30
110
|
background-color: transparent;
|
|
31
111
|
}
|
|
32
|
-
|
|
112
|
+
|
|
33
113
|
&:hover {
|
|
34
114
|
font: 16px/24px "OpenSans-SemiBold";
|
|
35
115
|
background: #374451;
|
|
@@ -37,83 +117,45 @@
|
|
|
37
117
|
}
|
|
38
118
|
}
|
|
39
119
|
}
|
|
40
|
-
|
|
41
|
-
.MuiListItem-root {
|
|
42
|
-
padding: 15px;
|
|
43
|
-
&.selected {
|
|
44
|
-
padding: 7px;
|
|
45
|
-
|
|
46
|
-
.MuiListItemIcon-root {
|
|
47
|
-
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
48
|
-
color: #1e2f97;
|
|
49
|
-
padding: 10px;
|
|
50
|
-
min-width: 25px;
|
|
51
|
-
border-top-left-radius: 5px;
|
|
52
|
-
border-bottom-left-radius: 5px;
|
|
53
|
-
|
|
54
|
-
&:only-of-type {
|
|
55
|
-
border-top-right-radius: 5px;
|
|
56
|
-
border-bottom-right-radius: 5px;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.MuiListItemText-root {
|
|
61
|
-
span {
|
|
62
|
-
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
63
|
-
color: #1e2f97;
|
|
64
|
-
padding: 10px 0;
|
|
65
|
-
min-width: 25px;
|
|
66
|
-
border-top-right-radius: 5px;
|
|
67
|
-
border-bottom-right-radius: 5px;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.MuiListItemIcon-root {
|
|
73
|
-
color: #fff;
|
|
74
|
-
min-width: 30px;
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.MuiListItemText-root {
|
|
79
|
-
margin-top: 0;
|
|
80
|
-
margin-bottom: 0;
|
|
81
|
-
.MuiTypography-root {
|
|
82
|
-
font: 14px/24px "OpenSans-SemiBold";
|
|
83
|
-
color: #fff;
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
white-space: nowrap;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
120
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
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;
|
|
105
136
|
}
|
|
106
137
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.MuiPopover-root {
|
|
141
|
+
.MuiPaper-root {
|
|
142
|
+
overflow: visible;
|
|
143
|
+
position: relative;
|
|
144
|
+
width: max-content;
|
|
114
145
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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
|
+
}
|
|
118
160
|
}
|
|
119
|
-
|
|
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.14",
|
|
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",
|
|
@@ -27,5 +28,5 @@
|
|
|
27
28
|
"type": "git",
|
|
28
29
|
"url": "https://github.com/cullsin/lnc-menu"
|
|
29
30
|
},
|
|
30
|
-
"author": "
|
|
31
|
+
"author": "Raja Kulasekaran <cullsin@gmail.com>"
|
|
31
32
|
}
|