@equinor/cpl-top-bar-react 0.3.3 → 0.4.0
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.mts +38 -3
- package/dist/index.d.ts +38 -3
- package/dist/index.js +363 -39
- package/dist/index.mjs +364 -41
- package/package.json +5 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
2
4
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
3
5
|
import * as styled_components from 'styled-components';
|
|
4
|
-
import * as react from 'react';
|
|
5
6
|
|
|
6
7
|
interface FeedbackLinkProps {
|
|
7
8
|
link: string;
|
|
@@ -15,6 +16,40 @@ interface FeedbackLinkProps {
|
|
|
15
16
|
*/
|
|
16
17
|
declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
|
|
17
18
|
|
|
19
|
+
type AppUrls = {
|
|
20
|
+
[appName: string]: {
|
|
21
|
+
dev: string;
|
|
22
|
+
test: string;
|
|
23
|
+
prod: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type MenuItems = MenuItem | MenuItemGroup;
|
|
28
|
+
type MenuItem = {
|
|
29
|
+
name: string;
|
|
30
|
+
url?: string;
|
|
31
|
+
external?: boolean;
|
|
32
|
+
appName?: string;
|
|
33
|
+
};
|
|
34
|
+
type MenuItemGroup = {
|
|
35
|
+
title: string;
|
|
36
|
+
items: MenuItem[];
|
|
37
|
+
isExpanded?: boolean;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
type SideMenuProps = {
|
|
41
|
+
isOpen: boolean;
|
|
42
|
+
onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
43
|
+
mainMenuItems: MenuItems[];
|
|
44
|
+
currentEnvironment: string;
|
|
45
|
+
appUrls: AppUrls;
|
|
46
|
+
titleOtherMenuItems?: string;
|
|
47
|
+
otherMenuItems?: MenuItems[];
|
|
48
|
+
logoElement?: JSX.Element;
|
|
49
|
+
versionInfo?: React__default.ReactNode;
|
|
50
|
+
};
|
|
51
|
+
declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
18
53
|
interface TopBarProps {
|
|
19
54
|
appName: string;
|
|
20
55
|
logoLink: string;
|
|
@@ -34,7 +69,7 @@ interface TopBarProps {
|
|
|
34
69
|
* and set the theme to 'dark'.
|
|
35
70
|
*/
|
|
36
71
|
declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
|
|
37
|
-
declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<
|
|
72
|
+
declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
|
|
38
73
|
|
|
39
74
|
interface UserMenuProps {
|
|
40
75
|
logout: string | (() => void);
|
|
@@ -47,4 +82,4 @@ interface UserMenuProps {
|
|
|
47
82
|
}
|
|
48
83
|
declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
|
|
49
84
|
|
|
50
|
-
export { FeedbackLink, StyledLink, TopBar, UserMenu };
|
|
85
|
+
export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
2
4
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
3
5
|
import * as styled_components from 'styled-components';
|
|
4
|
-
import * as react from 'react';
|
|
5
6
|
|
|
6
7
|
interface FeedbackLinkProps {
|
|
7
8
|
link: string;
|
|
@@ -15,6 +16,40 @@ interface FeedbackLinkProps {
|
|
|
15
16
|
*/
|
|
16
17
|
declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
|
|
17
18
|
|
|
19
|
+
type AppUrls = {
|
|
20
|
+
[appName: string]: {
|
|
21
|
+
dev: string;
|
|
22
|
+
test: string;
|
|
23
|
+
prod: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type MenuItems = MenuItem | MenuItemGroup;
|
|
28
|
+
type MenuItem = {
|
|
29
|
+
name: string;
|
|
30
|
+
url?: string;
|
|
31
|
+
external?: boolean;
|
|
32
|
+
appName?: string;
|
|
33
|
+
};
|
|
34
|
+
type MenuItemGroup = {
|
|
35
|
+
title: string;
|
|
36
|
+
items: MenuItem[];
|
|
37
|
+
isExpanded?: boolean;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
type SideMenuProps = {
|
|
41
|
+
isOpen: boolean;
|
|
42
|
+
onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
43
|
+
mainMenuItems: MenuItems[];
|
|
44
|
+
currentEnvironment: string;
|
|
45
|
+
appUrls: AppUrls;
|
|
46
|
+
titleOtherMenuItems?: string;
|
|
47
|
+
otherMenuItems?: MenuItems[];
|
|
48
|
+
logoElement?: JSX.Element;
|
|
49
|
+
versionInfo?: React__default.ReactNode;
|
|
50
|
+
};
|
|
51
|
+
declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, }: SideMenuProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
18
53
|
interface TopBarProps {
|
|
19
54
|
appName: string;
|
|
20
55
|
logoLink: string;
|
|
@@ -34,7 +69,7 @@ interface TopBarProps {
|
|
|
34
69
|
* and set the theme to 'dark'.
|
|
35
70
|
*/
|
|
36
71
|
declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
|
|
37
|
-
declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<
|
|
72
|
+
declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
|
|
38
73
|
|
|
39
74
|
interface UserMenuProps {
|
|
40
75
|
logout: string | (() => void);
|
|
@@ -47,4 +82,4 @@ interface UserMenuProps {
|
|
|
47
82
|
}
|
|
48
83
|
declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
|
|
49
84
|
|
|
50
|
-
export { FeedbackLink, StyledLink, TopBar, UserMenu };
|
|
85
|
+
export { FeedbackLink, SideMenu, StyledLink, TopBar, UserMenu };
|
package/dist/index.js
CHANGED
|
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
FeedbackLink: () => FeedbackLink,
|
|
34
|
+
SideMenu: () => SideMenu,
|
|
34
35
|
StyledLink: () => StyledLink,
|
|
35
36
|
TopBar: () => TopBar,
|
|
36
37
|
UserMenu: () => UserMenu
|
|
@@ -96,6 +97,10 @@ var AppNameContainer = import_styled_components.default.div`
|
|
|
96
97
|
display: flex;
|
|
97
98
|
gap: 1rem;
|
|
98
99
|
align-items: center;
|
|
100
|
+
|
|
101
|
+
a {
|
|
102
|
+
text-decoration: none;
|
|
103
|
+
}
|
|
99
104
|
`;
|
|
100
105
|
var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
|
|
101
106
|
color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
|
|
@@ -110,7 +115,6 @@ var StyledLink = import_styled_components.default.a`
|
|
|
110
115
|
display: flex;
|
|
111
116
|
align-items: center;
|
|
112
117
|
gap: 0.3rem;
|
|
113
|
-
text-decoration: none;
|
|
114
118
|
color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
|
|
115
119
|
`;
|
|
116
120
|
|
|
@@ -131,17 +135,336 @@ function FeedbackLink({ link, subject, body }) {
|
|
|
131
135
|
);
|
|
132
136
|
}
|
|
133
137
|
|
|
134
|
-
// src/
|
|
138
|
+
// src/SideMenu/SideMenu.tsx
|
|
139
|
+
var import_eds_core_react5 = require("@equinor/eds-core-react");
|
|
140
|
+
var import_eds_icons4 = require("@equinor/eds-icons");
|
|
141
|
+
var import_eds_tokens4 = require("@equinor/eds-tokens");
|
|
142
|
+
var import_react = require("react");
|
|
143
|
+
var import_styled_components4 = __toESM(require("styled-components"));
|
|
144
|
+
|
|
145
|
+
// src/SideMenu/components/MenuList.tsx
|
|
146
|
+
var import_eds_core_react4 = require("@equinor/eds-core-react");
|
|
147
|
+
var import_eds_tokens3 = require("@equinor/eds-tokens");
|
|
148
|
+
var import_styled_components3 = require("styled-components");
|
|
149
|
+
|
|
150
|
+
// src/SideMenu/components/MenuLink.tsx
|
|
135
151
|
var import_eds_core_react3 = require("@equinor/eds-core-react");
|
|
136
152
|
var import_eds_icons3 = require("@equinor/eds-icons");
|
|
137
153
|
var import_eds_tokens2 = require("@equinor/eds-tokens");
|
|
138
|
-
var
|
|
139
|
-
var import_styled_components2 =
|
|
154
|
+
var import_navigation = require("next/navigation");
|
|
155
|
+
var import_styled_components2 = require("styled-components");
|
|
156
|
+
|
|
157
|
+
// src/SideMenu/useAppUrlByNameAndEnvironment.ts
|
|
158
|
+
function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
|
|
159
|
+
if (!currentEnvironment || !appName) return "";
|
|
160
|
+
if (currentEnvironment === "local") {
|
|
161
|
+
currentEnvironment = "dev";
|
|
162
|
+
}
|
|
163
|
+
const configByEnvironment = appUrls[appName];
|
|
164
|
+
const appUrlInCurrentEnvironment = configByEnvironment[currentEnvironment];
|
|
165
|
+
return appUrlInCurrentEnvironment || "";
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// src/SideMenu/components/MenuLink.tsx
|
|
140
169
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
170
|
+
function MenuLink({
|
|
171
|
+
item,
|
|
172
|
+
environment,
|
|
173
|
+
appUrls,
|
|
174
|
+
linkComponent: LinkComponent
|
|
175
|
+
}) {
|
|
176
|
+
var _a, _b;
|
|
177
|
+
const urlByNameAndEnvironment = (_a = useAppUrlByNameAndEnvironment(item.appName, environment, appUrls)) != null ? _a : "";
|
|
178
|
+
const url = (_b = item == null ? void 0 : item.url) != null ? _b : urlByNameAndEnvironment;
|
|
179
|
+
const pathName = (0, import_navigation.usePathname)();
|
|
180
|
+
let isActive = !item.external && pathName == item.url;
|
|
181
|
+
const linkContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
|
|
182
|
+
item.name,
|
|
183
|
+
item.external && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Icon, { data: import_eds_icons3.external_link, size: 16 })
|
|
184
|
+
] });
|
|
185
|
+
if (item.external) {
|
|
186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
|
|
187
|
+
}
|
|
188
|
+
if (LinkComponent) {
|
|
189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
190
|
+
StyledLink2,
|
|
191
|
+
{
|
|
192
|
+
as: LinkComponent,
|
|
193
|
+
to: url,
|
|
194
|
+
href: url,
|
|
195
|
+
$active: isActive,
|
|
196
|
+
children: linkContent
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
|
|
201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledLink2, { href: url, $active: isActive, children: linkContent });
|
|
202
|
+
}
|
|
203
|
+
var StyledLink2 = import_styled_components2.styled.a`
|
|
204
|
+
text-decoration: none;
|
|
205
|
+
padding: 12px 16px 12px 19px;
|
|
206
|
+
display: inline-block;
|
|
207
|
+
width: 100%;
|
|
208
|
+
color: ${import_eds_tokens2.tokens.colors.interactive.secondary__resting.rgba};
|
|
209
|
+
background-color: ${({ $active }) => $active ? import_eds_tokens2.tokens.colors.interactive.primary__selected_highlight.rgba : "transparent"};
|
|
210
|
+
font-weight: ${({ $active }) => $active ? 700 : 400};
|
|
211
|
+
|
|
212
|
+
&:hover {
|
|
213
|
+
//TODO: check hover color for dark theme with designer when back
|
|
214
|
+
background: var(--cpl-sidebar-hover-color);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&:focus-visible {
|
|
218
|
+
outline-offset: -2px;
|
|
219
|
+
}
|
|
220
|
+
`;
|
|
221
|
+
|
|
222
|
+
// src/SideMenu/components/MenuList.tsx
|
|
223
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
224
|
+
function MenuList({ items, currentEnvironment, appUrls, onToggleMenuGroup }) {
|
|
225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { children: items.map((menuItem) => {
|
|
226
|
+
if (isMenuItemGroup(menuItem)) {
|
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
|
|
228
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
|
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react4.Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
230
|
+
MenuLink,
|
|
231
|
+
{
|
|
232
|
+
item,
|
|
233
|
+
environment: currentEnvironment,
|
|
234
|
+
appUrls
|
|
235
|
+
}
|
|
236
|
+
) }, menuItem.title + "-" + item.name)) }) })
|
|
237
|
+
] }, menuItem.title) }, menuItem.title) }, menuItem.title);
|
|
238
|
+
} else {
|
|
239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuLink, { item: menuItem, environment: currentEnvironment, appUrls }) }, menuItem.name);
|
|
240
|
+
}
|
|
241
|
+
}) });
|
|
242
|
+
}
|
|
243
|
+
function isMenuItemGroup(item) {
|
|
244
|
+
return typeof item === "object" && "title" in item && "items" in item;
|
|
245
|
+
}
|
|
246
|
+
var AccordionItem = (0, import_styled_components3.styled)(import_eds_core_react4.Accordion.Item)`
|
|
247
|
+
a {
|
|
248
|
+
display: block;
|
|
249
|
+
padding: 12px ${import_eds_tokens3.tokens.spacings.comfortable.medium} 12px ${import_eds_tokens3.tokens.spacings.comfortable.x_large};
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
a span {
|
|
253
|
+
align-items: center;
|
|
254
|
+
display: flex;
|
|
255
|
+
gap: 1rem;
|
|
256
|
+
justify-content: space-between;
|
|
257
|
+
font-size: 0.875rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
h2 {
|
|
261
|
+
background: transparent;
|
|
262
|
+
border: 0;
|
|
263
|
+
color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
h2 + div {
|
|
267
|
+
background: transparent;
|
|
268
|
+
border: 0;
|
|
269
|
+
padding: 0;
|
|
270
|
+
min-height: 3.5rem;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
h2 button svg {
|
|
274
|
+
width: 14px;
|
|
275
|
+
height: 14px;
|
|
276
|
+
margin-right: ${import_eds_tokens3.tokens.spacings.comfortable.x_small};
|
|
277
|
+
transform: rotate(-90deg);
|
|
278
|
+
fill: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
h2 button span {
|
|
282
|
+
color: ${import_eds_tokens3.tokens.colors.interactive.secondary__resting.rgba};
|
|
283
|
+
font-weight: 700;
|
|
284
|
+
font-size: 0.875rem;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
h2 button[aria-expanded='true'] svg {
|
|
288
|
+
transform: rotate(180deg);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
li a svg {
|
|
292
|
+
opacity: 60%;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
h2 button:hover,
|
|
296
|
+
li a:hover {
|
|
297
|
+
background-color: var(--cpl-sidebar-hover-color);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
h2 button:focus-visible {
|
|
301
|
+
outline-offset: -2px;
|
|
302
|
+
}
|
|
303
|
+
`;
|
|
304
|
+
|
|
305
|
+
// src/SideMenu/SideMenu.tsx
|
|
306
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
307
|
+
function SideMenu({
|
|
308
|
+
isOpen,
|
|
309
|
+
onToggle,
|
|
310
|
+
mainMenuItems,
|
|
311
|
+
logoElement,
|
|
312
|
+
versionInfo,
|
|
313
|
+
currentEnvironment,
|
|
314
|
+
titleOtherMenuItems,
|
|
315
|
+
otherMenuItems,
|
|
316
|
+
appUrls
|
|
317
|
+
}) {
|
|
318
|
+
var _a;
|
|
319
|
+
const width = "268px";
|
|
320
|
+
const [hasOverflow, setHasOverflow] = (0, import_react.useState)(false);
|
|
321
|
+
const [scrolledDown, setScrolledDown] = (0, import_react.useState)(false);
|
|
322
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
323
|
+
const checkOverflow = (0, import_react.useCallback)(() => {
|
|
324
|
+
requestAnimationFrame(() => {
|
|
325
|
+
const element = containerRef.current;
|
|
326
|
+
if (element) {
|
|
327
|
+
setHasOverflow(element.scrollHeight > element.clientHeight);
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
}, []);
|
|
331
|
+
const handleScroll = (0, import_react.useCallback)(() => {
|
|
332
|
+
const element = containerRef.current;
|
|
333
|
+
if (element) {
|
|
334
|
+
setScrolledDown(element.scrollTop > 0);
|
|
335
|
+
}
|
|
336
|
+
}, []);
|
|
337
|
+
(0, import_react.useEffect)(() => {
|
|
338
|
+
checkOverflow();
|
|
339
|
+
window.addEventListener("resize", checkOverflow);
|
|
340
|
+
return () => window.removeEventListener("resize", checkOverflow);
|
|
341
|
+
}, [checkOverflow]);
|
|
342
|
+
(0, import_react.useEffect)(() => {
|
|
343
|
+
const element = containerRef.current;
|
|
344
|
+
if (element) {
|
|
345
|
+
element.addEventListener("scroll", handleScroll);
|
|
346
|
+
handleScroll();
|
|
347
|
+
return () => element.removeEventListener("scroll", handleScroll);
|
|
348
|
+
}
|
|
349
|
+
}, [handleScroll]);
|
|
350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Sidebar, { $isOpen: isOpen, width: isOpen ? width : "", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(InnerWrapper, { ref: containerRef, children: [
|
|
351
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
|
|
352
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
353
|
+
import_eds_core_react5.Button,
|
|
354
|
+
{
|
|
355
|
+
variant: "ghost_icon",
|
|
356
|
+
color: "secondary",
|
|
357
|
+
"aria-label": "Toggle side menu",
|
|
358
|
+
onClick: () => onToggle(!isOpen),
|
|
359
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, { data: import_eds_icons4.collapse, size: 24 })
|
|
360
|
+
}
|
|
361
|
+
) }),
|
|
362
|
+
logoElement,
|
|
363
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { children: [
|
|
364
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
365
|
+
MenuList,
|
|
366
|
+
{
|
|
367
|
+
items: mainMenuItems,
|
|
368
|
+
currentEnvironment,
|
|
369
|
+
appUrls,
|
|
370
|
+
onToggleMenuGroup: checkOverflow
|
|
371
|
+
}
|
|
372
|
+
),
|
|
373
|
+
otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
374
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, {}),
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
377
|
+
import_eds_core_react5.Typography,
|
|
378
|
+
{
|
|
379
|
+
variant: "label",
|
|
380
|
+
group: "navigation",
|
|
381
|
+
as: "h2",
|
|
382
|
+
style: {
|
|
383
|
+
color: import_eds_tokens4.tokens.colors.interactive.secondary__resting.rgba,
|
|
384
|
+
padding: "12px 19px 4px 19px"
|
|
385
|
+
},
|
|
386
|
+
children: (_a = titleOtherMenuItems == null ? void 0 : titleOtherMenuItems.toUpperCase()) != null ? _a : "OTHER SOLUTIONS"
|
|
387
|
+
}
|
|
388
|
+
),
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
390
|
+
MenuList,
|
|
391
|
+
{
|
|
392
|
+
items: otherMenuItems,
|
|
393
|
+
currentEnvironment,
|
|
394
|
+
appUrls,
|
|
395
|
+
onToggleMenuGroup: checkOverflow
|
|
396
|
+
}
|
|
397
|
+
)
|
|
398
|
+
] })
|
|
399
|
+
] })
|
|
400
|
+
] }),
|
|
401
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledDivider, {})
|
|
402
|
+
] }),
|
|
403
|
+
versionInfo
|
|
404
|
+
] }) });
|
|
405
|
+
}
|
|
406
|
+
var StyledDivider = (0, import_styled_components4.default)(import_eds_core_react5.Divider)`
|
|
407
|
+
background-color: var(--cpl-divider-color);
|
|
408
|
+
margin: 8px 0;
|
|
409
|
+
`;
|
|
410
|
+
var Sidebar = import_styled_components4.default.div`
|
|
411
|
+
width: ${(props) => props.$isOpen ? props.width : "0px"};
|
|
412
|
+
opacity: ${(props) => props.$isOpen ? 1 : 0};
|
|
413
|
+
transition:
|
|
414
|
+
width 0.5s,
|
|
415
|
+
opacity 0.5s;
|
|
416
|
+
height: 100%;
|
|
417
|
+
overflow: hidden;
|
|
418
|
+
position: relative;
|
|
419
|
+
z-index: 0;
|
|
420
|
+
|
|
421
|
+
ul {
|
|
422
|
+
list-style-type: none;
|
|
423
|
+
margin: 0;
|
|
424
|
+
padding: 0;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
*,
|
|
428
|
+
*::before,
|
|
429
|
+
*::after {
|
|
430
|
+
box-sizing: border-box;
|
|
431
|
+
}
|
|
432
|
+
`;
|
|
433
|
+
var InnerWrapper = import_styled_components4.default.div`
|
|
434
|
+
overflow: auto;
|
|
435
|
+
background: var(--cpl-ui-background-temporary-nav);
|
|
436
|
+
padding: 0;
|
|
437
|
+
height: 100%;
|
|
438
|
+
width: ${(props) => props.width};
|
|
439
|
+
position: fixed;
|
|
440
|
+
display: flex;
|
|
441
|
+
flex-direction: column;
|
|
442
|
+
justify-content: space-between;
|
|
443
|
+
border-right: 1px solid var(--cpl-sidebar-border-color);
|
|
444
|
+
border-bottom: 1px solid var(--cpl-sidebar-border-color);
|
|
445
|
+
`;
|
|
446
|
+
var StickyCloseButton = import_styled_components4.default.div`
|
|
447
|
+
z-index: 10;
|
|
448
|
+
position: sticky;
|
|
449
|
+
top: 0;
|
|
450
|
+
display: flex;
|
|
451
|
+
justify-content: flex-end;
|
|
452
|
+
padding: ${import_eds_tokens4.tokens.spacings.comfortable.xx_small};
|
|
453
|
+
background-color: var(--cpl-ui-background-temporary-nav);
|
|
454
|
+
border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
|
|
455
|
+
`;
|
|
456
|
+
|
|
457
|
+
// src/UserMenu/UserMenu.tsx
|
|
458
|
+
var import_eds_core_react6 = require("@equinor/eds-core-react");
|
|
459
|
+
var import_eds_icons5 = require("@equinor/eds-icons");
|
|
460
|
+
var import_eds_tokens5 = require("@equinor/eds-tokens");
|
|
461
|
+
var import_react2 = require("react");
|
|
462
|
+
var import_styled_components5 = __toESM(require("styled-components"));
|
|
463
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
141
464
|
function UserMenu({ user, logout, settingsLink, children }) {
|
|
142
465
|
var _a, _b, _c, _d, _e;
|
|
143
|
-
const [isOpen, setIsOpen] = (0,
|
|
144
|
-
const [anchorEl, setAnchorEl] = (0,
|
|
466
|
+
const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
|
|
467
|
+
const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
|
|
145
468
|
const openMenu = () => {
|
|
146
469
|
setIsOpen(true);
|
|
147
470
|
};
|
|
@@ -150,20 +473,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
150
473
|
};
|
|
151
474
|
const LogOutMenuItem = () => {
|
|
152
475
|
if (typeof logout === "string") {
|
|
153
|
-
return /* @__PURE__ */ (0,
|
|
154
|
-
/* @__PURE__ */ (0,
|
|
155
|
-
/* @__PURE__ */ (0,
|
|
476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
|
|
477
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
|
|
478
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Log out" })
|
|
156
479
|
] });
|
|
157
480
|
} else {
|
|
158
|
-
return /* @__PURE__ */ (0,
|
|
159
|
-
/* @__PURE__ */ (0,
|
|
160
|
-
/* @__PURE__ */ (0,
|
|
481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
|
|
482
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.log_out }),
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Log out" })
|
|
161
484
|
] });
|
|
162
485
|
}
|
|
163
486
|
};
|
|
164
487
|
const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
|
|
165
|
-
return /* @__PURE__ */ (0,
|
|
166
|
-
/* @__PURE__ */ (0,
|
|
488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
167
490
|
StyledUserButton,
|
|
168
491
|
{
|
|
169
492
|
id: "user-button",
|
|
@@ -176,7 +499,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
176
499
|
children: firstLetter
|
|
177
500
|
}
|
|
178
501
|
),
|
|
179
|
-
/* @__PURE__ */ (0,
|
|
502
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
180
503
|
MenuWrapper,
|
|
181
504
|
{
|
|
182
505
|
id: "user-menu",
|
|
@@ -186,16 +509,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
186
509
|
anchorEl,
|
|
187
510
|
style: { padding: 0, paddingBottom: 2 },
|
|
188
511
|
children: [
|
|
189
|
-
/* @__PURE__ */ (0,
|
|
190
|
-
/* @__PURE__ */ (0,
|
|
191
|
-
isOpen && /* @__PURE__ */ (0,
|
|
192
|
-
/* @__PURE__ */ (0,
|
|
193
|
-
/* @__PURE__ */ (0,
|
|
512
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(IconAndTextWrapper, { children: [
|
|
513
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LetterCircle, { children: firstLetter }),
|
|
514
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
|
|
515
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
|
|
516
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
|
|
194
517
|
] })
|
|
195
518
|
] }),
|
|
196
|
-
settingsLink && /* @__PURE__ */ (0,
|
|
197
|
-
/* @__PURE__ */ (0,
|
|
198
|
-
/* @__PURE__ */ (0,
|
|
519
|
+
settingsLink && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react6.Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
|
|
520
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons5.settings }),
|
|
521
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Settings" })
|
|
199
522
|
] }),
|
|
200
523
|
LogOutMenuItem(),
|
|
201
524
|
children
|
|
@@ -204,25 +527,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
204
527
|
)
|
|
205
528
|
] });
|
|
206
529
|
}
|
|
207
|
-
var MenuWrapper = (0,
|
|
208
|
-
border-radius: ${
|
|
209
|
-
margin-top: ${
|
|
210
|
-
margin-bottom: -${
|
|
211
|
-
padding-bottom: ${
|
|
530
|
+
var MenuWrapper = (0, import_styled_components5.default)(import_eds_core_react6.Menu)`
|
|
531
|
+
border-radius: ${import_eds_tokens5.tokens.shape.corners.borderRadius};
|
|
532
|
+
margin-top: ${import_eds_tokens5.tokens.spacings.comfortable.small};
|
|
533
|
+
margin-bottom: -${import_eds_tokens5.tokens.spacings.comfortable.small};
|
|
534
|
+
padding-bottom: ${import_eds_tokens5.tokens.spacings.comfortable.small};
|
|
212
535
|
padding-left: 0;
|
|
213
536
|
padding-right: 0;
|
|
214
|
-
padding-top: ${
|
|
537
|
+
padding-top: ${import_eds_tokens5.tokens.spacings.comfortable.small};
|
|
215
538
|
width: 315px;
|
|
216
539
|
|
|
217
|
-
background: var(--ui-background-temporary-nav, #fff);
|
|
218
|
-
color: ${
|
|
540
|
+
background: var(--cpl-ui-background-temporary-nav, #fff);
|
|
541
|
+
color: ${import_eds_tokens5.tokens.colors.text.static_icons__default.rgba};
|
|
219
542
|
|
|
220
543
|
.menu-item {
|
|
221
544
|
align-items: center;
|
|
222
545
|
display: flex;
|
|
223
|
-
gap: ${
|
|
546
|
+
gap: ${import_eds_tokens5.tokens.spacings.comfortable.medium};
|
|
224
547
|
opacity: 0.85;
|
|
225
|
-
padding: ${
|
|
548
|
+
padding: ${import_eds_tokens5.tokens.spacings.comfortable.small} ${import_eds_tokens5.tokens.spacings.comfortable.large};
|
|
226
549
|
|
|
227
550
|
svg {
|
|
228
551
|
opacity: 0.7;
|
|
@@ -230,14 +553,14 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
|
|
|
230
553
|
&:hover {
|
|
231
554
|
opacity: 1;
|
|
232
555
|
background-color: transparent;
|
|
233
|
-
|
|
556
|
+
|
|
234
557
|
svg {
|
|
235
558
|
opacity: 1;
|
|
236
559
|
}
|
|
237
560
|
}
|
|
238
561
|
}
|
|
239
562
|
`;
|
|
240
|
-
var LetterCircle =
|
|
563
|
+
var LetterCircle = import_styled_components5.default.span`
|
|
241
564
|
align-items: center;
|
|
242
565
|
border-radius: 1000px;
|
|
243
566
|
display: flex;
|
|
@@ -246,16 +569,16 @@ var LetterCircle = import_styled_components2.default.span`
|
|
|
246
569
|
height: 32px;
|
|
247
570
|
justify-content: center;
|
|
248
571
|
width: 32px;
|
|
249
|
-
background-color: ${
|
|
250
|
-
color: ${
|
|
572
|
+
background-color: ${import_eds_tokens5.tokens.colors.interactive.primary__resting.rgba};
|
|
573
|
+
color: ${import_eds_tokens5.tokens.colors.text.static_icons__primary_white.rgba};
|
|
251
574
|
`;
|
|
252
|
-
var StyledUserButton = (0,
|
|
575
|
+
var StyledUserButton = (0, import_styled_components5.default)(import_eds_core_react6.Button)`
|
|
253
576
|
margin-left: 12px;
|
|
254
577
|
font-weight: bold;
|
|
255
578
|
width: 32px;
|
|
256
579
|
height: 32px;
|
|
257
580
|
`;
|
|
258
|
-
var IconAndTextWrapper = (0,
|
|
581
|
+
var IconAndTextWrapper = (0, import_styled_components5.default)(import_eds_core_react6.Menu.Item)`
|
|
259
582
|
display: flex;
|
|
260
583
|
gap: 12px;
|
|
261
584
|
padding: 12px 20px;
|
|
@@ -271,6 +594,7 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
|
|
|
271
594
|
// Annotate the CommonJS export names for ESM import in node:
|
|
272
595
|
0 && (module.exports = {
|
|
273
596
|
FeedbackLink,
|
|
597
|
+
SideMenu,
|
|
274
598
|
StyledLink,
|
|
275
599
|
TopBar,
|
|
276
600
|
UserMenu
|
package/dist/index.mjs
CHANGED
|
@@ -57,6 +57,10 @@ var AppNameContainer = styled.div`
|
|
|
57
57
|
display: flex;
|
|
58
58
|
gap: 1rem;
|
|
59
59
|
align-items: center;
|
|
60
|
+
|
|
61
|
+
a {
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
}
|
|
60
64
|
`;
|
|
61
65
|
var StyledTypography = styled(Typography)`
|
|
62
66
|
color: ${tokens.colors.text.static_icons__default.rgba};
|
|
@@ -71,7 +75,6 @@ var StyledLink = styled.a`
|
|
|
71
75
|
display: flex;
|
|
72
76
|
align-items: center;
|
|
73
77
|
gap: 0.3rem;
|
|
74
|
-
text-decoration: none;
|
|
75
78
|
color: ${tokens.colors.text.static_icons__default.rgba};
|
|
76
79
|
`;
|
|
77
80
|
|
|
@@ -92,17 +95,336 @@ function FeedbackLink({ link, subject, body }) {
|
|
|
92
95
|
);
|
|
93
96
|
}
|
|
94
97
|
|
|
98
|
+
// src/SideMenu/SideMenu.tsx
|
|
99
|
+
import { Button as Button2, Divider, Icon as Icon4, Typography as Typography2 } from "@equinor/eds-core-react";
|
|
100
|
+
import { collapse } from "@equinor/eds-icons";
|
|
101
|
+
import { tokens as tokens4 } from "@equinor/eds-tokens";
|
|
102
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
103
|
+
import styled4 from "styled-components";
|
|
104
|
+
|
|
105
|
+
// src/SideMenu/components/MenuList.tsx
|
|
106
|
+
import { Accordion } from "@equinor/eds-core-react";
|
|
107
|
+
import { tokens as tokens3 } from "@equinor/eds-tokens";
|
|
108
|
+
import { styled as styled3 } from "styled-components";
|
|
109
|
+
|
|
110
|
+
// src/SideMenu/components/MenuLink.tsx
|
|
111
|
+
import { Icon as Icon3 } from "@equinor/eds-core-react";
|
|
112
|
+
import { external_link as external_link2 } from "@equinor/eds-icons";
|
|
113
|
+
import { tokens as tokens2 } from "@equinor/eds-tokens";
|
|
114
|
+
import { usePathname } from "next/navigation";
|
|
115
|
+
import { styled as styled2 } from "styled-components";
|
|
116
|
+
|
|
117
|
+
// src/SideMenu/useAppUrlByNameAndEnvironment.ts
|
|
118
|
+
function useAppUrlByNameAndEnvironment(appName, currentEnvironment, appUrls) {
|
|
119
|
+
if (!currentEnvironment || !appName) return "";
|
|
120
|
+
if (currentEnvironment === "local") {
|
|
121
|
+
currentEnvironment = "dev";
|
|
122
|
+
}
|
|
123
|
+
const configByEnvironment = appUrls[appName];
|
|
124
|
+
const appUrlInCurrentEnvironment = configByEnvironment[currentEnvironment];
|
|
125
|
+
return appUrlInCurrentEnvironment || "";
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// src/SideMenu/components/MenuLink.tsx
|
|
129
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
130
|
+
function MenuLink({
|
|
131
|
+
item,
|
|
132
|
+
environment,
|
|
133
|
+
appUrls,
|
|
134
|
+
linkComponent: LinkComponent
|
|
135
|
+
}) {
|
|
136
|
+
var _a, _b;
|
|
137
|
+
const urlByNameAndEnvironment = (_a = useAppUrlByNameAndEnvironment(item.appName, environment, appUrls)) != null ? _a : "";
|
|
138
|
+
const url = (_b = item == null ? void 0 : item.url) != null ? _b : urlByNameAndEnvironment;
|
|
139
|
+
const pathName = usePathname();
|
|
140
|
+
let isActive = !item.external && pathName == item.url;
|
|
141
|
+
const linkContent = /* @__PURE__ */ jsxs3("span", { children: [
|
|
142
|
+
item.name,
|
|
143
|
+
item.external && /* @__PURE__ */ jsx3(Icon3, { data: external_link2, size: 16 })
|
|
144
|
+
] });
|
|
145
|
+
if (item.external) {
|
|
146
|
+
return /* @__PURE__ */ jsx3(StyledLink2, { href: url, target: "_blank", rel: "noopener noreferrer", children: linkContent });
|
|
147
|
+
}
|
|
148
|
+
if (LinkComponent) {
|
|
149
|
+
return /* @__PURE__ */ jsx3(
|
|
150
|
+
StyledLink2,
|
|
151
|
+
{
|
|
152
|
+
as: LinkComponent,
|
|
153
|
+
to: url,
|
|
154
|
+
href: url,
|
|
155
|
+
$active: isActive,
|
|
156
|
+
children: linkContent
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
isActive = typeof window !== "undefined" ? window.location.pathname === item.url : false;
|
|
161
|
+
return /* @__PURE__ */ jsx3(StyledLink2, { href: url, $active: isActive, children: linkContent });
|
|
162
|
+
}
|
|
163
|
+
var StyledLink2 = styled2.a`
|
|
164
|
+
text-decoration: none;
|
|
165
|
+
padding: 12px 16px 12px 19px;
|
|
166
|
+
display: inline-block;
|
|
167
|
+
width: 100%;
|
|
168
|
+
color: ${tokens2.colors.interactive.secondary__resting.rgba};
|
|
169
|
+
background-color: ${({ $active }) => $active ? tokens2.colors.interactive.primary__selected_highlight.rgba : "transparent"};
|
|
170
|
+
font-weight: ${({ $active }) => $active ? 700 : 400};
|
|
171
|
+
|
|
172
|
+
&:hover {
|
|
173
|
+
//TODO: check hover color for dark theme with designer when back
|
|
174
|
+
background: var(--cpl-sidebar-hover-color);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
&:focus-visible {
|
|
178
|
+
outline-offset: -2px;
|
|
179
|
+
}
|
|
180
|
+
`;
|
|
181
|
+
|
|
182
|
+
// src/SideMenu/components/MenuList.tsx
|
|
183
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
184
|
+
function MenuList({ items, currentEnvironment, appUrls, onToggleMenuGroup }) {
|
|
185
|
+
return /* @__PURE__ */ jsx4("ul", { children: items.map((menuItem) => {
|
|
186
|
+
if (isMenuItemGroup(menuItem)) {
|
|
187
|
+
return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(Accordion, { children: /* @__PURE__ */ jsxs4(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
|
|
188
|
+
/* @__PURE__ */ jsx4(Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
|
|
189
|
+
/* @__PURE__ */ jsx4(Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ jsx4("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
|
|
190
|
+
MenuLink,
|
|
191
|
+
{
|
|
192
|
+
item,
|
|
193
|
+
environment: currentEnvironment,
|
|
194
|
+
appUrls
|
|
195
|
+
}
|
|
196
|
+
) }, menuItem.title + "-" + item.name)) }) })
|
|
197
|
+
] }, menuItem.title) }, menuItem.title) }, menuItem.title);
|
|
198
|
+
} else {
|
|
199
|
+
return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(MenuLink, { item: menuItem, environment: currentEnvironment, appUrls }) }, menuItem.name);
|
|
200
|
+
}
|
|
201
|
+
}) });
|
|
202
|
+
}
|
|
203
|
+
function isMenuItemGroup(item) {
|
|
204
|
+
return typeof item === "object" && "title" in item && "items" in item;
|
|
205
|
+
}
|
|
206
|
+
var AccordionItem = styled3(Accordion.Item)`
|
|
207
|
+
a {
|
|
208
|
+
display: block;
|
|
209
|
+
padding: 12px ${tokens3.spacings.comfortable.medium} 12px ${tokens3.spacings.comfortable.x_large};
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
a span {
|
|
213
|
+
align-items: center;
|
|
214
|
+
display: flex;
|
|
215
|
+
gap: 1rem;
|
|
216
|
+
justify-content: space-between;
|
|
217
|
+
font-size: 0.875rem;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
h2 {
|
|
221
|
+
background: transparent;
|
|
222
|
+
border: 0;
|
|
223
|
+
color: ${tokens3.colors.interactive.secondary__resting.rgba};
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
h2 + div {
|
|
227
|
+
background: transparent;
|
|
228
|
+
border: 0;
|
|
229
|
+
padding: 0;
|
|
230
|
+
min-height: 3.5rem;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
h2 button svg {
|
|
234
|
+
width: 14px;
|
|
235
|
+
height: 14px;
|
|
236
|
+
margin-right: ${tokens3.spacings.comfortable.x_small};
|
|
237
|
+
transform: rotate(-90deg);
|
|
238
|
+
fill: ${tokens3.colors.interactive.secondary__resting.rgba};
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
h2 button span {
|
|
242
|
+
color: ${tokens3.colors.interactive.secondary__resting.rgba};
|
|
243
|
+
font-weight: 700;
|
|
244
|
+
font-size: 0.875rem;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
h2 button[aria-expanded='true'] svg {
|
|
248
|
+
transform: rotate(180deg);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
li a svg {
|
|
252
|
+
opacity: 60%;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
h2 button:hover,
|
|
256
|
+
li a:hover {
|
|
257
|
+
background-color: var(--cpl-sidebar-hover-color);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
h2 button:focus-visible {
|
|
261
|
+
outline-offset: -2px;
|
|
262
|
+
}
|
|
263
|
+
`;
|
|
264
|
+
|
|
265
|
+
// src/SideMenu/SideMenu.tsx
|
|
266
|
+
import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
267
|
+
function SideMenu({
|
|
268
|
+
isOpen,
|
|
269
|
+
onToggle,
|
|
270
|
+
mainMenuItems,
|
|
271
|
+
logoElement,
|
|
272
|
+
versionInfo,
|
|
273
|
+
currentEnvironment,
|
|
274
|
+
titleOtherMenuItems,
|
|
275
|
+
otherMenuItems,
|
|
276
|
+
appUrls
|
|
277
|
+
}) {
|
|
278
|
+
var _a;
|
|
279
|
+
const width = "268px";
|
|
280
|
+
const [hasOverflow, setHasOverflow] = useState(false);
|
|
281
|
+
const [scrolledDown, setScrolledDown] = useState(false);
|
|
282
|
+
const containerRef = useRef(null);
|
|
283
|
+
const checkOverflow = useCallback(() => {
|
|
284
|
+
requestAnimationFrame(() => {
|
|
285
|
+
const element = containerRef.current;
|
|
286
|
+
if (element) {
|
|
287
|
+
setHasOverflow(element.scrollHeight > element.clientHeight);
|
|
288
|
+
}
|
|
289
|
+
});
|
|
290
|
+
}, []);
|
|
291
|
+
const handleScroll = useCallback(() => {
|
|
292
|
+
const element = containerRef.current;
|
|
293
|
+
if (element) {
|
|
294
|
+
setScrolledDown(element.scrollTop > 0);
|
|
295
|
+
}
|
|
296
|
+
}, []);
|
|
297
|
+
useEffect(() => {
|
|
298
|
+
checkOverflow();
|
|
299
|
+
window.addEventListener("resize", checkOverflow);
|
|
300
|
+
return () => window.removeEventListener("resize", checkOverflow);
|
|
301
|
+
}, [checkOverflow]);
|
|
302
|
+
useEffect(() => {
|
|
303
|
+
const element = containerRef.current;
|
|
304
|
+
if (element) {
|
|
305
|
+
element.addEventListener("scroll", handleScroll);
|
|
306
|
+
handleScroll();
|
|
307
|
+
return () => element.removeEventListener("scroll", handleScroll);
|
|
308
|
+
}
|
|
309
|
+
}, [handleScroll]);
|
|
310
|
+
return /* @__PURE__ */ jsx5(Sidebar, { $isOpen: isOpen, width: isOpen ? width : "", children: /* @__PURE__ */ jsxs5(InnerWrapper, { ref: containerRef, children: [
|
|
311
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
312
|
+
/* @__PURE__ */ jsx5(StickyCloseButton, { $showBorder: hasOverflow && scrolledDown, children: /* @__PURE__ */ jsx5(
|
|
313
|
+
Button2,
|
|
314
|
+
{
|
|
315
|
+
variant: "ghost_icon",
|
|
316
|
+
color: "secondary",
|
|
317
|
+
"aria-label": "Toggle side menu",
|
|
318
|
+
onClick: () => onToggle(!isOpen),
|
|
319
|
+
children: /* @__PURE__ */ jsx5(Icon4, { data: collapse, size: 24 })
|
|
320
|
+
}
|
|
321
|
+
) }),
|
|
322
|
+
logoElement,
|
|
323
|
+
/* @__PURE__ */ jsxs5("nav", { children: [
|
|
324
|
+
/* @__PURE__ */ jsx5(
|
|
325
|
+
MenuList,
|
|
326
|
+
{
|
|
327
|
+
items: mainMenuItems,
|
|
328
|
+
currentEnvironment,
|
|
329
|
+
appUrls,
|
|
330
|
+
onToggleMenuGroup: checkOverflow
|
|
331
|
+
}
|
|
332
|
+
),
|
|
333
|
+
otherMenuItems && otherMenuItems.length > 0 && /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
334
|
+
/* @__PURE__ */ jsx5(StyledDivider, {}),
|
|
335
|
+
/* @__PURE__ */ jsxs5("div", { children: [
|
|
336
|
+
/* @__PURE__ */ jsx5(
|
|
337
|
+
Typography2,
|
|
338
|
+
{
|
|
339
|
+
variant: "label",
|
|
340
|
+
group: "navigation",
|
|
341
|
+
as: "h2",
|
|
342
|
+
style: {
|
|
343
|
+
color: tokens4.colors.interactive.secondary__resting.rgba,
|
|
344
|
+
padding: "12px 19px 4px 19px"
|
|
345
|
+
},
|
|
346
|
+
children: (_a = titleOtherMenuItems == null ? void 0 : titleOtherMenuItems.toUpperCase()) != null ? _a : "OTHER SOLUTIONS"
|
|
347
|
+
}
|
|
348
|
+
),
|
|
349
|
+
/* @__PURE__ */ jsx5(
|
|
350
|
+
MenuList,
|
|
351
|
+
{
|
|
352
|
+
items: otherMenuItems,
|
|
353
|
+
currentEnvironment,
|
|
354
|
+
appUrls,
|
|
355
|
+
onToggleMenuGroup: checkOverflow
|
|
356
|
+
}
|
|
357
|
+
)
|
|
358
|
+
] })
|
|
359
|
+
] })
|
|
360
|
+
] }),
|
|
361
|
+
/* @__PURE__ */ jsx5(StyledDivider, {})
|
|
362
|
+
] }),
|
|
363
|
+
versionInfo
|
|
364
|
+
] }) });
|
|
365
|
+
}
|
|
366
|
+
var StyledDivider = styled4(Divider)`
|
|
367
|
+
background-color: var(--cpl-divider-color);
|
|
368
|
+
margin: 8px 0;
|
|
369
|
+
`;
|
|
370
|
+
var Sidebar = styled4.div`
|
|
371
|
+
width: ${(props) => props.$isOpen ? props.width : "0px"};
|
|
372
|
+
opacity: ${(props) => props.$isOpen ? 1 : 0};
|
|
373
|
+
transition:
|
|
374
|
+
width 0.5s,
|
|
375
|
+
opacity 0.5s;
|
|
376
|
+
height: 100%;
|
|
377
|
+
overflow: hidden;
|
|
378
|
+
position: relative;
|
|
379
|
+
z-index: 0;
|
|
380
|
+
|
|
381
|
+
ul {
|
|
382
|
+
list-style-type: none;
|
|
383
|
+
margin: 0;
|
|
384
|
+
padding: 0;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
*,
|
|
388
|
+
*::before,
|
|
389
|
+
*::after {
|
|
390
|
+
box-sizing: border-box;
|
|
391
|
+
}
|
|
392
|
+
`;
|
|
393
|
+
var InnerWrapper = styled4.div`
|
|
394
|
+
overflow: auto;
|
|
395
|
+
background: var(--cpl-ui-background-temporary-nav);
|
|
396
|
+
padding: 0;
|
|
397
|
+
height: 100%;
|
|
398
|
+
width: ${(props) => props.width};
|
|
399
|
+
position: fixed;
|
|
400
|
+
display: flex;
|
|
401
|
+
flex-direction: column;
|
|
402
|
+
justify-content: space-between;
|
|
403
|
+
border-right: 1px solid var(--cpl-sidebar-border-color);
|
|
404
|
+
border-bottom: 1px solid var(--cpl-sidebar-border-color);
|
|
405
|
+
`;
|
|
406
|
+
var StickyCloseButton = styled4.div`
|
|
407
|
+
z-index: 10;
|
|
408
|
+
position: sticky;
|
|
409
|
+
top: 0;
|
|
410
|
+
display: flex;
|
|
411
|
+
justify-content: flex-end;
|
|
412
|
+
padding: ${tokens4.spacings.comfortable.xx_small};
|
|
413
|
+
background-color: var(--cpl-ui-background-temporary-nav);
|
|
414
|
+
border-bottom: ${({ $showBorder }) => $showBorder ? "1px solid var(--cpl-divider-color)" : "0"};
|
|
415
|
+
`;
|
|
416
|
+
|
|
95
417
|
// src/UserMenu/UserMenu.tsx
|
|
96
|
-
import { Button as
|
|
418
|
+
import { Button as Button3, Icon as Icon5, Menu } from "@equinor/eds-core-react";
|
|
97
419
|
import { log_out, settings } from "@equinor/eds-icons";
|
|
98
|
-
import { tokens as
|
|
99
|
-
import { useState } from "react";
|
|
100
|
-
import
|
|
101
|
-
import { Fragment, jsx as
|
|
420
|
+
import { tokens as tokens5 } from "@equinor/eds-tokens";
|
|
421
|
+
import { useState as useState2 } from "react";
|
|
422
|
+
import styled5 from "styled-components";
|
|
423
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
102
424
|
function UserMenu({ user, logout, settingsLink, children }) {
|
|
103
425
|
var _a, _b, _c, _d, _e;
|
|
104
|
-
const [isOpen, setIsOpen] =
|
|
105
|
-
const [anchorEl, setAnchorEl] =
|
|
426
|
+
const [isOpen, setIsOpen] = useState2(false);
|
|
427
|
+
const [anchorEl, setAnchorEl] = useState2(null);
|
|
106
428
|
const openMenu = () => {
|
|
107
429
|
setIsOpen(true);
|
|
108
430
|
};
|
|
@@ -111,20 +433,20 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
111
433
|
};
|
|
112
434
|
const LogOutMenuItem = () => {
|
|
113
435
|
if (typeof logout === "string") {
|
|
114
|
-
return /* @__PURE__ */
|
|
115
|
-
/* @__PURE__ */
|
|
116
|
-
/* @__PURE__ */
|
|
436
|
+
return /* @__PURE__ */ jsxs6(Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
|
|
437
|
+
/* @__PURE__ */ jsx6(Icon5, { data: log_out }),
|
|
438
|
+
/* @__PURE__ */ jsx6("span", { children: "Log out" })
|
|
117
439
|
] });
|
|
118
440
|
} else {
|
|
119
|
-
return /* @__PURE__ */
|
|
120
|
-
/* @__PURE__ */
|
|
121
|
-
/* @__PURE__ */
|
|
441
|
+
return /* @__PURE__ */ jsxs6(Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
|
|
442
|
+
/* @__PURE__ */ jsx6(Icon5, { data: log_out }),
|
|
443
|
+
/* @__PURE__ */ jsx6("span", { children: "Log out" })
|
|
122
444
|
] });
|
|
123
445
|
}
|
|
124
446
|
};
|
|
125
447
|
const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
|
|
126
|
-
return /* @__PURE__ */
|
|
127
|
-
/* @__PURE__ */
|
|
448
|
+
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
|
|
449
|
+
/* @__PURE__ */ jsx6(
|
|
128
450
|
StyledUserButton,
|
|
129
451
|
{
|
|
130
452
|
id: "user-button",
|
|
@@ -137,7 +459,7 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
137
459
|
children: firstLetter
|
|
138
460
|
}
|
|
139
461
|
),
|
|
140
|
-
/* @__PURE__ */
|
|
462
|
+
/* @__PURE__ */ jsxs6(
|
|
141
463
|
MenuWrapper,
|
|
142
464
|
{
|
|
143
465
|
id: "user-menu",
|
|
@@ -147,16 +469,16 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
147
469
|
anchorEl,
|
|
148
470
|
style: { padding: 0, paddingBottom: 2 },
|
|
149
471
|
children: [
|
|
150
|
-
/* @__PURE__ */
|
|
151
|
-
/* @__PURE__ */
|
|
152
|
-
isOpen && /* @__PURE__ */
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
-
/* @__PURE__ */
|
|
472
|
+
/* @__PURE__ */ jsxs6(IconAndTextWrapper, { children: [
|
|
473
|
+
/* @__PURE__ */ jsx6(LetterCircle, { children: firstLetter }),
|
|
474
|
+
isOpen && /* @__PURE__ */ jsxs6("div", { children: [
|
|
475
|
+
/* @__PURE__ */ jsx6("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
|
|
476
|
+
/* @__PURE__ */ jsx6("div", { children: (_e = user == null ? void 0 : user.email) != null ? _e : "-" })
|
|
155
477
|
] })
|
|
156
478
|
] }),
|
|
157
|
-
settingsLink && /* @__PURE__ */
|
|
158
|
-
/* @__PURE__ */
|
|
159
|
-
/* @__PURE__ */
|
|
479
|
+
settingsLink && /* @__PURE__ */ jsxs6(Menu.Item, { as: "a", href: settingsLink, className: "menu-item", children: [
|
|
480
|
+
/* @__PURE__ */ jsx6(Icon5, { data: settings }),
|
|
481
|
+
/* @__PURE__ */ jsx6("span", { children: "Settings" })
|
|
160
482
|
] }),
|
|
161
483
|
LogOutMenuItem(),
|
|
162
484
|
children
|
|
@@ -165,25 +487,25 @@ function UserMenu({ user, logout, settingsLink, children }) {
|
|
|
165
487
|
)
|
|
166
488
|
] });
|
|
167
489
|
}
|
|
168
|
-
var MenuWrapper =
|
|
169
|
-
border-radius: ${
|
|
170
|
-
margin-top: ${
|
|
171
|
-
margin-bottom: -${
|
|
172
|
-
padding-bottom: ${
|
|
490
|
+
var MenuWrapper = styled5(Menu)`
|
|
491
|
+
border-radius: ${tokens5.shape.corners.borderRadius};
|
|
492
|
+
margin-top: ${tokens5.spacings.comfortable.small};
|
|
493
|
+
margin-bottom: -${tokens5.spacings.comfortable.small};
|
|
494
|
+
padding-bottom: ${tokens5.spacings.comfortable.small};
|
|
173
495
|
padding-left: 0;
|
|
174
496
|
padding-right: 0;
|
|
175
|
-
padding-top: ${
|
|
497
|
+
padding-top: ${tokens5.spacings.comfortable.small};
|
|
176
498
|
width: 315px;
|
|
177
499
|
|
|
178
|
-
background: var(--ui-background-temporary-nav, #fff);
|
|
179
|
-
color: ${
|
|
500
|
+
background: var(--cpl-ui-background-temporary-nav, #fff);
|
|
501
|
+
color: ${tokens5.colors.text.static_icons__default.rgba};
|
|
180
502
|
|
|
181
503
|
.menu-item {
|
|
182
504
|
align-items: center;
|
|
183
505
|
display: flex;
|
|
184
|
-
gap: ${
|
|
506
|
+
gap: ${tokens5.spacings.comfortable.medium};
|
|
185
507
|
opacity: 0.85;
|
|
186
|
-
padding: ${
|
|
508
|
+
padding: ${tokens5.spacings.comfortable.small} ${tokens5.spacings.comfortable.large};
|
|
187
509
|
|
|
188
510
|
svg {
|
|
189
511
|
opacity: 0.7;
|
|
@@ -191,14 +513,14 @@ var MenuWrapper = styled2(Menu)`
|
|
|
191
513
|
&:hover {
|
|
192
514
|
opacity: 1;
|
|
193
515
|
background-color: transparent;
|
|
194
|
-
|
|
516
|
+
|
|
195
517
|
svg {
|
|
196
518
|
opacity: 1;
|
|
197
519
|
}
|
|
198
520
|
}
|
|
199
521
|
}
|
|
200
522
|
`;
|
|
201
|
-
var LetterCircle =
|
|
523
|
+
var LetterCircle = styled5.span`
|
|
202
524
|
align-items: center;
|
|
203
525
|
border-radius: 1000px;
|
|
204
526
|
display: flex;
|
|
@@ -207,16 +529,16 @@ var LetterCircle = styled2.span`
|
|
|
207
529
|
height: 32px;
|
|
208
530
|
justify-content: center;
|
|
209
531
|
width: 32px;
|
|
210
|
-
background-color: ${
|
|
211
|
-
color: ${
|
|
532
|
+
background-color: ${tokens5.colors.interactive.primary__resting.rgba};
|
|
533
|
+
color: ${tokens5.colors.text.static_icons__primary_white.rgba};
|
|
212
534
|
`;
|
|
213
|
-
var StyledUserButton =
|
|
535
|
+
var StyledUserButton = styled5(Button3)`
|
|
214
536
|
margin-left: 12px;
|
|
215
537
|
font-weight: bold;
|
|
216
538
|
width: 32px;
|
|
217
539
|
height: 32px;
|
|
218
540
|
`;
|
|
219
|
-
var IconAndTextWrapper =
|
|
541
|
+
var IconAndTextWrapper = styled5(Menu.Item)`
|
|
220
542
|
display: flex;
|
|
221
543
|
gap: 12px;
|
|
222
544
|
padding: 12px 20px;
|
|
@@ -231,6 +553,7 @@ var IconAndTextWrapper = styled2(Menu.Item)`
|
|
|
231
553
|
`;
|
|
232
554
|
export {
|
|
233
555
|
FeedbackLink,
|
|
556
|
+
SideMenu,
|
|
234
557
|
StyledLink,
|
|
235
558
|
TopBar,
|
|
236
559
|
UserMenu
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@equinor/cpl-top-bar-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
],
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@equinor/eds-icons": "^0.21.0",
|
|
13
|
-
"@equinor/eds-tokens": "^0.9.2"
|
|
13
|
+
"@equinor/eds-tokens": "^0.9.2",
|
|
14
|
+
"@equinor/cpl-env-meta-bar-react": "0.1.0"
|
|
14
15
|
},
|
|
15
16
|
"devDependencies": {
|
|
16
17
|
"@equinor/eds-core-react": "^0.42.5",
|
|
@@ -30,7 +31,8 @@
|
|
|
30
31
|
"@equinor/eds-core-react": ">=0.42.1",
|
|
31
32
|
"react": ">=18.2.0",
|
|
32
33
|
"react-dom": ">=18.2.0",
|
|
33
|
-
"styled-components": ">=5.3.11"
|
|
34
|
+
"styled-components": ">=5.3.11",
|
|
35
|
+
"next": ">15.0.0"
|
|
34
36
|
},
|
|
35
37
|
"publishConfig": {
|
|
36
38
|
"access": "public"
|