@cullsin/lnc-menu 3.0.13 → 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.
Files changed (3) hide show
  1. package/dist/src/SideMenu.js +24 -8
  2. package/dist/src/sidemenu.scss +70 -27
  3. 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 * as React from "react";
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,15 +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 DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
13
- import RecentActorsOutlinedIcon from "@mui/icons-material/RecentActorsOutlined";
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
17
18
  const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
18
19
  const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
19
20
  const { isDrawerOpen, toggleDrawer } = useDrawer();
20
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
21
37
  const handleMenuOpen = (event, index) => {
22
38
  setAnchorEl(event.currentTarget);
23
39
  setOpenMenuIndex(index); // Keep track of which menu to open
@@ -33,7 +49,8 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
33
49
  if (isDrawerOpen) {
34
50
  toggleDrawer();
35
51
  }
36
- window.location.href = path;
52
+ // Use navigate for client-side routing instead of window.location.href
53
+ navigate(path);
37
54
  };
38
55
  const menuItems = [
39
56
  {
@@ -76,13 +93,12 @@ function SideMenu({ useDrawer, SampleMgmtIcon, navigate }) {
76
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) => {
77
94
  if (item.subMenu) {
78
95
  handleMenuOpen(event, index);
79
- setSelectedMainMenu(item.text); // Set selected when main menu is clicked
80
96
  }
81
97
  else if (item.onClick) {
82
98
  item.onClick();
83
- setSelectedMainMenu(item.text); // Set selected when a menu is clicked
99
+ setSelectedMainMenu(item.text);
84
100
  }
85
- }, 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: {
86
102
  vertical: "top",
87
103
  horizontal: "left",
88
104
  }, transformOrigin: {
package/dist/src/sidemenu.scss CHANGED
@@ -9,39 +9,38 @@
9
9
  }
10
10
 
11
11
  .MuiList-root {
12
- &.MuiMenu-list {
13
- background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
14
- color: #fff;
15
- width: 200px;
16
- padding: 10px;
17
- position: relative;
18
- overflow: visible;
12
+ .MuiListItem-root {
13
+ padding: 15px;
14
+ &.selected {
15
+ padding: 7px;
19
16
 
20
- .submenu-title {
21
- text-transform: uppercase;
22
- font: 12px / 18px "OpenSans-Regular";
23
- color: #efffff;
24
- padding: 0 0 5px 10px;
25
- display: block;
26
- }
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;
27
24
 
28
- .MuiMenuItem-root {
29
- &.Mui-focusVisible {
30
- background-color: transparent;
25
+ &:only-of-type {
26
+ border-top-right-radius: 5px;
27
+ border-bottom-right-radius: 5px;
28
+ }
31
29
  }
32
30
 
33
- &:hover {
34
- font: 16px/24px "OpenSans-SemiBold";
35
- background: #374451;
36
- border-radius: 6px;
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
+ }
37
39
  }
38
40
  }
39
- }
40
41
 
41
- .MuiListItem-root {
42
- padding: 15px;
43
- &.selected {
44
- padding: 7px;
42
+ &:hover:not(.selected) {
43
+ padding: 5px 7px;
45
44
 
46
45
  .MuiListItemIcon-root {
47
46
  background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
@@ -60,12 +59,14 @@
60
59
  .MuiListItemText-root {
61
60
  span {
62
61
  background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
63
- color: #1e2f97;
64
62
  padding: 10px 0;
65
63
  min-width: 25px;
66
64
  border-top-right-radius: 5px;
67
65
  border-bottom-right-radius: 5px;
68
66
  }
67
+ .MuiTypography-root {
68
+ color: #1e2f97;
69
+ }
69
70
  }
70
71
  }
71
72
 
@@ -88,6 +89,37 @@
88
89
  }
89
90
  }
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
+
91
123
  ul.MuiList-root {
92
124
  &:has(.submenu-title) {
93
125
  &::before {
@@ -115,4 +147,15 @@ ul.MuiList-root {
115
147
 
116
148
  .MuiList-root.MuiMenu-list {
117
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
+ }
118
161
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cullsin/lnc-menu",
3
- "version": "3.0.13",
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": "Your Name <you@example.com>"
31
+ "author": "Raja Kulasekaran <cullsin@gmail.com>"
31
32
  }