@stack-spot/portal-layout 0.0.34 → 0.0.35
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/Layout.js +1 -1
- package/dist/Layout.js.map +1 -1
- package/dist/components/menu/MenuSections.d.ts.map +1 -1
- package/dist/components/menu/MenuSections.js +3 -9
- package/dist/components/menu/MenuSections.js.map +1 -1
- package/dist/layout.css +12 -21
- package/package.json +1 -1
- package/src/Layout.tsx +1 -1
- package/src/components/menu/MenuSections.tsx +3 -9
- package/src/layout.css +12 -21
package/dist/Layout.js
CHANGED
|
@@ -18,7 +18,7 @@ export const RawLayout = ({ menuSections, menuContent, header, children, extra,
|
|
|
18
18
|
const { layout } = getLayoutElements();
|
|
19
19
|
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact');
|
|
20
20
|
const classes = [
|
|
21
|
-
menuContent ? 'menu-content-visible' : undefined,
|
|
21
|
+
menuContent && !isCompactedOnlyIcons ? 'menu-content-visible' : undefined,
|
|
22
22
|
menuSections ? undefined : 'no-menu-sections',
|
|
23
23
|
className,
|
|
24
24
|
isCompactedOnlyIcons ? 'menu-compact' : undefined,
|
package/dist/Layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAa,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAA+B,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAqBhD,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAC3C,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EACzC,EACV,EAAE;IACF,aAAa;IACb,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,WAAW,EAAE,CAAA;IACjE,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEvE,MAAM,OAAO,GAAG;QACd,WAAW,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAa,MAAM,0BAA0B,CAAA;AACrF,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAA+B,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAqBhD,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAC3C,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EACzC,EACV,EAAE;IACF,aAAa;IACb,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,WAAW,EAAE,CAAA;IACjE,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;IAEvE,MAAM,OAAO,GAAG;QACd,WAAW,IAAI,CAAC,oBAAoB,CAAA,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS;QACxE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB;QAC7C,SAAS;QACT,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;KAClD,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe;YAAE,YAAY,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAA;QACzE,IAAI,OAAO;YAAE,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;IACpD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,KAAC,kBAAkB,cACjB,eAAK,EAAE,EAAE,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,aACtE,QAAQ,IAAI,cAAK,EAAE,EAAE,UAAU,CAAC,IAAI,YACnC,kBAAS,EAAE,EAAE,UAAU,CAAC,OAAO,YAAE,KAAC,aAAa,cAAE,QAAQ,GAAiB,GAAU,GAChF,EACL,KAAK,IAAI,KAAC,mBAAmB,cAAE,KAAK,GAAuB,EAC5D,iBAAO,EAAE,EAAE,UAAU,CAAC,IAAI,aACxB,cAAK,EAAE,EAAE,UAAU,CAAC,WAAW,YAAE,KAAC,mBAAmB,cAAE,WAAW,GAAuB,GAAM,EAC9F,YAAY,IAAI,cAAK,EAAE,EAAE,UAAU,CAAC,YAAY,YAAE,KAAC,mBAAmB,cAAE,YAAY,GAAuB,GAAM,IAC5G,EACP,MAAM,IAAI,iBAAQ,EAAE,EAAE,UAAU,CAAC,MAAM,YAAE,KAAC,mBAAmB,cAAE,MAAM,GAAuB,GAAS,EACtG,cAAK,EAAE,EAAE,UAAU,CAAC,YAAY,EAAE,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,YAAY,GAAiB,GAAM,EACnG,eAAK,EAAE,EAAE,UAAU,CAAC,QAAQ,aAC1B,cAAK,EAAE,EAAE,UAAU,CAAC,UAAU,sBAAa,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,UAAU,GAAiB,GAAM,EAC1G,cAAK,EAAE,EAAE,UAAU,CAAC,KAAK,sBAAa,IAAI,EAAC,QAAQ,YAAC,KAAC,aAAa,cAAE,KAAK,GAAiB,GAAM,IAC5F,EACN,KAAC,OAAO,KAAG,EACX,cAAK,EAAE,EAAE,UAAU,CAAC,sBAAsB,oCAAwB,WAAW,GACvE,IACF,GACa,CACtB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,OAAO,EAA4C,EAAE,EAAE;IACpF,MAAM,WAAW,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IACvE,OAAO,KAAC,WAAW,OAAK,WAAW,GAAI,CAAA;AACzC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CAC9G,KAAC,SAAS,IACR,MAAM,EAAE,KAAC,MAAM,OAAK,MAAM,GAAI,EAC9B,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS,EACpE,WAAW,EAAE,IAAI,CAAC,OAAO;QACvB,CAAC,CAAC,KAAC,mBAAmB,IAA0D,OAAO,EAAE,IAAI,CAAC,OAAO,IAAzE,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAA2B;QACzG,CAAC,CAAC,SAAS,EAEb,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,YAEX,QAAQ,GACC,CACb,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"MenuSections.d.ts","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAA;AAsBhD,wBAAgB,sBAAsB,SAOrC;AAoHD,eAAO,MAAM,YAAY,2BAAiC,SAAS,4CA+FlE,CAAA"}
|
|
@@ -7,7 +7,6 @@ import { getLayoutElements } from '../../elements.js';
|
|
|
7
7
|
import { elementIds } from '../../elements.js';
|
|
8
8
|
import { MenuContent } from './MenuContent.js';
|
|
9
9
|
import { useKeyboardControls } from './use-keyboard-controls.js';
|
|
10
|
-
const ARROW_HEIGHT = 24;
|
|
11
10
|
const HIDE_OVERLAY_DELAY_MS = 400;
|
|
12
11
|
const MENU_OVERLAY_ID = 'menuContentOverlay';
|
|
13
12
|
let hideOverlayTask;
|
|
@@ -61,20 +60,15 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
61
60
|
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact');
|
|
62
61
|
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active));
|
|
63
62
|
}
|
|
64
|
-
function
|
|
63
|
+
function prepareShowOverlay(event) {
|
|
65
64
|
if (!shouldShowOverlay())
|
|
66
65
|
return;
|
|
67
66
|
onOpen?.();
|
|
68
67
|
const anchorElement = event.target;
|
|
69
68
|
const accessibilityButton = anchorElement?.parentElement?.querySelector('button');
|
|
70
69
|
accessibilityButton?.setAttribute('aria-expanded', 'true');
|
|
71
|
-
const rect = anchorElement?.getBoundingClientRect();
|
|
72
|
-
const arrow = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`);
|
|
73
70
|
setCurrentOverlay(id);
|
|
74
71
|
showOverlay();
|
|
75
|
-
if (rect && arrow) {
|
|
76
|
-
arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`;
|
|
77
|
-
}
|
|
78
72
|
}
|
|
79
73
|
function click() {
|
|
80
74
|
if (onClick)
|
|
@@ -82,10 +76,10 @@ const Section = ({ icon, label, href, target, onClick, active, content, customCo
|
|
|
82
76
|
hideOverlayImmediately();
|
|
83
77
|
}
|
|
84
78
|
const labelText = typeof label === 'string' ? label : label.id;
|
|
85
|
-
return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter:
|
|
79
|
+
return (_jsx(_Fragment, { children: _jsxs("li", { title: labelText, className: `section-submenu ${className || ''} ${active ? 'active' : ''}`, children: [_jsx("a", { href: href, target: target, onClick: click, onMouseEnter: prepareShowOverlay, onMouseLeave: () => shouldShowOverlay() && hideOverlay(), title: labelText, "aria-label": labelText, onKeyDown: onClick ? e => e.key === 'Enter' && onClick() : undefined, ...(active ? { 'aria-current': 'page' } : undefined), ...(!href ? { 'tabIndex': 0 } : undefined), children: _jsxs(Flex, { alignItems: "center", justifyContent: "center", px: 5, children: [_jsx(IconBox, { children: icon }), typeof label === 'string' ? _jsx(Text, { appearance: "microtext1", className: "section-label", ml: 3, children: label }) : label.element] }) }), shouldShowOverlay() &&
|
|
86
80
|
_jsx(IconBox, { size: "sm", className: "section-submenu-icon", as: "button", "aria-label": interpolate(t.menuOptions, label), "aria-controls": MENU_OVERLAY_ID, "aria-expanded": false, onKeyDown: (event) => {
|
|
87
81
|
if (event.key === 'Enter') {
|
|
88
|
-
|
|
82
|
+
prepareShowOverlay(event);
|
|
89
83
|
}
|
|
90
84
|
}, children: _jsx(ChevronRight, {}) })] }, labelText) }));
|
|
91
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,MAAM,
|
|
1
|
+
{"version":3,"file":"MenuSections.js","sourceRoot":"","sources":["../../../src/components/menu/MenuSections.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAE5C,IAAI,eAAmC,CAAA;AAEvC,4DAA4D;AAC5D,IAAI,iCAA6C,CAAA;AACjD,IAAI,iCAA6C,CAAA;AAEjD,SAAS,WAAW;IAClB,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAA;AACpF,CAAC;AAED,SAAS,gDAAgD;IACvD,OAAO,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,8BAA8B,CAAC,CAAA;AACxG,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,sBAAsB;IACpC,iCAAiC,EAAE,EAAE,CAAA;IACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAA;IACxD,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAClC,OAAO,EAAE,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;IACxC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IACpC,gDAAgD,EAAE,EAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;AAC5F,CAAC;AAED,SAAS,qBAAqB;IAC5B,IAAI,eAAe,KAAK,SAAS;QAAE,OAAM;IACzC,YAAY,CAAC,eAAe,CAAC,CAAA;IAC7B,eAAe,GAAG,SAAS,CAAA;AAC7B,CAAC;AAED,SAAS,WAAW;IAClB,qBAAqB,EAAE,CAAA;IACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAA;IACxD,OAAO,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IACjC,OAAO,EAAE,eAAe,CAAC,aAAa,CAAC,CAAA;IACvC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACjC,iCAAiC,EAAE,EAAE,CAAA;AACvC,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACzF,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,EAAE,EACF,UAAU,EACV,SAAS,GAGV,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAC3E,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,SAAS,iBAAiB;QACxB;;;;WAIG;QACH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;QACtC,MAAM,oBAAoB,GAAG,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;QACvE,OAAO,oBAAoB,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,CAAC,CAAA;IACjG,CAAC;IAED,SAAS,kBAAkB,CAAC,KAAiF;QAC3G,IAAI,CAAC,iBAAiB,EAAE;YAAE,OAAM;QAChC,MAAM,EAAE,EAAE,CAAA;QACV,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAA;QACjD,MAAM,mBAAmB,GAAG,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAgB,CAAA;QAChG,mBAAmB,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAC1D,iBAAiB,CAAC,EAAE,CAAC,CAAA;QACrB,WAAW,EAAE,CAAA;IACf,CAAC;IAED,SAAS,KAAK;QACZ,IAAI,OAAO;YAAE,OAAO,EAAE,CAAA;QACtB,sBAAsB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAA;IAE9D,OAAO,CACL,4BACE,cAAoB,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,mBAAmB,SAAS,IAAI,EAAE,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,aAC7G,YACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,YAAY,EAAE,kBAAkB,EAChC,YAAY,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,IAAI,WAAW,EAAE,EACxD,KAAK,EAAE,SAAS,gBACJ,SAAS,EACrB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,KAChE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KACjD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAE3C,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,aACrD,KAAC,OAAO,cAAE,IAAI,GAAW,EACxB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,SAAS,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IACrH,GACL,EACH,iBAAiB,EAAE;oBAClB,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,EACjD,EAAE,EAAC,QAAQ,gBACC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,mBAC9B,eAAe,mBACf,KAAK,EACpB,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;4BACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gCAC1B,kBAAkB,CAAC,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC,YACD,KAAC,YAAY,KAAG,GACR,KA9BL,SAAS,CAgCb,GACJ,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,aAAa,EAAkD,EAAE,EAAE;IACrG,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,eAAK,EAAE,EAAC,wBAAwB,kBAAG,aAAa,SAAQ,CAAA;IACjE,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IAChE,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAA;AAClC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACrE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,sEAAsE;IACtE,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAElC,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,UAAmB,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,MAAM;YAAE,OAAM;QACnB,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;QACtC,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,CAAC;gBACtD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAA;YACjD,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;YAC9C,CAAC;QACH,CAAC;QACD,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;IACnC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,2HAA2H;IAC3H,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IAE1E,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAC,OAAO,IAAS,EAAE,EAAE,CAAC,KAAM,CAAC,EAAE,iBAAiB,EAAE,iBAAiB,EAC9F,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,IADX,CAAC,CACc,CAAC,EAC3D,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,SAAS,aAAa;QACpB,gDAAgD,EAAE,EAAE,KAAK,EAAE,CAAA;QAC3D,sBAAsB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,EAAE,yBAAyB,EAAE,UAAU,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,GAAG,mBAAmB,CAAC;QACtH,aAAa;QACb,cAAc,EAAE,4EAA4E;KAC7F,CAAC,CAAA;IAEF,4DAA4D;IAC5D,iCAAiC,GAAG,uBAAuB,CAAA;IAC3D,iCAAiC,GAAG,uBAAuB,CAAA;IAE3D;;;;oDAIgD;IAChD,SAAS,iBAAiB;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,OAAO,IAAI,CAAA;QAC7C,MAAM,8BAA8B,GAAG,CAAC,oBAAoB,EAAE,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,MAAM;YAC/F,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QAC5C,OAAO,8BAA8B;YACnC,CAAC,CAAC,KAAC,eAAe,IAA4D,OAAO,EAAE,KAAK,CAAC,OAAO,EAClG,aAAa,EAAE,KAAK,CAAC,aAAa,IADZ,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CACpC;YACxC,CAAC,CAAC,KAAC,eAAe,IAAsB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,OAAO,EAC/E,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,aAAa,IAD/B,cAAc,CACqB,CAAA;IAC/D,CAAC;IAED,OAAO,CACL,8BACE,uBAAK,YAAY,GAAM,EAEvB,MAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aAC9B,kBAAQ,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAC5G,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,aAC7B,MAAC,OAAO,eACN,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC7B,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IACzB,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,EAAC,WAAW,EAAC,oBAAoB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACnG,EACR,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;wBACrB,YAAG,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAC7D,SAAS,EAAC,iBAAiB,KACvB,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YACpE,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,aAC/C,KAAC,OAAO,kBAAa,CAAC,CAAC,YAAY,YACjC,KAAC,GAAG,KAAG,GACC,EACV,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,YAAG,CAAC,CAAC,QAAQ,GAAQ,IACnD,GACL,IAED,EAEP,eAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,aAC5F,iBAAiB,EAAE,EACpB,cAAK,SAAS,EAAC,OAAO,GAAO,IACzB,IACL,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,MAAM,EAAE,uBAAuB;QAC/B,WAAW,EAAE,sBAAsB;QACnC,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,eAAe;QAC7B,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,MAAM,EAAE,+BAA+B;QACvC,WAAW,EAAE,8BAA8B;QAC3C,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,wBAAwB;QACtC,IAAI,EAAE,UAAU;KACjB;CACmB,CAAA"}
|
package/dist/layout.css
CHANGED
|
@@ -45,7 +45,7 @@ body {
|
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
47
47
|
--menu-animation-duration: 0.3s;
|
|
48
|
-
--menu-overlay-width:
|
|
48
|
+
--menu-overlay-width: 240px;
|
|
49
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -87,7 +87,6 @@ body {
|
|
|
87
87
|
display: flex;
|
|
88
88
|
flex-direction: column;
|
|
89
89
|
background-color: var(--light-300);
|
|
90
|
-
border-top-left-radius: 0.5rem;
|
|
91
90
|
align-items: center;
|
|
92
91
|
padding: 24px;
|
|
93
92
|
transition: left ease-in-out var(--menu-animation-duration);
|
|
@@ -158,10 +157,12 @@ body {
|
|
|
158
157
|
width: var(--menu-sections-width);
|
|
159
158
|
display: flex;
|
|
160
159
|
flex-direction: column;
|
|
161
|
-
padding:
|
|
160
|
+
padding: 0 0 10px;
|
|
162
161
|
justify-content: space-between;
|
|
163
162
|
background-color: var(--light-400);
|
|
164
163
|
position: relative;
|
|
164
|
+
border-right: 1px solid var(--light-300);
|
|
165
|
+
border-top: 1px solid var(--light-300);
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
#menuSections .sections-footer {
|
|
@@ -199,6 +200,7 @@ body {
|
|
|
199
200
|
|
|
200
201
|
#menuSections > ul li.active a {
|
|
201
202
|
background-color: var(--light-500);
|
|
203
|
+
border-right: 1px solid var(--light-300);
|
|
202
204
|
}
|
|
203
205
|
|
|
204
206
|
#menuSections > ul li.active a:before {
|
|
@@ -211,6 +213,7 @@ body {
|
|
|
211
213
|
#menuSections .toggle:focus,
|
|
212
214
|
#menuSections > ul li a:focus {
|
|
213
215
|
background: var(--light-500);
|
|
216
|
+
border-right: 1px solid var(--light-300);
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
#menuSections > ul li:not(.active) a:hover:before {
|
|
@@ -225,11 +228,12 @@ body {
|
|
|
225
228
|
#menuContentOverlay {
|
|
226
229
|
width: var(--menu-overlay-width);
|
|
227
230
|
position: fixed;
|
|
228
|
-
top: calc(var(--header-height)
|
|
229
|
-
left: calc(var(--menu-sections-width)
|
|
230
|
-
bottom:
|
|
231
|
+
top: calc(var(--header-height));
|
|
232
|
+
left: calc(var(--menu-sections-width));
|
|
233
|
+
bottom: 1px;
|
|
231
234
|
background-color: var(--light-500);
|
|
232
|
-
border-radius: 8px;
|
|
235
|
+
border-radius: 0px 8px 8px 0px;
|
|
236
|
+
border-top: 1px solid var(--light-300);
|
|
233
237
|
display: flex;
|
|
234
238
|
flex-direction: column;
|
|
235
239
|
overflow: hidden;
|
|
@@ -249,19 +253,6 @@ body {
|
|
|
249
253
|
overflow: auto;
|
|
250
254
|
}
|
|
251
255
|
|
|
252
|
-
#menuContentOverlay > .arrow {
|
|
253
|
-
width: 0;
|
|
254
|
-
height: 0;
|
|
255
|
-
border-top: 12px solid transparent;
|
|
256
|
-
border-bottom: 12px solid transparent;
|
|
257
|
-
border-right: 12px solid var(--light-500);
|
|
258
|
-
position: fixed;
|
|
259
|
-
/* header + menu sections padding + item height / 2 - arrow height / 2 */
|
|
260
|
-
top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
|
|
261
|
-
left: calc(var(--menu-sections-width) + 3px);
|
|
262
|
-
transition: top ease-out 0.3s;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
256
|
#menuContent {
|
|
266
257
|
width: var(--menu-content-width);
|
|
267
258
|
transition: left ease-out var(--menu-animation-duration);
|
|
@@ -271,7 +262,7 @@ body {
|
|
|
271
262
|
top: 0;
|
|
272
263
|
bottom: 0;
|
|
273
264
|
left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
|
|
274
|
-
border-
|
|
265
|
+
border-top: 1px solid var(--light-300);
|
|
275
266
|
}
|
|
276
267
|
|
|
277
268
|
#layout.menu-content-visible #menuContent {
|
package/package.json
CHANGED
package/src/Layout.tsx
CHANGED
|
@@ -43,7 +43,7 @@ export const RawLayout = (
|
|
|
43
43
|
const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
|
|
44
44
|
|
|
45
45
|
const classes = [
|
|
46
|
-
menuContent ? 'menu-content-visible' : undefined,
|
|
46
|
+
menuContent && !isCompactedOnlyIcons? 'menu-content-visible' : undefined,
|
|
47
47
|
menuSections ? undefined : 'no-menu-sections',
|
|
48
48
|
className,
|
|
49
49
|
isCompactedOnlyIcons ? 'menu-compact' : undefined,
|
|
@@ -8,7 +8,6 @@ import { MenuContent } from './MenuContent'
|
|
|
8
8
|
import { MenuProps, MenuSection } from './types'
|
|
9
9
|
import { useKeyboardControls } from './use-keyboard-controls'
|
|
10
10
|
|
|
11
|
-
const ARROW_HEIGHT = 24
|
|
12
11
|
const HIDE_OVERLAY_DELAY_MS = 400
|
|
13
12
|
const MENU_OVERLAY_ID = 'menuContentOverlay'
|
|
14
13
|
|
|
@@ -86,19 +85,14 @@ const Section = ({
|
|
|
86
85
|
return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
|
|
87
86
|
}
|
|
88
87
|
|
|
89
|
-
function
|
|
88
|
+
function prepareShowOverlay(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
|
|
90
89
|
if (!shouldShowOverlay()) return
|
|
91
90
|
onOpen?.()
|
|
92
91
|
const anchorElement = event.target as HTMLElement
|
|
93
92
|
const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
|
|
94
93
|
accessibilityButton?.setAttribute('aria-expanded', 'true')
|
|
95
|
-
const rect = anchorElement?.getBoundingClientRect()
|
|
96
|
-
const arrow: HTMLElement | null = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`)
|
|
97
94
|
setCurrentOverlay(id)
|
|
98
95
|
showOverlay()
|
|
99
|
-
if (rect && arrow) {
|
|
100
|
-
arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`
|
|
101
|
-
}
|
|
102
96
|
}
|
|
103
97
|
|
|
104
98
|
function click() {
|
|
@@ -115,7 +109,7 @@ const Section = ({
|
|
|
115
109
|
href={href}
|
|
116
110
|
target={target}
|
|
117
111
|
onClick={click}
|
|
118
|
-
onMouseEnter={
|
|
112
|
+
onMouseEnter={prepareShowOverlay}
|
|
119
113
|
onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
|
|
120
114
|
title={labelText}
|
|
121
115
|
aria-label={labelText}
|
|
@@ -136,7 +130,7 @@ const Section = ({
|
|
|
136
130
|
aria-expanded={false}
|
|
137
131
|
onKeyDown={(event) => {
|
|
138
132
|
if (event.key === 'Enter') {
|
|
139
|
-
|
|
133
|
+
prepareShowOverlay(event)
|
|
140
134
|
}
|
|
141
135
|
}}>
|
|
142
136
|
<ChevronRight />
|
package/src/layout.css
CHANGED
|
@@ -45,7 +45,7 @@ body {
|
|
|
45
45
|
--modal-animation-duration: 0.3s;
|
|
46
46
|
--right-panel-animation-duration: 0.3s;
|
|
47
47
|
--menu-animation-duration: 0.3s;
|
|
48
|
-
--menu-overlay-width:
|
|
48
|
+
--menu-overlay-width: 240px;
|
|
49
49
|
--toastify-font-family: 'Roboto', sans-serif;
|
|
50
50
|
}
|
|
51
51
|
|
|
@@ -87,7 +87,6 @@ body {
|
|
|
87
87
|
display: flex;
|
|
88
88
|
flex-direction: column;
|
|
89
89
|
background-color: var(--light-300);
|
|
90
|
-
border-top-left-radius: 0.5rem;
|
|
91
90
|
align-items: center;
|
|
92
91
|
padding: 24px;
|
|
93
92
|
transition: left ease-in-out var(--menu-animation-duration);
|
|
@@ -158,10 +157,12 @@ body {
|
|
|
158
157
|
width: var(--menu-sections-width);
|
|
159
158
|
display: flex;
|
|
160
159
|
flex-direction: column;
|
|
161
|
-
padding:
|
|
160
|
+
padding: 0 0 10px;
|
|
162
161
|
justify-content: space-between;
|
|
163
162
|
background-color: var(--light-400);
|
|
164
163
|
position: relative;
|
|
164
|
+
border-right: 1px solid var(--light-300);
|
|
165
|
+
border-top: 1px solid var(--light-300);
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
#menuSections .sections-footer {
|
|
@@ -199,6 +200,7 @@ body {
|
|
|
199
200
|
|
|
200
201
|
#menuSections > ul li.active a {
|
|
201
202
|
background-color: var(--light-500);
|
|
203
|
+
border-right: 1px solid var(--light-300);
|
|
202
204
|
}
|
|
203
205
|
|
|
204
206
|
#menuSections > ul li.active a:before {
|
|
@@ -211,6 +213,7 @@ body {
|
|
|
211
213
|
#menuSections .toggle:focus,
|
|
212
214
|
#menuSections > ul li a:focus {
|
|
213
215
|
background: var(--light-500);
|
|
216
|
+
border-right: 1px solid var(--light-300);
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
#menuSections > ul li:not(.active) a:hover:before {
|
|
@@ -225,11 +228,12 @@ body {
|
|
|
225
228
|
#menuContentOverlay {
|
|
226
229
|
width: var(--menu-overlay-width);
|
|
227
230
|
position: fixed;
|
|
228
|
-
top: calc(var(--header-height)
|
|
229
|
-
left: calc(var(--menu-sections-width)
|
|
230
|
-
bottom:
|
|
231
|
+
top: calc(var(--header-height));
|
|
232
|
+
left: calc(var(--menu-sections-width));
|
|
233
|
+
bottom: 1px;
|
|
231
234
|
background-color: var(--light-500);
|
|
232
|
-
border-radius: 8px;
|
|
235
|
+
border-radius: 0px 8px 8px 0px;
|
|
236
|
+
border-top: 1px solid var(--light-300);
|
|
233
237
|
display: flex;
|
|
234
238
|
flex-direction: column;
|
|
235
239
|
overflow: hidden;
|
|
@@ -249,19 +253,6 @@ body {
|
|
|
249
253
|
overflow: auto;
|
|
250
254
|
}
|
|
251
255
|
|
|
252
|
-
#menuContentOverlay > .arrow {
|
|
253
|
-
width: 0;
|
|
254
|
-
height: 0;
|
|
255
|
-
border-top: 12px solid transparent;
|
|
256
|
-
border-bottom: 12px solid transparent;
|
|
257
|
-
border-right: 12px solid var(--light-500);
|
|
258
|
-
position: fixed;
|
|
259
|
-
/* header + menu sections padding + item height / 2 - arrow height / 2 */
|
|
260
|
-
top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
|
|
261
|
-
left: calc(var(--menu-sections-width) + 3px);
|
|
262
|
-
transition: top ease-out 0.3s;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
256
|
#menuContent {
|
|
266
257
|
width: var(--menu-content-width);
|
|
267
258
|
transition: left ease-out var(--menu-animation-duration);
|
|
@@ -271,7 +262,7 @@ body {
|
|
|
271
262
|
top: 0;
|
|
272
263
|
bottom: 0;
|
|
273
264
|
left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
|
|
274
|
-
border-
|
|
265
|
+
border-top: 1px solid var(--light-300);
|
|
275
266
|
}
|
|
276
267
|
|
|
277
268
|
#layout.menu-content-visible #menuContent {
|