@cullsin/lnc-menu 5.1.0 → 5.1.1
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 +1 -0
- package/dist/src/SideMenu.d.ts +4 -1
- package/dist/src/SideMenu.js +54 -5
- package/dist/src/sidemenu.scss +69 -103
- package/dist/src/src/sidemenu.scss +42 -22
- package/dist/src/themes.d.ts +30 -0
- package/dist/src/themes.js +68 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as SideMenu } from './src/SideMenu';
|
|
2
|
+
export { getMenuTheme, themeIds } from './src/themes';
|
|
3
|
+
export type { ThemeId, MenuThemeColors } from './src/themes';
|
|
2
4
|
export { getTranslations, en, es } from './src/translations';
|
|
3
5
|
export type { Language, Translations } from './src/translations';
|
|
4
6
|
import './src/sidemenu.scss';
|
package/dist/index.js
CHANGED
package/dist/src/SideMenu.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Location, NavigateFunction } from "react-router-dom";
|
|
3
3
|
import { Language } from "./translations";
|
|
4
|
+
import type { ThemeId } from "./themes";
|
|
4
5
|
interface SideMenuProps {
|
|
5
6
|
useDrawer: () => {
|
|
6
7
|
isDrawerOpen: boolean;
|
|
@@ -10,6 +11,8 @@ interface SideMenuProps {
|
|
|
10
11
|
navigate: NavigateFunction;
|
|
11
12
|
location: Location;
|
|
12
13
|
language?: Language;
|
|
14
|
+
/** Theme id from mgm-linc-patient-ui (default | ocean | forest | sunset). Applies matching colors to the menu. */
|
|
15
|
+
themeId?: ThemeId | string;
|
|
13
16
|
}
|
|
14
|
-
declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, themeId }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
15
18
|
export default SideMenu;
|
package/dist/src/SideMenu.js
CHANGED
|
@@ -10,8 +10,10 @@ import Menu from "@mui/material/Menu";
|
|
|
10
10
|
import MenuItem from "@mui/material/MenuItem";
|
|
11
11
|
import Tooltip from "@mui/material/Tooltip";
|
|
12
12
|
import * as React from "react";
|
|
13
|
+
import { getMenuTheme } from "./themes";
|
|
13
14
|
import { getTranslations } from "./translations";
|
|
14
|
-
function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
15
|
+
function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', themeId }) {
|
|
16
|
+
const theme = React.useMemo(() => getMenuTheme(themeId), [themeId]);
|
|
15
17
|
const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
|
|
16
18
|
const [selectedSubMenuPath, setSelectedSubMenuPath] = React.useState(null);
|
|
17
19
|
const [openMenuIndex, setOpenMenuIndex] = React.useState(null);
|
|
@@ -73,7 +75,21 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
73
75
|
toggleDrawer();
|
|
74
76
|
window.location.href = path;
|
|
75
77
|
};
|
|
76
|
-
|
|
78
|
+
const cssVars = {
|
|
79
|
+
"--menu-list-bg-start": theme.sidebarBgStart,
|
|
80
|
+
"--menu-list-bg-end": theme.sidebarBgEnd,
|
|
81
|
+
"--menu-list-color": theme.white,
|
|
82
|
+
"--menu-selected-bg-start": theme.sidebarSelectedStart,
|
|
83
|
+
"--menu-selected-bg-end": theme.sidebarSelectedEnd,
|
|
84
|
+
"--menu-selected-color": theme.primaryText,
|
|
85
|
+
"--menu-drawer-bg": theme.lightBlueBg,
|
|
86
|
+
"--menu-drawer-border": theme.borderColor,
|
|
87
|
+
"--menu-popover-bg": theme.white,
|
|
88
|
+
"--menu-popover-border": theme.borderGray,
|
|
89
|
+
"--menu-popover-selected": theme.selectedRow,
|
|
90
|
+
"--menu-popover-text": theme.primaryText,
|
|
91
|
+
};
|
|
92
|
+
return (_jsx(Box, { sx: Object.assign({ display: "flex", height: "100%" }, cssVars), children: _jsx(Drawer, { open: isDrawerOpen, variant: "permanent", className: "parent-container", sx: {
|
|
77
93
|
width: isDrawerOpen ? 230 : 64,
|
|
78
94
|
flexShrink: 0,
|
|
79
95
|
"& .MuiDrawer-paper": {
|
|
@@ -81,9 +97,17 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
81
97
|
transition: "width 0.3s ease",
|
|
82
98
|
position: "relative",
|
|
83
99
|
height: "100%",
|
|
84
|
-
|
|
100
|
+
backgroundColor: "var(--menu-drawer-bg)",
|
|
101
|
+
borderRight: "1px solid var(--menu-drawer-border)",
|
|
85
102
|
overflowY: "auto",
|
|
86
103
|
},
|
|
104
|
+
"& .MuiListItem-root": {
|
|
105
|
+
color: "inherit",
|
|
106
|
+
},
|
|
107
|
+
"& .MuiListItemIcon-root": {
|
|
108
|
+
color: "inherit",
|
|
109
|
+
minWidth: 40,
|
|
110
|
+
},
|
|
87
111
|
}, 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) => {
|
|
88
112
|
if (item.subMenu) {
|
|
89
113
|
if (openMenuIndex === index) {
|
|
@@ -111,8 +135,33 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en' }) {
|
|
|
111
135
|
vertical: "top",
|
|
112
136
|
horizontal: "left",
|
|
113
137
|
}, PaperProps: {
|
|
114
|
-
|
|
115
|
-
marginLeft:
|
|
138
|
+
sx: {
|
|
139
|
+
marginLeft: 1,
|
|
140
|
+
// Menu renders in a portal, so set theme vars on Paper for SCSS and children
|
|
141
|
+
"--menu-popover-bg": theme.white,
|
|
142
|
+
"--menu-popover-border": theme.borderGray,
|
|
143
|
+
"--menu-popover-selected": theme.selectedRow,
|
|
144
|
+
"--menu-popover-text": theme.primaryText,
|
|
145
|
+
backgroundColor: theme.white,
|
|
146
|
+
border: `1px solid ${theme.borderGray}`,
|
|
147
|
+
borderRadius: 1,
|
|
148
|
+
"& .MuiMenuItem-root": {
|
|
149
|
+
color: theme.primaryText,
|
|
150
|
+
},
|
|
151
|
+
"& .MuiMenuItem-root:hover": {
|
|
152
|
+
backgroundColor: theme.selectedRow,
|
|
153
|
+
},
|
|
154
|
+
"& .MuiMenuItem-root.Mui-selected": {
|
|
155
|
+
backgroundColor: theme.selectedRow,
|
|
156
|
+
color: theme.primaryText,
|
|
157
|
+
},
|
|
158
|
+
"& .MuiMenuItem-root.Mui-selected:hover": {
|
|
159
|
+
backgroundColor: theme.selectedRow,
|
|
160
|
+
},
|
|
161
|
+
"& .submenu-title": {
|
|
162
|
+
color: theme.primaryText,
|
|
163
|
+
fontWeight: 600,
|
|
164
|
+
},
|
|
116
165
|
},
|
|
117
166
|
}, 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))) }) }) }));
|
|
118
167
|
}
|
package/dist/src/sidemenu.scss
CHANGED
|
@@ -1,138 +1,104 @@
|
|
|
1
1
|
//overwritten the default MUI css
|
|
2
2
|
|
|
3
|
+
// Side menu container
|
|
4
|
+
.side-menu-container {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-shrink: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
.MuiBox-root .MuiList-root {
|
|
4
10
|
background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
|
|
5
11
|
color: #fff;
|
|
6
|
-
height:
|
|
7
|
-
bottom: 0;
|
|
12
|
+
height: 100vh;
|
|
13
|
+
bottom: 0;
|
|
8
14
|
padding: 20px 0;
|
|
15
|
+
overflow-x: hidden;
|
|
9
16
|
}
|
|
10
17
|
|
|
11
18
|
.MuiList-root {
|
|
12
19
|
.MuiListItem-root {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
// Apply capsule layout with gradient permanently for testing
|
|
21
|
+
padding: 8px 12px;
|
|
22
|
+
margin: 12px 6px 0px 6px;
|
|
23
|
+
border-radius: 15px;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
28
|
+
|
|
29
|
+
// Width based on menu open/closed state
|
|
30
|
+
&.menu-closed {
|
|
31
|
+
width: 52px;
|
|
32
|
+
}
|
|
16
33
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
}
|
|
34
|
+
&.menu-open {
|
|
35
|
+
width: 218px;
|
|
36
|
+
}
|
|
30
37
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
38
|
+
// Hover design - override the default background on hover
|
|
39
|
+
&:hover {
|
|
40
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Default state (not hovered and not selected) - transparent background
|
|
44
|
+
&:not(:hover):not(.Mui-selected) {
|
|
45
|
+
background: transparent !important;
|
|
40
46
|
}
|
|
41
47
|
|
|
42
|
-
|
|
43
|
-
|
|
48
|
+
// Selected state - same as hover design
|
|
49
|
+
&.Mui-selected {
|
|
50
|
+
background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
|
|
51
|
+
}
|
|
44
52
|
|
|
45
|
-
|
|
46
|
-
|
|
53
|
+
// Normalize all icons (MUI icons and custom SVGs)
|
|
54
|
+
.MuiListItemIcon-root {
|
|
55
|
+
color: #1e2f97;
|
|
56
|
+
min-width: auto;
|
|
57
|
+
margin-right: 0;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
|
|
63
|
+
// Ensure consistent icon sizing for both MUI icons and custom SVGs
|
|
64
|
+
svg,
|
|
65
|
+
.MuiSvgIcon-root {
|
|
66
|
+
width: 24px;
|
|
67
|
+
height: 25px;
|
|
68
|
+
display: block;
|
|
69
|
+
fill: #1e2f97;
|
|
47
70
|
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
71
|
}
|
|
72
|
+
}
|
|
58
73
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
border-bottom-right-radius: 5px;
|
|
66
|
-
}
|
|
67
|
-
.MuiTypography-root {
|
|
68
|
-
color: #1e2f97;
|
|
69
|
-
}
|
|
74
|
+
// Icon color changes on hover (white when not hovered and not selected)
|
|
75
|
+
&:not(:hover):not(.Mui-selected) .MuiListItemIcon-root {
|
|
76
|
+
svg,
|
|
77
|
+
.MuiSvgIcon-root {
|
|
78
|
+
fill: #fff;
|
|
79
|
+
color: #fff;
|
|
70
80
|
}
|
|
71
81
|
}
|
|
72
82
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
cursor: pointer;
|
|
83
|
+
// Add margin-right to icon only when text is visible
|
|
84
|
+
.MuiListItemIcon-root + .MuiListItemText-root {
|
|
85
|
+
margin-left: 8px;
|
|
77
86
|
}
|
|
78
87
|
|
|
79
88
|
.MuiListItemText-root {
|
|
80
|
-
margin
|
|
81
|
-
|
|
89
|
+
margin: 0;
|
|
90
|
+
|
|
82
91
|
.MuiTypography-root {
|
|
83
92
|
font: 14px/24px "OpenSans-SemiBold";
|
|
84
|
-
color: #
|
|
93
|
+
color: #1e2f97;
|
|
85
94
|
cursor: pointer;
|
|
86
95
|
white-space: nowrap;
|
|
87
96
|
}
|
|
88
97
|
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
98
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
&.MuiMenu-list {
|
|
95
|
-
background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
|
|
99
|
+
// Text color changes on hover (white when not hovered and not selected)
|
|
100
|
+
&:not(:hover):not(.Mui-selected) .MuiListItemText-root .MuiTypography-root {
|
|
96
101
|
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
102
|
}
|
|
137
103
|
}
|
|
138
104
|
}
|
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
//
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
// Theme-aware: colors from CSS vars (set by SideMenu when themeId is passed). Fallbacks = default theme.
|
|
2
|
+
.parent-container .MuiDrawer-paper .MuiList-root {
|
|
3
|
+
background: linear-gradient(
|
|
4
|
+
to bottom,
|
|
5
|
+
var(--menu-list-bg-start, #1e2f97),
|
|
6
|
+
var(--menu-list-bg-end, #0b1659)
|
|
7
|
+
) !important;
|
|
8
|
+
color: var(--menu-list-color, #fff);
|
|
6
9
|
height: 100%;
|
|
7
|
-
bottom: 0;
|
|
10
|
+
bottom: 0;
|
|
8
11
|
padding: 20px 0;
|
|
9
12
|
}
|
|
10
13
|
|
|
11
|
-
.MuiList-root {
|
|
14
|
+
.parent-container .MuiList-root {
|
|
12
15
|
.MuiListItem-root {
|
|
13
16
|
padding: 15px;
|
|
14
17
|
&.selected {
|
|
15
18
|
padding: 7px;
|
|
16
19
|
|
|
17
20
|
.MuiListItemIcon-root {
|
|
18
|
-
background: linear-gradient(
|
|
19
|
-
|
|
21
|
+
background: linear-gradient(
|
|
22
|
+
to bottom,
|
|
23
|
+
var(--menu-selected-bg-start, #7ad4f7),
|
|
24
|
+
var(--menu-selected-bg-end, #20a9ef)
|
|
25
|
+
) !important;
|
|
26
|
+
color: var(--menu-selected-color, #1e2f97);
|
|
20
27
|
padding: 10px;
|
|
21
28
|
min-width: 25px;
|
|
22
29
|
border-top-left-radius: 5px;
|
|
@@ -30,7 +37,11 @@
|
|
|
30
37
|
|
|
31
38
|
.MuiListItemText-root {
|
|
32
39
|
span {
|
|
33
|
-
background: linear-gradient(
|
|
40
|
+
background: linear-gradient(
|
|
41
|
+
to bottom,
|
|
42
|
+
var(--menu-selected-bg-start, #7ad4f7),
|
|
43
|
+
var(--menu-selected-bg-end, #20a9ef)
|
|
44
|
+
) !important;
|
|
34
45
|
padding: 10px 0;
|
|
35
46
|
min-width: 25px;
|
|
36
47
|
border-top-right-radius: 5px;
|
|
@@ -43,8 +54,12 @@
|
|
|
43
54
|
padding: 5px 7px;
|
|
44
55
|
|
|
45
56
|
.MuiListItemIcon-root {
|
|
46
|
-
background: linear-gradient(
|
|
47
|
-
|
|
57
|
+
background: linear-gradient(
|
|
58
|
+
to bottom,
|
|
59
|
+
var(--menu-selected-bg-start, #7ad4f7),
|
|
60
|
+
var(--menu-selected-bg-end, #20a9ef)
|
|
61
|
+
) !important;
|
|
62
|
+
color: var(--menu-selected-color, #1e2f97);
|
|
48
63
|
padding: 10px;
|
|
49
64
|
min-width: 25px;
|
|
50
65
|
border-top-left-radius: 5px;
|
|
@@ -58,20 +73,24 @@
|
|
|
58
73
|
|
|
59
74
|
.MuiListItemText-root {
|
|
60
75
|
span {
|
|
61
|
-
background: linear-gradient(
|
|
76
|
+
background: linear-gradient(
|
|
77
|
+
to bottom,
|
|
78
|
+
var(--menu-selected-bg-start, #7ad4f7),
|
|
79
|
+
var(--menu-selected-bg-end, #20a9ef)
|
|
80
|
+
) !important;
|
|
62
81
|
padding: 10px 0;
|
|
63
82
|
min-width: 25px;
|
|
64
83
|
border-top-right-radius: 5px;
|
|
65
84
|
border-bottom-right-radius: 5px;
|
|
66
85
|
}
|
|
67
86
|
.MuiTypography-root {
|
|
68
|
-
color: #1e2f97;
|
|
87
|
+
color: var(--menu-selected-color, #1e2f97);
|
|
69
88
|
}
|
|
70
89
|
}
|
|
71
90
|
}
|
|
72
91
|
|
|
73
92
|
.MuiListItemIcon-root {
|
|
74
|
-
color: #fff;
|
|
93
|
+
color: var(--menu-list-color, #fff);
|
|
75
94
|
min-width: 30px;
|
|
76
95
|
cursor: pointer;
|
|
77
96
|
}
|
|
@@ -81,7 +100,7 @@
|
|
|
81
100
|
margin-bottom: 0;
|
|
82
101
|
.MuiTypography-root {
|
|
83
102
|
font: 14px/24px "OpenSans-SemiBold";
|
|
84
|
-
color: #fff;
|
|
103
|
+
color: var(--menu-list-color, #fff);
|
|
85
104
|
cursor: pointer;
|
|
86
105
|
white-space: nowrap;
|
|
87
106
|
}
|
|
@@ -92,19 +111,20 @@
|
|
|
92
111
|
.app-menu-item {
|
|
93
112
|
.MuiList-root {
|
|
94
113
|
&.MuiMenu-list {
|
|
95
|
-
background:
|
|
96
|
-
color: #
|
|
114
|
+
background: var(--menu-popover-bg, #fff) !important;
|
|
115
|
+
color: var(--menu-popover-text, #1e2f97);
|
|
97
116
|
width: 200px;
|
|
98
117
|
padding: 10px;
|
|
99
118
|
position: relative;
|
|
100
119
|
overflow: visible;
|
|
120
|
+
border: 1px solid var(--menu-popover-border, #dadada);
|
|
101
121
|
.submenu-title {
|
|
102
122
|
text-transform: uppercase;
|
|
103
123
|
font: 12px / 18px "OpenSans-Regular";
|
|
104
|
-
color: #
|
|
124
|
+
color: var(--menu-popover-text, #1e2f97);
|
|
105
125
|
padding: 0 0 5px 10px;
|
|
106
126
|
display: block;
|
|
107
|
-
border-bottom: 1px solid rgba(
|
|
127
|
+
border-bottom: 1px solid var(--menu-popover-border, rgba(0, 0, 0, 0.12));
|
|
108
128
|
margin-bottom: 5px;
|
|
109
129
|
}
|
|
110
130
|
.MuiMenuItem-root {
|
|
@@ -114,7 +134,7 @@
|
|
|
114
134
|
|
|
115
135
|
&:hover {
|
|
116
136
|
font: 16px/24px "OpenSans-SemiBold";
|
|
117
|
-
background: #
|
|
137
|
+
background: var(--menu-popover-selected, #DDF7FF);
|
|
118
138
|
border-radius: 6px;
|
|
119
139
|
}
|
|
120
140
|
}
|
|
@@ -133,7 +153,7 @@
|
|
|
133
153
|
height: 0;
|
|
134
154
|
border-top: 8px solid transparent;
|
|
135
155
|
border-bottom: 8px solid transparent;
|
|
136
|
-
border-right: 8px solid #516578;
|
|
156
|
+
border-right: 8px solid var(--menu-popover-border, #516578);
|
|
137
157
|
z-index: 2;
|
|
138
158
|
}
|
|
139
159
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme colors aligned with mgm-linc-patient-ui (default, ocean, forest, sunset).
|
|
3
|
+
* Used when themeId is passed to SideMenu to reflect the host app's theme.
|
|
4
|
+
*/
|
|
5
|
+
export type ThemeId = "default" | "ocean" | "forest" | "sunset";
|
|
6
|
+
export interface MenuThemeColors {
|
|
7
|
+
/** Primary text and icon color */
|
|
8
|
+
primaryText: string;
|
|
9
|
+
/** Accent / primary actions */
|
|
10
|
+
accentBlue: string;
|
|
11
|
+
/** Drawer/menu background */
|
|
12
|
+
lightBlueBg: string;
|
|
13
|
+
/** Selected item background */
|
|
14
|
+
selectedRow: string;
|
|
15
|
+
/** Borders */
|
|
16
|
+
borderGray: string;
|
|
17
|
+
borderColor: string;
|
|
18
|
+
/** Hover state (derived or from theme) */
|
|
19
|
+
primaryButtonHoverColor: string;
|
|
20
|
+
white: string;
|
|
21
|
+
black: string;
|
|
22
|
+
/** Sidebar list gradient (dark strip) – start and end for theme coherence */
|
|
23
|
+
sidebarBgStart: string;
|
|
24
|
+
sidebarBgEnd: string;
|
|
25
|
+
/** Selected/hover pill gradient in sidebar */
|
|
26
|
+
sidebarSelectedStart: string;
|
|
27
|
+
sidebarSelectedEnd: string;
|
|
28
|
+
}
|
|
29
|
+
export declare function getMenuTheme(themeId: string | undefined): MenuThemeColors;
|
|
30
|
+
export declare const themeIds: ThemeId[];
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
const MENU_THEMES = {
|
|
2
|
+
default: {
|
|
3
|
+
primaryText: "#1E2F97",
|
|
4
|
+
accentBlue: "#1AA7EE",
|
|
5
|
+
lightBlueBg: "#EBEFF5",
|
|
6
|
+
selectedRow: "#DDF7FF",
|
|
7
|
+
borderGray: "#dadada",
|
|
8
|
+
borderColor: "#B5E6FF",
|
|
9
|
+
primaryButtonHoverColor: "#0A8BCC",
|
|
10
|
+
white: "#fff",
|
|
11
|
+
black: "#000",
|
|
12
|
+
sidebarBgStart: "#1E2F97",
|
|
13
|
+
sidebarBgEnd: "#0b1659",
|
|
14
|
+
sidebarSelectedStart: "#7ad4f7",
|
|
15
|
+
sidebarSelectedEnd: "#20a9ef",
|
|
16
|
+
},
|
|
17
|
+
ocean: {
|
|
18
|
+
primaryText: "#0D47A1",
|
|
19
|
+
accentBlue: "#0288D1",
|
|
20
|
+
lightBlueBg: "#E3F2FD",
|
|
21
|
+
selectedRow: "#B3E5FC",
|
|
22
|
+
borderGray: "#B0BEC5",
|
|
23
|
+
borderColor: "#81D4FA",
|
|
24
|
+
primaryButtonHoverColor: "#01579B",
|
|
25
|
+
white: "#fff",
|
|
26
|
+
black: "#263238",
|
|
27
|
+
sidebarBgStart: "#0D47A1",
|
|
28
|
+
sidebarBgEnd: "#01579B",
|
|
29
|
+
sidebarSelectedStart: "#81D4FA",
|
|
30
|
+
sidebarSelectedEnd: "#0288D1",
|
|
31
|
+
},
|
|
32
|
+
forest: {
|
|
33
|
+
primaryText: "#1B5E20",
|
|
34
|
+
accentBlue: "#2E7D32",
|
|
35
|
+
lightBlueBg: "#E8F5E9",
|
|
36
|
+
selectedRow: "#C8E6C9",
|
|
37
|
+
borderGray: "#C8E6C9",
|
|
38
|
+
borderColor: "#A5D6A7",
|
|
39
|
+
primaryButtonHoverColor: "#1B5E20",
|
|
40
|
+
white: "#fff",
|
|
41
|
+
black: "#1B5E20",
|
|
42
|
+
sidebarBgStart: "#1B5E20",
|
|
43
|
+
sidebarBgEnd: "#0d3312",
|
|
44
|
+
sidebarSelectedStart: "#A5D6A7",
|
|
45
|
+
sidebarSelectedEnd: "#2E7D32",
|
|
46
|
+
},
|
|
47
|
+
sunset: {
|
|
48
|
+
primaryText: "#BF360C",
|
|
49
|
+
accentBlue: "#E64A19",
|
|
50
|
+
lightBlueBg: "#FBE9E7",
|
|
51
|
+
selectedRow: "#FFCCBC",
|
|
52
|
+
borderGray: "#D7CCC8",
|
|
53
|
+
borderColor: "#FFAB91",
|
|
54
|
+
primaryButtonHoverColor: "#BF360C",
|
|
55
|
+
white: "#fff",
|
|
56
|
+
black: "#3E2723",
|
|
57
|
+
sidebarBgStart: "#BF360C",
|
|
58
|
+
sidebarBgEnd: "#8B250A",
|
|
59
|
+
sidebarSelectedStart: "#FFAB91",
|
|
60
|
+
sidebarSelectedEnd: "#E64A19",
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
const DEFAULT_THEME_ID = "default";
|
|
64
|
+
export function getMenuTheme(themeId) {
|
|
65
|
+
const id = themeId && themeId in MENU_THEMES ? themeId : DEFAULT_THEME_ID;
|
|
66
|
+
return MENU_THEMES[id];
|
|
67
|
+
}
|
|
68
|
+
export const themeIds = ["default", "ocean", "forest", "sunset"];
|