@stack-spot/portal-layout 1.0.1 → 1.1.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/CHANGELOG.md +12 -0
- package/dist/components/UserMenu.d.ts.map +1 -1
- package/dist/components/UserMenu.js +3 -1
- package/dist/components/UserMenu.js.map +1 -1
- package/dist/components/menu/MenuContent.d.ts.map +1 -1
- package/dist/components/menu/MenuContent.js +2 -9
- package/dist/components/menu/MenuContent.js.map +1 -1
- package/dist/components/user-menu-manager.d.ts +13 -0
- package/dist/components/user-menu-manager.d.ts.map +1 -0
- package/dist/components/user-menu-manager.js +36 -0
- package/dist/components/user-menu-manager.js.map +1 -0
- package/dist/layout.css +9 -0
- package/package.json +10 -6
- package/src/components/UserMenu.tsx +4 -1
- package/src/components/menu/MenuContent.tsx +4 -11
- package/src/components/user-menu-manager.ts +31 -0
- package/src/layout.css +9 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [1.1.0](https://github.com/stack-spot/portal-commons/compare/portal-layout-v1.0.2...portal-layout@v1.1.0) (2024-06-05)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* Add singleton for handling user menu outside of the component ([6720095](https://github.com/stack-spot/portal-commons/commit/67200959d763eaa6f73fc2eb40b84949dd1194eb))
|
|
9
|
+
* improved accessbility on portal switch ([bcb01c3](https://github.com/stack-spot/portal-commons/commit/bcb01c3b0e68b51bbc63a062b340cc051d08173e))
|
|
10
|
+
* update component and layout ([0d72e00](https://github.com/stack-spot/portal-commons/commit/0d72e00968cf3b3cbb196dec66eedc42c75aacbf))
|
|
11
|
+
* update components and layout ([b82260f](https://github.com/stack-spot/portal-commons/commit/b82260f701d7f0115d9fcda8fec4e310cbc42998))
|
|
12
|
+
* update components and layout ([c1ba398](https://github.com/stack-spot/portal-commons/commit/c1ba398fdfc51aac0b0d8b1b7d5258c6ae857e51))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;
|
|
1
|
+
{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAO/F,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACvC;AAsDD;;;GAGG;AACH,eAAO,MAAM,QAAQ,iCAAkC,KAAK,4CAoC3D,CAAA"}
|
|
@@ -5,8 +5,9 @@ import { Avatar } from '@citric/ui';
|
|
|
5
5
|
import { SelectionList } from '@stack-spot/portal-components/SelectionList';
|
|
6
6
|
import { theme } from '@stack-spot/portal-theme';
|
|
7
7
|
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
8
|
-
import { useState } from 'react';
|
|
8
|
+
import { useEffect, useState } from 'react';
|
|
9
9
|
import { styled } from 'styled-components';
|
|
10
|
+
import { userMenuManager } from './user-menu-manager.js';
|
|
10
11
|
const USER_MENU_ID = 'userMenu';
|
|
11
12
|
const UserMenuBox = styled.div `
|
|
12
13
|
.user-menu-header {
|
|
@@ -57,6 +58,7 @@ const UserMenuHeader = ({ userName, email }) => (_jsxs("div", { className: "user
|
|
|
57
58
|
export const UserMenu = ({ userName, email, options }) => {
|
|
58
59
|
const t = useTranslate(dictionary);
|
|
59
60
|
const [visible, setVisible] = useState(false);
|
|
61
|
+
useEffect(() => userMenuManager.subscribe(setVisible), []);
|
|
60
62
|
return (_jsxs(UserMenuBox, { children: [_jsx(LinkBox, { as: "button", onClick: () => setVisible(v => !v), "aria-controls": USER_MENU_ID, "aria-expanded": visible, "aria-label": interpolate(t.accountMenu, [userName]), children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Avatar, { size: "xs", "aria-label": interpolate(t.accountMenu, [userName]), children: userName }), _jsx(IconBox, { colorIcon: "inverse.500", className: "chevron", style: visible ? { transform: 'rotate(180deg)' } : undefined, children: _jsx(ChevronDown, {}) })] }) }), options?.length
|
|
61
63
|
? _jsx(SelectionList, { id: USER_MENU_ID, visible: visible, before: _jsx(UserMenuHeader, { userName: userName, email: email }), items: options, onHide: () => setVisible(false), maxHeight: "600px" })
|
|
62
64
|
: null] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,aAAa,EAAsB,MAAM,6CAA6C,CAAA;AAC/F,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/components/UserMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"MenuContent.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,UAAU,EAAY,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE7E;;GAEG;AACH,eAAO,MAAM,SAAS,4OAsHrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,kOAIjB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,4DAAsE,UAAU,4CAuBtG,CAAA;AAkDD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,mFAAyF,kBAAkB,4CAwClI,CAAA"}
|
|
@@ -10,14 +10,6 @@ import { styled } from 'styled-components';
|
|
|
10
10
|
import { hideOverlayImmediately } from './MenuSections.js';
|
|
11
11
|
import { PageSelector } from './PageSelector.js';
|
|
12
12
|
import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants.js';
|
|
13
|
-
const BackLink = styled.a `
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: row;
|
|
16
|
-
align-items: center;
|
|
17
|
-
margin: ${PADDING}px;
|
|
18
|
-
margin-bottom: 16px;
|
|
19
|
-
gap: 6px;
|
|
20
|
-
`;
|
|
21
13
|
/**
|
|
22
14
|
* The list (<ul>) used for grouping items in a menu.
|
|
23
15
|
*/
|
|
@@ -190,6 +182,7 @@ function renderOption({ root, ...option }) {
|
|
|
190
182
|
*/
|
|
191
183
|
export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }) => {
|
|
192
184
|
const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options]);
|
|
185
|
+
const Link = useAnchorTag();
|
|
193
186
|
function renderContent() {
|
|
194
187
|
if (loading) {
|
|
195
188
|
return (_jsx(Flex, { justifyContent: "center", alignItems: "center", flex: 1, sx: { padding: '40px' }, children: _jsx(LoadingCircular, {}) }));
|
|
@@ -198,7 +191,7 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
|
|
|
198
191
|
return _jsx(Text, { colorScheme: "danger", children: error });
|
|
199
192
|
return _jsx(MenuGroup, { className: "open root no-indentation", children: items });
|
|
200
193
|
}
|
|
201
|
-
return (_jsxs(_Fragment, { children: [goBack && (_jsxs(
|
|
194
|
+
return (_jsxs(_Fragment, { children: [goBack && (_jsxs(Link, { href: goBack.href, onClick: goBack.onClick, className: "goBackLink", children: [_jsx(IconBox, { colorIcon: "inverse.500", size: "sm", children: _jsx(ArrowLeft, {}) }), typeof goBack?.label === 'string' ?
|
|
202
195
|
_jsx(Text, { appearance: "body2", nowrapEllipsis: true, children: goBack.label }) :
|
|
203
196
|
goBack.label.element] })), title && (_jsxs(Title, { children: [_jsx(Text, { appearance: "overheader1", colorScheme: "primary", sx: { fontSize: '0.75rem', mt: 2, mb: 2 }, children: title }), subtitle && _jsx(Text, { appearance: "h5", children: subtitle })] })), afterTitle, pageSelector && _jsx(PageSelector, { ...pageSelector }), renderContent()] }));
|
|
204
197
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,yBAAyB,IAAI,YAAY,EAAE,oBAAoB,IAAI,OAAO,EAAE,MAAM,aAAa,CAAA;AAGxG
|
|
1
|
+
{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["../../../src/components/menu/MenuContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type UserMenuManagerListeners = (visible: boolean) => void;
|
|
2
|
+
declare class UserMenuManager {
|
|
3
|
+
private visible;
|
|
4
|
+
private observers;
|
|
5
|
+
changeVisible(isVisible: boolean): void;
|
|
6
|
+
isOpen(): boolean;
|
|
7
|
+
subscribe(updateFn: UserMenuManagerListeners): () => void;
|
|
8
|
+
private pullListener;
|
|
9
|
+
private notify;
|
|
10
|
+
}
|
|
11
|
+
export declare const userMenuManager: UserMenuManager;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=user-menu-manager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"user-menu-manager.d.ts","sourceRoot":"","sources":["../../src/components/user-menu-manager.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAI,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAElE,cAAM,eAAe;IACnB,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,SAAS,CAAmC;IAEpD,aAAa,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAKvC,MAAM,IAAI,OAAO;IAIjB,SAAS,CAAC,QAAQ,EAAE,wBAAwB;IAM5C,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,MAAM;CAGf;AAED,eAAO,MAAM,eAAe,iBAAwB,CAAA"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
class UserMenuManager {
|
|
2
|
+
constructor() {
|
|
3
|
+
Object.defineProperty(this, "visible", {
|
|
4
|
+
enumerable: true,
|
|
5
|
+
configurable: true,
|
|
6
|
+
writable: true,
|
|
7
|
+
value: false
|
|
8
|
+
});
|
|
9
|
+
Object.defineProperty(this, "observers", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
configurable: true,
|
|
12
|
+
writable: true,
|
|
13
|
+
value: []
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
changeVisible(isVisible) {
|
|
17
|
+
this.visible = isVisible;
|
|
18
|
+
this.notify();
|
|
19
|
+
}
|
|
20
|
+
isOpen() {
|
|
21
|
+
return this.visible;
|
|
22
|
+
}
|
|
23
|
+
subscribe(updateFn) {
|
|
24
|
+
this.observers.push(updateFn);
|
|
25
|
+
this.notify();
|
|
26
|
+
return () => this.pullListener(updateFn);
|
|
27
|
+
}
|
|
28
|
+
pullListener(updateFn) {
|
|
29
|
+
this.observers = this.observers.filter((obs) => obs !== updateFn);
|
|
30
|
+
}
|
|
31
|
+
notify() {
|
|
32
|
+
this.observers.forEach((updateFn) => updateFn(this.visible));
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
export const userMenuManager = new UserMenuManager();
|
|
36
|
+
//# sourceMappingURL=user-menu-manager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"user-menu-manager.js","sourceRoot":"","sources":["../../src/components/user-menu-manager.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe;IAArB;QACU;;;;mBAAmB,KAAK;WAAA;QACxB;;;;mBAAY,EAAgC;WAAA;IAwBtD,CAAC;IAtBC,aAAa,CAAC,SAAkB;QAC9B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QACxB,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,SAAS,CAAC,QAAkC;QAC1C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7B,IAAI,CAAC,MAAM,EAAE,CAAA;QACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;IAC1C,CAAC;IAEO,YAAY,CAAC,QAAkC;QACrD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAA;IACnE,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;IAC9D,CAAC;CACF;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA"}
|
package/dist/layout.css
CHANGED
|
@@ -265,6 +265,15 @@ body {
|
|
|
265
265
|
border-top: 1px solid var(--light-300);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
+
#menuContent .goBackLink {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-direction: row;
|
|
271
|
+
align-items: center;
|
|
272
|
+
margin: 20px;
|
|
273
|
+
margin-bottom: 16px;
|
|
274
|
+
gap: 6px;
|
|
275
|
+
}
|
|
276
|
+
|
|
268
277
|
#layout.menu-content-visible #menuContent {
|
|
269
278
|
left: var(--menu-sections-width);
|
|
270
279
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "rimraf dist && tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
9
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
10
|
+
},
|
|
7
11
|
"peerDependencies": {
|
|
8
12
|
"@citric/core": "^6.0.0",
|
|
9
13
|
"@citric/icons": "^5.7.1",
|
|
@@ -30,14 +34,14 @@
|
|
|
30
34
|
"eslint-plugin-react": "^7.33.2",
|
|
31
35
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
32
36
|
"eslint-plugin-react-refresh": "^0.4.4",
|
|
37
|
+
"rimraf": "^5.0.7",
|
|
33
38
|
"tsc-esm-fix": "^2.20.26",
|
|
34
|
-
"typescript": "^5.2.2"
|
|
39
|
+
"typescript": "^5.2.2",
|
|
40
|
+
"react": "18.2.0",
|
|
41
|
+
"react-dom": "18.2.0",
|
|
42
|
+
"styled-components": "6.1.10"
|
|
35
43
|
},
|
|
36
44
|
"dependencies": {
|
|
37
45
|
"react-toastify": "^10.0.5"
|
|
38
|
-
},
|
|
39
|
-
"scripts": {
|
|
40
|
-
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
41
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
42
46
|
}
|
|
43
47
|
}
|
|
@@ -4,8 +4,9 @@ import { Avatar } from '@citric/ui'
|
|
|
4
4
|
import { SelectionList, SelectionListProps } from '@stack-spot/portal-components/SelectionList'
|
|
5
5
|
import { theme } from '@stack-spot/portal-theme'
|
|
6
6
|
import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
|
|
7
|
-
import { useState } from 'react'
|
|
7
|
+
import { useEffect, useState } from 'react'
|
|
8
8
|
import { styled } from 'styled-components'
|
|
9
|
+
import { userMenuManager } from './user-menu-manager'
|
|
9
10
|
|
|
10
11
|
interface Props {
|
|
11
12
|
/**
|
|
@@ -82,6 +83,8 @@ export const UserMenu = ({ userName, email, options }: Props) => {
|
|
|
82
83
|
const t = useTranslate(dictionary)
|
|
83
84
|
const [visible, setVisible] = useState(false)
|
|
84
85
|
|
|
86
|
+
useEffect(() => userMenuManager.subscribe(setVisible), [])
|
|
87
|
+
|
|
85
88
|
return (
|
|
86
89
|
<UserMenuBox>
|
|
87
90
|
<LinkBox
|
|
@@ -11,15 +11,6 @@ import { PageSelector } from './PageSelector'
|
|
|
11
11
|
import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
|
|
12
12
|
import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
|
|
13
13
|
|
|
14
|
-
const BackLink = styled.a`
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: row;
|
|
17
|
-
align-items: center;
|
|
18
|
-
margin: ${PADDING}px;
|
|
19
|
-
margin-bottom: 16px;
|
|
20
|
-
gap: 6px;
|
|
21
|
-
`
|
|
22
|
-
|
|
23
14
|
/**
|
|
24
15
|
* The list (<ul>) used for grouping items in a menu.
|
|
25
16
|
*/
|
|
@@ -239,6 +230,8 @@ function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
|
|
|
239
230
|
export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle, options = [], loading, error }: MenuSectionContent) => {
|
|
240
231
|
const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options])
|
|
241
232
|
|
|
233
|
+
const Link = useAnchorTag()
|
|
234
|
+
|
|
242
235
|
function renderContent() {
|
|
243
236
|
if (loading) {
|
|
244
237
|
return (
|
|
@@ -254,14 +247,14 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, afterTitle,
|
|
|
254
247
|
return (
|
|
255
248
|
<>
|
|
256
249
|
{goBack && (
|
|
257
|
-
<
|
|
250
|
+
<Link href={goBack.href} onClick={goBack.onClick} className="goBackLink">
|
|
258
251
|
<IconBox colorIcon="inverse.500" size="sm">
|
|
259
252
|
<ArrowLeft />
|
|
260
253
|
</IconBox>
|
|
261
254
|
{typeof goBack?.label === 'string' ?
|
|
262
255
|
<Text appearance="body2" nowrapEllipsis>{goBack.label}</Text> :
|
|
263
256
|
goBack.label.element}
|
|
264
|
-
</
|
|
257
|
+
</Link>
|
|
265
258
|
)}
|
|
266
259
|
{title && (
|
|
267
260
|
<Title>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export type UserMenuManagerListeners = (visible: boolean) => void
|
|
2
|
+
|
|
3
|
+
class UserMenuManager {
|
|
4
|
+
private visible: boolean = false
|
|
5
|
+
private observers = [] as UserMenuManagerListeners[]
|
|
6
|
+
|
|
7
|
+
changeVisible(isVisible: boolean): void {
|
|
8
|
+
this.visible = isVisible
|
|
9
|
+
this.notify()
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
isOpen(): boolean {
|
|
13
|
+
return this.visible
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
subscribe(updateFn: UserMenuManagerListeners) {
|
|
17
|
+
this.observers.push(updateFn)
|
|
18
|
+
this.notify()
|
|
19
|
+
return () => this.pullListener(updateFn)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
private pullListener(updateFn: UserMenuManagerListeners) {
|
|
23
|
+
this.observers = this.observers.filter((obs) => obs !== updateFn)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
private notify() {
|
|
27
|
+
this.observers.forEach((updateFn) => updateFn(this.visible))
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export const userMenuManager = new UserMenuManager()
|
package/src/layout.css
CHANGED
|
@@ -265,6 +265,15 @@ body {
|
|
|
265
265
|
border-top: 1px solid var(--light-300);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
+
#menuContent .goBackLink {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-direction: row;
|
|
271
|
+
align-items: center;
|
|
272
|
+
margin: 20px;
|
|
273
|
+
margin-bottom: 16px;
|
|
274
|
+
gap: 6px;
|
|
275
|
+
}
|
|
276
|
+
|
|
268
277
|
#layout.menu-content-visible #menuContent {
|
|
269
278
|
left: var(--menu-sections-width);
|
|
270
279
|
}
|