@servicetitan/navigation 11.0.0-canary.237.f92c882.0 → 11.0.0-canary.237.ff793b3.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/components/logo/logo-titan-text.d.ts +1 -1
- package/dist/components/logo/logo-titan-text.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.module.less +2 -0
- package/dist/components/titan-layout/layout-context.js +1 -1
- package/dist/components/titan-layout/layout-context.js.map +1 -1
- package/dist/components/titan-layout/layout-header.module.less +7 -2
- package/dist/components/titan-layout/layout-logo.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-logo.js +2 -1
- package/dist/components/titan-layout/layout-logo.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.js +1 -1
- package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.module.less +9 -2
- package/dist/components/titan-layout/titan-layout.d.ts +5 -3
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +68 -15
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/components/titan-layout/titan-layout.module.less +8 -5
- package/dist/components/titan-layout/titan-layout.stories.d.ts +1 -0
- package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.stories.js +4 -3
- package/dist/components/titan-layout/titan-layout.stories.js.map +1 -1
- package/dist/utils/use-breakpoint.d.ts +1 -0
- package/dist/utils/use-breakpoint.d.ts.map +1 -1
- package/dist/utils/use-breakpoint.js +2 -1
- package/dist/utils/use-breakpoint.js.map +1 -1
- package/package.json +2 -2
- package/src/components/logo/logo-titan-text.tsx +1 -1
- package/src/components/profile-dropdown/profile-dropdown.module.less +2 -0
- package/src/components/titan-layout/layout-context.tsx +1 -1
- package/src/components/titan-layout/layout-header.module.less +7 -2
- package/src/components/titan-layout/layout-logo.tsx +13 -6
- package/src/components/titan-layout/layout-sidebar.module.less +9 -2
- package/src/components/titan-layout/layout-sidebar.tsx +1 -1
- package/src/components/titan-layout/titan-layout.module.less +8 -5
- package/src/components/titan-layout/titan-layout.module.less.d.ts +1 -0
- package/src/components/titan-layout/titan-layout.stories.tsx +7 -3
- package/src/components/titan-layout/titan-layout.tsx +199 -96
- package/src/utils/use-breakpoint.ts +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logo-titan-text.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"logo-titan-text.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo-titan-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AAElG,MAAM,WAAW,cAAc;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAQD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAoBxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAElD,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CAIxD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkBhD,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { createContext, useContext } from 'react';
|
|
|
2
2
|
import { DefaultNavLinkComponent } from '../../utils/navigation-context';
|
|
3
3
|
export const LayoutContext = createContext({
|
|
4
4
|
NavigationComponent: DefaultNavLinkComponent,
|
|
5
|
-
breakpoint: { name: 'lg', isMobile: false },
|
|
5
|
+
breakpoint: { name: 'lg', isMobile: false, width: 0 },
|
|
6
6
|
isTitanLayout: false,
|
|
7
7
|
sidebar: { styles: { popoverContent: {} } },
|
|
8
8
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-context.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAyB,MAAM,gCAAgC,CAAC;AAkBhG,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAyB;IAC/D,mBAAmB,EAAE,uBAAuB;IAC5C,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;
|
|
1
|
+
{"version":3,"file":"layout-context.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAyB,MAAM,gCAAgC,CAAC;AAkBhG,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAyB;IAC/D,mBAAmB,EAAE,uBAAuB;IAC5C,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IACrD,aAAa,EAAE,KAAK;IACpB,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE;CAC9C,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAmC,SAAS,CAAC,CAAC;AACjG,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC"}
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
+
--nav-top-content-height: 32px;
|
|
7
8
|
display: flex;
|
|
8
9
|
justify-content: space-between;
|
|
9
10
|
|
|
10
11
|
background-color: @color-white;
|
|
11
12
|
color: @color-black;
|
|
12
|
-
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
outline: 1px solid @color-neutral-60;
|
|
13
15
|
|
|
14
16
|
& > * {
|
|
15
17
|
overflow-y: hidden;
|
|
@@ -130,7 +132,10 @@
|
|
|
130
132
|
// mobile
|
|
131
133
|
@media only screen and (max-width: 768px) {
|
|
132
134
|
.header {
|
|
133
|
-
padding: @spacing-
|
|
135
|
+
padding: @spacing-2 @spacing-0;
|
|
136
|
+
height: var(--nav-offset-top);
|
|
137
|
+
|
|
138
|
+
--nav-top-content-height: 40px;
|
|
134
139
|
|
|
135
140
|
.navigation-link {
|
|
136
141
|
padding: 10px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAA6B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,WAAW,oBAAoB;IACjC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"layout-logo.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAA6B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,WAAW,oBAAoB;IACjC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA0CpD,CAAC"}
|
|
@@ -10,6 +10,7 @@ export const TitanLayoutLogo = ({ className, mantleFill, postfix, title, logoWra
|
|
|
10
10
|
const Wrapper = logoWrapper;
|
|
11
11
|
const logoSize = isMobile ? 44 : 56;
|
|
12
12
|
const logoCompanySize = 48;
|
|
13
|
-
|
|
13
|
+
const showCompanyTitle = title === true && !isMobile;
|
|
14
|
+
return (_jsxs("div", { className: classNames('d-f align-items-center', { 'p-t-half': showCompanyTitle }, className), children: [showCompanyTitle ? (_jsx(Wrapper, { children: _jsx(LogoCompanyTitle, { height: logoCompanySize }) })) : typeof title === 'string' ? (_jsxs(Fragment, { children: [_jsx(LogoTitan, { size: logoSize, mantleFill: mantleFill, logoWrapper: Wrapper }), !isMobile && (_jsx(LogoTitanTitle, { className: "c-inherit m-l-1", children: title }))] })) : (_jsx(LogoTitan, { size: logoSize, mantleFill: mantleFill, logoWrapper: Wrapper })), !isMobile && postfix] }));
|
|
14
15
|
};
|
|
15
16
|
//# sourceMappingURL=layout-logo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-logo.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAgB,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAezD,MAAM,YAAY,GAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC;AAEzD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACtD,SAAS,EACT,UAAU,EACV,OAAO,EACP,KAAK,EACL,WAAW,GAAG,YAAY,GAC7B,EAAE,EAAE;IACD,MAAM,EACF,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,MAAM,eAAe,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"layout-logo.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAgB,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAezD,MAAM,YAAY,GAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC;AAEzD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACtD,SAAS,EACT,UAAU,EACV,OAAO,EACP,KAAK,EACL,WAAW,GAAG,YAAY,GAC7B,EAAE,EAAE;IACD,MAAM,EACF,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,MAAM,eAAe,GAAG,EAAE,CAAC;IAC3B,MAAM,gBAAgB,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC;IAErD,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,wBAAwB,EACxB,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAChC,SAAS,CACZ,aAEA,gBAAgB,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,cACJ,KAAC,gBAAgB,IAAC,MAAM,EAAE,eAAe,GAAI,GACvC,CACb,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,MAAC,QAAQ,eACL,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,GAAI,EAC1E,CAAC,QAAQ,IAAI,CACV,KAAC,cAAc,IAAC,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAkB,CACvE,IACM,CACd,CAAC,CAAC,CAAC,CACA,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,GAAI,CAC9E,EAEA,CAAC,QAAQ,IAAI,OAAO,IACnB,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -16,7 +16,7 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded,
|
|
|
16
16
|
onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
return (_jsxs(LayoutPlacementContext.Provider, { value: "side", children: [mobile && drawerOpened && (_jsx("div", { className: Styles.navDrawerBackdrop, onClick: closeDrawer })), _jsxs("div", { className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && drawerOpened && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim), className), "data-cy": "side-navigation", onClick: closeDrawer, children: [_jsxs(ThemeProvider, { mode: "dark", className: Styles.navMain, children: [mobile && (_jsx("div", { className: Styles.navCloseWrapper, children: _jsx("div", { className: Styles.navClose, onClick: () => onBarExpandChange(false), children: _jsx(Icon, { svg: SvgClose, size: "large" }) }) })), !!(top === null || top === void 0 ? void 0 : top.length) && _jsx(SidebarTop, { children: top }), _jsx("div", { "data-cy": "navigation-items", children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map(item => item.submenu ? (_jsx(SideNavigationGroupItem, { barExpanded: mobile ?
|
|
19
|
+
return (_jsxs(LayoutPlacementContext.Provider, { value: "side", children: [mobile && drawerOpened && (_jsx("div", { className: Styles.navDrawerBackdrop, onClick: closeDrawer })), _jsxs("div", { className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && drawerOpened && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim), className), "data-cy": "side-navigation", onClick: closeDrawer, children: [_jsxs(ThemeProvider, { mode: "dark", className: Styles.navMain, children: [mobile && (_jsx("div", { className: Styles.navCloseWrapper, children: _jsx("div", { className: Styles.navClose, onClick: () => onBarExpandChange(false), children: _jsx(Icon, { svg: SvgClose, size: "large" }) }) })), !!(top === null || top === void 0 ? void 0 : top.length) && _jsx(SidebarTop, { children: top }), _jsx("div", { "data-cy": "navigation-items", children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map(item => item.submenu ? (_jsx(SideNavigationGroupItem, { barExpanded: mobile ? drawerOpened : barExpanded, submenuExpanded: !!item.id && submenuExpanded === item.id, onSubmenuExpand: onSubmenuExpandChange, navigationComponent: navigationComponent, ...item }, item.id)) : (_jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: navigationComponent, ...item, tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)) }, item.id))) }), !!bottom && _jsx(SidebarBottom, { children: bottom })] }), !mobile && (_jsxs("div", { className: Styles.navFooter, children: [_jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.toggleWrapper, children: _jsx(SideNavigationOptionsToggle, { appearance: barExpanded ? 'collapse-button' : 'expand', onExpandedChange: () => onBarExpandChange(!barExpanded) }) })] }))] })] }));
|
|
20
20
|
};
|
|
21
21
|
LayoutSidebar.displayName = 'LayoutSidebar';
|
|
22
22
|
/** Side Navigation options toggle */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,QAAQ,MAAM,4DAA4D,CAAC;AAClF,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EACH,QAAQ,EAER,QAAQ,EAGR,cAAc,EACd,WAAW,GACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,EACH,2BAA2B,EAC3B,+BAA+B,EAC/B,0BAA0B,GAC7B,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAiB7C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAClD,SAAS,EACT,MAAM,EACN,WAAW,EACX,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,SAAS,EACT,GAAG,EACH,MAAM,EACN,mBAAmB,GACtB,EAAE,EAAE;IACD,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,MAAM,EAAE,CAAC;YACT,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,KAAK,CAAC,CAAC;QAChC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,aACxC,MAAM,IAAI,YAAY,IAAI,CACvB,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,GAAI,CACrE,EACD,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,GAAG,EACV,MAAM,IAAI,MAAM,CAAC,SAAS,EAC1B,MAAM,IAAI,YAAY,IAAI,MAAM,CAAC,eAAe,EAChD,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAC1D,SAAS,CACZ,aACO,iBAAiB,EACzB,OAAO,EAAE,WAAW,aAEpB,MAAC,aAAa,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,aAC/C,MAAM,IAAI,CACP,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,YAClC,cACI,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAEvC,KAAC,IAAI,IAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,GAClC,GACJ,CACT,EACA,CAAC,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,CAAA,IAAI,KAAC,UAAU,cAAE,GAAG,GAAc,EAEhD,yBAAa,kBAAkB,YAC1B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACX,KAAC,uBAAuB,IAEpB,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"layout-sidebar.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,15 +17,20 @@
|
|
|
17
17
|
|
|
18
18
|
// mobile version
|
|
19
19
|
.nav-drawer {
|
|
20
|
-
display: none;
|
|
20
|
+
// display: none;
|
|
21
21
|
position: fixed;
|
|
22
22
|
max-width: 400px;
|
|
23
23
|
width: 0;
|
|
24
24
|
height: 100vh;
|
|
25
25
|
top: 0;
|
|
26
|
-
left:
|
|
26
|
+
left: -100vh;
|
|
27
27
|
z-index: 991;
|
|
28
28
|
|
|
29
|
+
-webkit-transition: width 200ms ease-in-out;
|
|
30
|
+
-moz-transition: width 200ms ease-in-out;
|
|
31
|
+
-o-transition: width 200ms ease-in-out;
|
|
32
|
+
transition: width 200ms ease-in-out;
|
|
33
|
+
|
|
29
34
|
.nav-main {
|
|
30
35
|
padding-left: @spacing-2;
|
|
31
36
|
padding-right: @spacing-2;
|
|
@@ -39,6 +44,7 @@
|
|
|
39
44
|
padding-top: @spacing-2;
|
|
40
45
|
padding-left: @spacing-2;
|
|
41
46
|
padding-right: @spacing-2;
|
|
47
|
+
cursor: pointer;
|
|
42
48
|
}
|
|
43
49
|
}
|
|
44
50
|
|
|
@@ -75,6 +81,7 @@
|
|
|
75
81
|
.nav-drawer-opened {
|
|
76
82
|
display: flex;
|
|
77
83
|
width: 90vw;
|
|
84
|
+
left: 0;
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
@media only screen and (min-width: 361px) {
|
|
@@ -6,14 +6,16 @@ import { TitanLayoutLogoProps } from './layout-logo';
|
|
|
6
6
|
import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
|
|
7
7
|
type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
|
|
8
8
|
export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
|
|
9
|
-
|
|
9
|
+
/** layout appearance */
|
|
10
10
|
appearance?: 'legacy' | 'anvil1' | 'anvil2';
|
|
11
|
+
/** layout's content */
|
|
12
|
+
children?: TitanLayoutChild | TitanLayoutChild[];
|
|
13
|
+
/** show only content without side and top bars */
|
|
14
|
+
contentOnly?: boolean;
|
|
11
15
|
/** component used for navigation */
|
|
12
16
|
navigationComponent?: FC<NavLinkComponentProps>;
|
|
13
17
|
/** data for main navigation links */
|
|
14
18
|
navigationMainItems?: NavigationItemData[];
|
|
15
|
-
/** layout's content */
|
|
16
|
-
children?: TitanLayoutChild | TitanLayoutChild[];
|
|
17
19
|
state?: TitanLayoutState;
|
|
18
20
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
19
21
|
header?: ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,KAAK,gBAAgB,GAAG,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,
|
|
1
|
+
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,KAAK,gBAAgB,GAAG,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAEjD,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA0TF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACvB;AA4ED,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}
|
|
@@ -46,9 +46,8 @@ const useLayoutChildren = (children) => useMemo(() => Children.toArray(children)
|
|
|
46
46
|
}, {
|
|
47
47
|
logo: _jsx(TitanLayoutLogo, {}),
|
|
48
48
|
}), [children]);
|
|
49
|
-
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, top, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }) => {
|
|
49
|
+
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, contentOnly, navigationComponent, header, top, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }) => {
|
|
50
50
|
const breakpoint = useTitanBreakpoint();
|
|
51
|
-
const isMobile = breakpoint.isMobile;
|
|
52
51
|
const context = useMemo(() => ({
|
|
53
52
|
NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
|
|
54
53
|
breakpoint,
|
|
@@ -59,6 +58,13 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationC
|
|
|
59
58
|
const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
|
|
60
59
|
const { content, logo } = useLayoutChildren(children);
|
|
61
60
|
const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
|
|
61
|
+
const [anvil2Styles, setAnvil2Styles] = useState({});
|
|
62
|
+
const updateIndicatorsHeight = useCallback((offset) => {
|
|
63
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
64
|
+
}, []);
|
|
65
|
+
const isMobile = breakpoint.isMobile;
|
|
66
|
+
const hasSideBar = !contentOnly && (!!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) || !!(sideTop === null || sideTop === void 0 ? void 0 : sideTop.length));
|
|
67
|
+
const hasTopBar = !contentOnly;
|
|
62
68
|
useEffect(() => {
|
|
63
69
|
if (variant.isAnvil1) {
|
|
64
70
|
const bodyClassName = 'of-hidden-i';
|
|
@@ -85,14 +91,54 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationC
|
|
|
85
91
|
submenuExpanded: expanded ? id : undefined,
|
|
86
92
|
});
|
|
87
93
|
}, [state, onStateChange]);
|
|
94
|
+
const hasMenuNotifications = useMemo(() => {
|
|
95
|
+
var _a;
|
|
96
|
+
try {
|
|
97
|
+
return ((_a = navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.some(item => {
|
|
98
|
+
var _a;
|
|
99
|
+
if (item.counter || ((_a = item.tag) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
100
|
+
return true;
|
|
101
|
+
}
|
|
102
|
+
else if (item.submenu) {
|
|
103
|
+
return item.submenu.groups.some(group => group.links.some(link => { var _a; return !!link.counter || !!((_a = link.tag) === null || _a === void 0 ? void 0 : _a.value); }));
|
|
104
|
+
}
|
|
105
|
+
return false;
|
|
106
|
+
})) !== null && _a !== void 0 ? _a : false);
|
|
107
|
+
}
|
|
108
|
+
catch (_b) {
|
|
109
|
+
return false;
|
|
110
|
+
}
|
|
111
|
+
}, [navigationMainItems]);
|
|
112
|
+
const limitContentWidth = useMemo(() => {
|
|
113
|
+
if (variant.isAnvil2 || !minContentWidth) {
|
|
114
|
+
return undefined;
|
|
115
|
+
}
|
|
116
|
+
if (breakpoint.width < minContentWidth) {
|
|
117
|
+
return minContentWidth;
|
|
118
|
+
}
|
|
119
|
+
}, [variant, minContentWidth, breakpoint.width]);
|
|
120
|
+
const contentStyles = useMemo(() => {
|
|
121
|
+
if (variant.isAnvil2) {
|
|
122
|
+
return anvil2Styles;
|
|
123
|
+
}
|
|
124
|
+
if (variant.isLegacy && limitContentWidth) {
|
|
125
|
+
return {
|
|
126
|
+
display: 'flex',
|
|
127
|
+
flexDirection: 'column',
|
|
128
|
+
minHeight: '100vh',
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
}, [variant, anvil2Styles, limitContentWidth]);
|
|
88
132
|
const layoutClass = variant.isLegacy
|
|
89
133
|
? Styles.layoutLegacy
|
|
90
134
|
: variant.isAnvil1
|
|
91
135
|
? Styles.layoutAnvil1
|
|
92
136
|
: Styles.layoutAnvil2;
|
|
93
|
-
return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
|
|
94
|
-
|
|
95
|
-
|
|
137
|
+
return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop, {
|
|
138
|
+
[Styles.layoutTop]: hasTopBar,
|
|
139
|
+
[Styles.layoutNavSlim]: !isMobile && hasSideBar && (state === null || state === void 0 ? void 0 : state.navCollapsed),
|
|
140
|
+
[Styles.layoutNavWide]: !isMobile && hasSideBar && !(state === null || state === void 0 ? void 0 : state.navCollapsed),
|
|
141
|
+
}, layoutClass), style: contentStyles, children: [variant.isSequent && _jsx("div", { className: Styles.topPlaceholder }), hasTopBar && (_jsx(LayoutHeader, { className: Styles.top, logo: logo, profile: isMobile ? undefined : profile, center: top, rightText: isMobile ? undefined : extraText, right: _jsxs(Fragment, { children: [extraLinksTop, !isMobile && extraLinks] }), isMobile: isMobile, hasNotifications: hasNotifications || hasMenuNotifications, onBurgerClick: onBurgerClick })), hasSideBar && (_jsx(NotificationsContextProvider, { children: _jsx(LayoutSidebar, { className: Styles.side, mobile: breakpoint.isMobile, barExpanded: !(state === null || state === void 0 ? void 0 : state.navCollapsed), onBarExpandChange: onBarExpandChange, submenuExpanded: state === null || state === void 0 ? void 0 : state.submenuExpanded, onSubmenuExpandChange: onSubmenuExpandChange, drawerOpened: mobileDrawerOpened, onDrawerOpenChange: setMobileDrawerOpened, top: sideTop, mainItems: navigationMainItems, navigationComponent: context.NavigationComponent, bottom: isMobile ? (_jsxs(Fragment, { children: [profile, extraLinks, !!extraText && (_jsx(InternalSideNavigationTrigger, { id: "__extra_text", title: extraText, submenuExpanded: undefined, dataPrefix: "navigation-extra-text", tag: undefined, icon: undefined, iconActive: undefined }))] })) : undefined }) })), variant.isAnvil1 ? (_jsx(LayoutContentAnvil1, { header: header, minWidth: limitContentWidth, children: content })) : variant.isLegacy ? (_jsx(LayoutContentLegacy, { header: header, minWidth: limitContentWidth, children: content })) : (_jsx(LayoutContentAnvil2, { header: header, onHeaderHeightChange: updateIndicatorsHeight, children: content }))] }) }) }));
|
|
96
142
|
};
|
|
97
143
|
const TitanLayoutHeaderObserved = ({ children, heightChange }) => {
|
|
98
144
|
const ref = useRef(null);
|
|
@@ -117,18 +163,25 @@ const TitanLayoutHeaderObserved = ({ children, heightChange }) => {
|
|
|
117
163
|
}, [heightChange]);
|
|
118
164
|
return (_jsx("div", { ref: ref, className: Styles.contentHeader, "data-cy": "layout-content-header", children: children }));
|
|
119
165
|
};
|
|
166
|
+
const TitanLayoutHeader = ({ children }) => {
|
|
167
|
+
return (_jsx("div", { className: Styles.contentHeader, "data-cy": "layout-content-header", children: children }));
|
|
168
|
+
};
|
|
120
169
|
const TitanLayoutContent = ({ children }) => children;
|
|
121
|
-
const
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
const contentStyles = useMemo(() => ({
|
|
170
|
+
const LayoutContentAnvil2 = ({ children, header, onHeaderHeightChange }) => {
|
|
171
|
+
return (_jsxs(Fragment, { children: [_jsx(TitanLayoutHeaderObserved, { heightChange: onHeaderHeightChange, children: header }), children] }));
|
|
172
|
+
};
|
|
173
|
+
const LayoutContentAnvil1 = ({ children, header, minWidth }) => {
|
|
174
|
+
const innerContentStyles = useMemo(() => ({
|
|
127
175
|
...(minWidth ? { minWidth: `${minWidth}px` } : {}),
|
|
128
|
-
|
|
129
|
-
}),
|
|
130
|
-
|
|
131
|
-
|
|
176
|
+
}), [minWidth]);
|
|
177
|
+
return (_jsxs(Fragment, { children: [_jsx(TitanLayoutHeader, { children: header }), _jsx("div", { className: classNames(Styles.content, { 'of-x-auto': !!minWidth }), "data-cy": "layout-content", children: _jsx("div", { className: "position-relative d-f flex-grow-1 flex-basis-0 of-hidden", style: innerContentStyles, children: children }) })] }));
|
|
178
|
+
};
|
|
179
|
+
const LayoutContentLegacy = ({ children, header, minWidth }) => {
|
|
180
|
+
const innerContentStyles = useMemo(() => ({
|
|
181
|
+
position: 'relative',
|
|
182
|
+
minWidth: `${minWidth}px`,
|
|
183
|
+
}), [minWidth]);
|
|
184
|
+
return (_jsxs(Fragment, { children: [_jsx(TitanLayoutHeader, { children: header }), minWidth ? (_jsx("div", { className: "of-x-auto flex-basis-0 flex-grow-1", children: _jsx("div", { style: innerContentStyles, children: children }) })) : (children)] }));
|
|
132
185
|
};
|
|
133
186
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
134
187
|
Content: TitanLayoutContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,QAAQ,EAGR,QAAQ,EAGR,cAAc,EACd,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,uBAAuB,EAAyB,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EACH,aAAa,EACb,sBAAsB,GAGzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAwB,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"titan-layout.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -53,18 +53,21 @@
|
|
|
53
53
|
|
|
54
54
|
.layout-legacy,
|
|
55
55
|
.layout-anvil2 {
|
|
56
|
-
overflow-x: auto;
|
|
57
56
|
.top-placeholder {
|
|
58
57
|
height: var(--nav-offset-top);
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
.layout {
|
|
63
|
-
--nav-offset-top:
|
|
62
|
+
--nav-offset-top: 0px;
|
|
63
|
+
--nav-offset-left: 0px;
|
|
64
64
|
|
|
65
|
-
&.layout-
|
|
66
|
-
--nav-offset-top:
|
|
67
|
-
|
|
65
|
+
&.layout-desktop.layout-top {
|
|
66
|
+
--nav-offset-top: 48px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.layout-mobile.layout-top {
|
|
70
|
+
--nav-offset-top: 72px;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
&.layout-desktop.layout-nav-slim {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;
|
|
1
|
+
{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AAmQF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAWxD,CAAC"}
|
|
@@ -24,6 +24,7 @@ export default {
|
|
|
24
24
|
longContent: true,
|
|
25
25
|
wideContent: false,
|
|
26
26
|
minWidth: false,
|
|
27
|
+
emptyNav: false,
|
|
27
28
|
},
|
|
28
29
|
};
|
|
29
30
|
const mainNavItems = [
|
|
@@ -55,21 +56,21 @@ const ContentHeader = () => {
|
|
|
55
56
|
const [longInfo, setLongInfo] = useState(false);
|
|
56
57
|
return (_jsxs(Fragment, { children: [_jsx(Announcement, { title: "Some info", status: "info" }), _jsx(Announcement, { title: "Some warning", status: "warning" }), _jsx("div", { className: "d-f justify-content-center align-items-center bg-purple-100-i", style: { height: longInfo ? '120px' : '48px' }, children: _jsxs("div", { className: "d-f align-items-center gap-1", children: ["custom content", ' ', _jsx(Button, { onClick: () => setLongInfo(!longInfo), size: "small", "aria-label": "test", children: longInfo ? '↑' : '↓' })] }) })] }));
|
|
57
58
|
};
|
|
58
|
-
const SearchBar = () => _jsx(TextField, { size: "small", placeholder: "Search", className: "w-100-i" });
|
|
59
|
+
const SearchBar = () => (_jsx(TextField, { size: "small", placeholder: "Search", className: "w-100-i m-x-half-i" }));
|
|
59
60
|
const useLayoutProps = (args) => {
|
|
60
61
|
const [state, setState] = useState(undefined);
|
|
61
62
|
return {
|
|
62
63
|
state,
|
|
63
64
|
onStateChange: setState,
|
|
64
65
|
navigationComponent: NavLinkMock,
|
|
65
|
-
navigationMainItems: mainNavItems,
|
|
66
|
+
navigationMainItems: args.emptyNav ? [] : mainNavItems,
|
|
66
67
|
profile,
|
|
67
68
|
top: args.search ? _jsx(SearchBar, {}) : undefined,
|
|
68
69
|
header: args.header ? _jsx(ContentHeader, {}) : undefined,
|
|
69
70
|
extraLinks,
|
|
70
71
|
extraLinksTop,
|
|
71
72
|
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
72
|
-
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
73
|
+
sideTop: args.sideTop && !args.emptyNav ? sidebarTop() : undefined,
|
|
73
74
|
minContentWidth: args.minWidth ? 900 : undefined,
|
|
74
75
|
};
|
|
75
76
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.stories.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACpG,OAAO,SAAS,MAAM,6DAA6D,CAAC;AACpF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,iBAAiB,MAAM,+DAA+D,CAAC;AAC9F,OAAO,WAAW,MAAM,iEAAiE,CAAC;AAC1F,OAAO,eAAe,MAAM,oEAAoE,CAAC;AACjG,OAAO,SAAS,MAAM,sEAAsE,CAAC;AAC7F,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAM,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EACH,sBAAsB,EACtB,YAAY,EACZ,WAAW,EACX,KAAK,EACL,SAAS,EACT,oBAAoB,EACpB,gBAAgB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAsC,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"titan-layout.stories.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { BreakpointReturnProps } from '@servicetitan/anvil2';
|
|
|
2
2
|
export interface TitanBreakpoint {
|
|
3
3
|
name: BreakpointReturnProps['name'];
|
|
4
4
|
isMobile: boolean;
|
|
5
|
+
width: number;
|
|
5
6
|
}
|
|
6
7
|
export declare const useTitanBreakpoint: () => TitanBreakpoint;
|
|
7
8
|
//# sourceMappingURL=use-breakpoint.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,QAAO,eAWrC,CAAC"}
|
|
@@ -3,10 +3,11 @@ import { useMemo } from 'react';
|
|
|
3
3
|
export const useTitanBreakpoint = () => {
|
|
4
4
|
const breakpoint = useBreakpoint();
|
|
5
5
|
return useMemo(() => {
|
|
6
|
-
var _a;
|
|
6
|
+
var _a, _b;
|
|
7
7
|
return ({
|
|
8
8
|
name: (_a = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _a !== void 0 ? _a : 'xl',
|
|
9
9
|
isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
|
|
10
|
+
width: (_b = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _b !== void 0 ? _b : 0,
|
|
10
11
|
});
|
|
11
12
|
}, [breakpoint]);
|
|
12
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK;YAC3D,KAAK,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,CAAC;SACrC,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "11.0.0-canary.237.
|
|
3
|
+
"version": "11.0.0-canary.237.ff793b3.0",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"less": true,
|
|
43
43
|
"webpack": false
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "ff793b337eca5999e2472d38757b0618e5331fd9"
|
|
46
46
|
}
|
|
@@ -3,7 +3,7 @@ import { CSSProperties, FC, ReactNode } from 'react';
|
|
|
3
3
|
import { LogoTitanSvg } from './logo-titan';
|
|
4
4
|
import * as Styles from './logo-titan-text.module.less';
|
|
5
5
|
|
|
6
|
-
export type WrapperProps = FC<{ className
|
|
6
|
+
export type WrapperProps = FC<{ className?: string; children: ReactNode; style?: CSSProperties }>;
|
|
7
7
|
|
|
8
8
|
export interface LogoTitanProps {
|
|
9
9
|
mantleFill?: string;
|
|
@@ -19,7 +19,7 @@ export interface TitanLayoutContextType {
|
|
|
19
19
|
|
|
20
20
|
export const LayoutContext = createContext<TitanLayoutContextType>({
|
|
21
21
|
NavigationComponent: DefaultNavLinkComponent,
|
|
22
|
-
breakpoint: { name: 'lg', isMobile: false },
|
|
22
|
+
breakpoint: { name: 'lg', isMobile: false, width: 0 },
|
|
23
23
|
isTitanLayout: false,
|
|
24
24
|
sidebar: { styles: { popoverContent: {} } },
|
|
25
25
|
});
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
+
--nav-top-content-height: 32px;
|
|
7
8
|
display: flex;
|
|
8
9
|
justify-content: space-between;
|
|
9
10
|
|
|
10
11
|
background-color: @color-white;
|
|
11
12
|
color: @color-black;
|
|
12
|
-
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
outline: 1px solid @color-neutral-60;
|
|
13
15
|
|
|
14
16
|
& > * {
|
|
15
17
|
overflow-y: hidden;
|
|
@@ -130,7 +132,10 @@
|
|
|
130
132
|
// mobile
|
|
131
133
|
@media only screen and (max-width: 768px) {
|
|
132
134
|
.header {
|
|
133
|
-
padding: @spacing-
|
|
135
|
+
padding: @spacing-2 @spacing-0;
|
|
136
|
+
height: var(--nav-offset-top);
|
|
137
|
+
|
|
138
|
+
--nav-top-content-height: 40px;
|
|
134
139
|
|
|
135
140
|
.navigation-link {
|
|
136
141
|
padding: 10px;
|
|
@@ -33,20 +33,27 @@ export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
|
|
|
33
33
|
const Wrapper = logoWrapper;
|
|
34
34
|
const logoSize = isMobile ? 44 : 56;
|
|
35
35
|
const logoCompanySize = 48;
|
|
36
|
+
const showCompanyTitle = title === true && !isMobile;
|
|
36
37
|
|
|
37
38
|
return (
|
|
38
|
-
<div
|
|
39
|
-
{
|
|
39
|
+
<div
|
|
40
|
+
className={classNames(
|
|
41
|
+
'd-f align-items-center',
|
|
42
|
+
{ 'p-t-half': showCompanyTitle },
|
|
43
|
+
className
|
|
44
|
+
)}
|
|
45
|
+
>
|
|
46
|
+
{showCompanyTitle ? (
|
|
47
|
+
<Wrapper>
|
|
48
|
+
<LogoCompanyTitle height={logoCompanySize} />
|
|
49
|
+
</Wrapper>
|
|
50
|
+
) : typeof title === 'string' ? (
|
|
40
51
|
<Fragment>
|
|
41
52
|
<LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
|
|
42
53
|
{!isMobile && (
|
|
43
54
|
<LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
|
|
44
55
|
)}
|
|
45
56
|
</Fragment>
|
|
46
|
-
) : title === true && !isMobile ? (
|
|
47
|
-
<Wrapper className="">
|
|
48
|
-
<LogoCompanyTitle height={logoCompanySize} />
|
|
49
|
-
</Wrapper>
|
|
50
57
|
) : (
|
|
51
58
|
<LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
|
|
52
59
|
)}
|
|
@@ -17,15 +17,20 @@
|
|
|
17
17
|
|
|
18
18
|
// mobile version
|
|
19
19
|
.nav-drawer {
|
|
20
|
-
display: none;
|
|
20
|
+
// display: none;
|
|
21
21
|
position: fixed;
|
|
22
22
|
max-width: 400px;
|
|
23
23
|
width: 0;
|
|
24
24
|
height: 100vh;
|
|
25
25
|
top: 0;
|
|
26
|
-
left:
|
|
26
|
+
left: -100vh;
|
|
27
27
|
z-index: 991;
|
|
28
28
|
|
|
29
|
+
-webkit-transition: width 200ms ease-in-out;
|
|
30
|
+
-moz-transition: width 200ms ease-in-out;
|
|
31
|
+
-o-transition: width 200ms ease-in-out;
|
|
32
|
+
transition: width 200ms ease-in-out;
|
|
33
|
+
|
|
29
34
|
.nav-main {
|
|
30
35
|
padding-left: @spacing-2;
|
|
31
36
|
padding-right: @spacing-2;
|
|
@@ -39,6 +44,7 @@
|
|
|
39
44
|
padding-top: @spacing-2;
|
|
40
45
|
padding-left: @spacing-2;
|
|
41
46
|
padding-right: @spacing-2;
|
|
47
|
+
cursor: pointer;
|
|
42
48
|
}
|
|
43
49
|
}
|
|
44
50
|
|
|
@@ -75,6 +81,7 @@
|
|
|
75
81
|
.nav-drawer-opened {
|
|
76
82
|
display: flex;
|
|
77
83
|
width: 90vw;
|
|
84
|
+
left: 0;
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
@media only screen and (min-width: 361px) {
|
|
@@ -95,7 +95,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
|
|
|
95
95
|
item.submenu ? (
|
|
96
96
|
<SideNavigationGroupItem
|
|
97
97
|
key={item.id}
|
|
98
|
-
barExpanded={mobile ?
|
|
98
|
+
barExpanded={mobile ? drawerOpened : barExpanded}
|
|
99
99
|
submenuExpanded={!!item.id && submenuExpanded === item.id}
|
|
100
100
|
onSubmenuExpand={onSubmenuExpandChange}
|
|
101
101
|
navigationComponent={navigationComponent}
|
|
@@ -53,18 +53,21 @@
|
|
|
53
53
|
|
|
54
54
|
.layout-legacy,
|
|
55
55
|
.layout-anvil2 {
|
|
56
|
-
overflow-x: auto;
|
|
57
56
|
.top-placeholder {
|
|
58
57
|
height: var(--nav-offset-top);
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
.layout {
|
|
63
|
-
--nav-offset-top:
|
|
62
|
+
--nav-offset-top: 0px;
|
|
63
|
+
--nav-offset-left: 0px;
|
|
64
64
|
|
|
65
|
-
&.layout-
|
|
66
|
-
--nav-offset-top:
|
|
67
|
-
|
|
65
|
+
&.layout-desktop.layout-top {
|
|
66
|
+
--nav-offset-top: 48px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.layout-mobile.layout-top {
|
|
70
|
+
--nav-offset-top: 72px;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
&.layout-desktop.layout-nav-slim {
|
|
@@ -9,6 +9,7 @@ export const layoutLegacy: string;
|
|
|
9
9
|
export const layoutMobile: string;
|
|
10
10
|
export const layoutNavSlim: string;
|
|
11
11
|
export const layoutNavWide: string;
|
|
12
|
+
export const layoutTop: string;
|
|
12
13
|
export const side: string;
|
|
13
14
|
export const top: string;
|
|
14
15
|
export const topPlaceholder: string;
|
|
@@ -28,6 +28,7 @@ interface LayoutContentArgs {
|
|
|
28
28
|
longContent: boolean;
|
|
29
29
|
wideContent: boolean;
|
|
30
30
|
minWidth: boolean;
|
|
31
|
+
emptyNav: boolean;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export default {
|
|
@@ -43,6 +44,7 @@ export default {
|
|
|
43
44
|
longContent: true,
|
|
44
45
|
wideContent: false,
|
|
45
46
|
minWidth: false,
|
|
47
|
+
emptyNav: false,
|
|
46
48
|
} as LayoutContentArgs,
|
|
47
49
|
};
|
|
48
50
|
|
|
@@ -183,7 +185,9 @@ const ContentHeader = () => {
|
|
|
183
185
|
</Fragment>
|
|
184
186
|
);
|
|
185
187
|
};
|
|
186
|
-
const SearchBar = () =>
|
|
188
|
+
const SearchBar = () => (
|
|
189
|
+
<TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
|
|
190
|
+
);
|
|
187
191
|
|
|
188
192
|
const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
|
|
189
193
|
const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
|
|
@@ -193,7 +197,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
|
|
|
193
197
|
onStateChange: setState,
|
|
194
198
|
|
|
195
199
|
navigationComponent: NavLinkMock,
|
|
196
|
-
navigationMainItems: mainNavItems,
|
|
200
|
+
navigationMainItems: args.emptyNav ? [] : mainNavItems,
|
|
197
201
|
|
|
198
202
|
profile,
|
|
199
203
|
top: args.search ? <SearchBar /> : undefined,
|
|
@@ -203,7 +207,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
|
|
|
203
207
|
extraLinksTop,
|
|
204
208
|
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
205
209
|
|
|
206
|
-
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
210
|
+
sideTop: args.sideTop && !args.emptyNav ? sidebarTop() : undefined,
|
|
207
211
|
|
|
208
212
|
minContentWidth: args.minWidth ? 900 : undefined,
|
|
209
213
|
};
|
|
@@ -35,19 +35,21 @@ import * as Styles from './titan-layout.module.less';
|
|
|
35
35
|
type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
|
|
36
36
|
|
|
37
37
|
export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
/** layout appearance */
|
|
40
39
|
appearance?: 'legacy' | 'anvil1' | 'anvil2';
|
|
41
40
|
|
|
41
|
+
/** layout's content */
|
|
42
|
+
children?: TitanLayoutChild | TitanLayoutChild[];
|
|
43
|
+
|
|
44
|
+
/** show only content without side and top bars */
|
|
45
|
+
contentOnly?: boolean;
|
|
46
|
+
|
|
42
47
|
/** component used for navigation */
|
|
43
48
|
navigationComponent?: FC<NavLinkComponentProps>;
|
|
44
49
|
|
|
45
50
|
/** data for main navigation links */
|
|
46
51
|
navigationMainItems?: NavigationItemData[];
|
|
47
52
|
|
|
48
|
-
/** layout's content */
|
|
49
|
-
children?: TitanLayoutChild | TitanLayoutChild[];
|
|
50
|
-
|
|
51
53
|
state?: TitanLayoutState;
|
|
52
54
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
53
55
|
|
|
@@ -117,6 +119,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
117
119
|
appearance = 'anvil2',
|
|
118
120
|
id,
|
|
119
121
|
children,
|
|
122
|
+
contentOnly,
|
|
120
123
|
navigationComponent,
|
|
121
124
|
header,
|
|
122
125
|
top,
|
|
@@ -131,7 +134,6 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
131
134
|
sideTop,
|
|
132
135
|
}) => {
|
|
133
136
|
const breakpoint = useTitanBreakpoint();
|
|
134
|
-
const isMobile = breakpoint.isMobile;
|
|
135
137
|
const context: TitanLayoutContextType = useMemo(
|
|
136
138
|
() => ({
|
|
137
139
|
NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
|
|
@@ -145,6 +147,14 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
145
147
|
const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
|
|
146
148
|
const { content, logo } = useLayoutChildren(children);
|
|
147
149
|
const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
|
|
150
|
+
const [anvil2Styles, setAnvil2Styles] = useState<object>({});
|
|
151
|
+
const updateIndicatorsHeight = useCallback((offset: number) => {
|
|
152
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
153
|
+
}, []);
|
|
154
|
+
|
|
155
|
+
const isMobile = breakpoint.isMobile;
|
|
156
|
+
const hasSideBar = !contentOnly && (!!navigationMainItems?.length || !!sideTop?.length);
|
|
157
|
+
const hasTopBar = !contentOnly;
|
|
148
158
|
|
|
149
159
|
useEffect(() => {
|
|
150
160
|
if (variant.isAnvil1) {
|
|
@@ -178,6 +188,48 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
178
188
|
},
|
|
179
189
|
[state, onStateChange]
|
|
180
190
|
);
|
|
191
|
+
const hasMenuNotifications = useMemo(() => {
|
|
192
|
+
try {
|
|
193
|
+
return (
|
|
194
|
+
navigationMainItems?.some(item => {
|
|
195
|
+
if (item.counter || item.tag?.value) {
|
|
196
|
+
return true;
|
|
197
|
+
} else if (item.submenu) {
|
|
198
|
+
return item.submenu.groups.some(group =>
|
|
199
|
+
group.links.some(link => !!link.counter || !!link.tag?.value)
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
return false;
|
|
203
|
+
}) ?? false
|
|
204
|
+
);
|
|
205
|
+
} catch {
|
|
206
|
+
return false;
|
|
207
|
+
}
|
|
208
|
+
}, [navigationMainItems]);
|
|
209
|
+
|
|
210
|
+
const limitContentWidth = useMemo(() => {
|
|
211
|
+
if (variant.isAnvil2 || !minContentWidth) {
|
|
212
|
+
return undefined;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
if (breakpoint.width < minContentWidth) {
|
|
216
|
+
return minContentWidth;
|
|
217
|
+
}
|
|
218
|
+
}, [variant, minContentWidth, breakpoint.width]);
|
|
219
|
+
|
|
220
|
+
const contentStyles = useMemo(() => {
|
|
221
|
+
if (variant.isAnvil2) {
|
|
222
|
+
return anvil2Styles;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
if (variant.isLegacy && limitContentWidth) {
|
|
226
|
+
return {
|
|
227
|
+
display: 'flex',
|
|
228
|
+
flexDirection: 'column',
|
|
229
|
+
minHeight: '100vh',
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
}, [variant, anvil2Styles, limitContentWidth]);
|
|
181
233
|
|
|
182
234
|
const layoutClass = variant.isLegacy
|
|
183
235
|
? Styles.layoutLegacy
|
|
@@ -193,72 +245,88 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
193
245
|
className={classNames(
|
|
194
246
|
Styles.layout,
|
|
195
247
|
isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
:
|
|
248
|
+
{
|
|
249
|
+
[Styles.layoutTop]: hasTopBar,
|
|
250
|
+
[Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,
|
|
251
|
+
[Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,
|
|
252
|
+
},
|
|
199
253
|
layoutClass
|
|
200
254
|
)}
|
|
255
|
+
style={contentStyles}
|
|
201
256
|
>
|
|
202
257
|
{variant.isSequent && <div className={Styles.topPlaceholder} />}
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
isMobile={isMobile}
|
|
216
|
-
hasNotifications={hasNotifications}
|
|
217
|
-
onBurgerClick={onBurgerClick}
|
|
218
|
-
/>
|
|
219
|
-
|
|
220
|
-
<NotificationsContextProvider>
|
|
221
|
-
<LayoutSidebar
|
|
222
|
-
className={Styles.side}
|
|
223
|
-
mobile={breakpoint.isMobile}
|
|
224
|
-
barExpanded={!state?.navCollapsed}
|
|
225
|
-
onBarExpandChange={onBarExpandChange}
|
|
226
|
-
submenuExpanded={state?.submenuExpanded}
|
|
227
|
-
onSubmenuExpandChange={onSubmenuExpandChange}
|
|
228
|
-
drawerOpened={mobileDrawerOpened}
|
|
229
|
-
onDrawerOpenChange={setMobileDrawerOpened}
|
|
230
|
-
top={sideTop}
|
|
231
|
-
mainItems={navigationMainItems}
|
|
232
|
-
navigationComponent={context.NavigationComponent}
|
|
233
|
-
bottom={
|
|
234
|
-
isMobile ? (
|
|
235
|
-
<Fragment>
|
|
236
|
-
{profile}
|
|
237
|
-
{extraLinks}
|
|
238
|
-
{!!extraText && (
|
|
239
|
-
<InternalSideNavigationTrigger
|
|
240
|
-
id="__extra_text"
|
|
241
|
-
title={extraText}
|
|
242
|
-
submenuExpanded={undefined}
|
|
243
|
-
dataPrefix="navigation-extra-text"
|
|
244
|
-
tag={undefined}
|
|
245
|
-
icon={undefined}
|
|
246
|
-
iconActive={undefined}
|
|
247
|
-
/>
|
|
248
|
-
)}
|
|
249
|
-
</Fragment>
|
|
250
|
-
) : undefined
|
|
258
|
+
{hasTopBar && (
|
|
259
|
+
<LayoutHeader
|
|
260
|
+
className={Styles.top}
|
|
261
|
+
logo={logo}
|
|
262
|
+
profile={isMobile ? undefined : profile}
|
|
263
|
+
center={top}
|
|
264
|
+
rightText={isMobile ? undefined : extraText}
|
|
265
|
+
right={
|
|
266
|
+
<Fragment>
|
|
267
|
+
{extraLinksTop}
|
|
268
|
+
{!isMobile && extraLinks}
|
|
269
|
+
</Fragment>
|
|
251
270
|
}
|
|
271
|
+
isMobile={isMobile}
|
|
272
|
+
hasNotifications={hasNotifications || hasMenuNotifications}
|
|
273
|
+
onBurgerClick={onBurgerClick}
|
|
252
274
|
/>
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
275
|
+
)}
|
|
276
|
+
|
|
277
|
+
{hasSideBar && (
|
|
278
|
+
<NotificationsContextProvider>
|
|
279
|
+
<LayoutSidebar
|
|
280
|
+
className={Styles.side}
|
|
281
|
+
mobile={breakpoint.isMobile}
|
|
282
|
+
barExpanded={!state?.navCollapsed}
|
|
283
|
+
onBarExpandChange={onBarExpandChange}
|
|
284
|
+
submenuExpanded={state?.submenuExpanded}
|
|
285
|
+
onSubmenuExpandChange={onSubmenuExpandChange}
|
|
286
|
+
drawerOpened={mobileDrawerOpened}
|
|
287
|
+
onDrawerOpenChange={setMobileDrawerOpened}
|
|
288
|
+
top={sideTop}
|
|
289
|
+
mainItems={navigationMainItems}
|
|
290
|
+
navigationComponent={context.NavigationComponent}
|
|
291
|
+
bottom={
|
|
292
|
+
isMobile ? (
|
|
293
|
+
<Fragment>
|
|
294
|
+
{profile}
|
|
295
|
+
{extraLinks}
|
|
296
|
+
{!!extraText && (
|
|
297
|
+
<InternalSideNavigationTrigger
|
|
298
|
+
id="__extra_text"
|
|
299
|
+
title={extraText}
|
|
300
|
+
submenuExpanded={undefined}
|
|
301
|
+
dataPrefix="navigation-extra-text"
|
|
302
|
+
tag={undefined}
|
|
303
|
+
icon={undefined}
|
|
304
|
+
iconActive={undefined}
|
|
305
|
+
/>
|
|
306
|
+
)}
|
|
307
|
+
</Fragment>
|
|
308
|
+
) : undefined
|
|
309
|
+
}
|
|
310
|
+
/>
|
|
311
|
+
</NotificationsContextProvider>
|
|
312
|
+
)}
|
|
313
|
+
|
|
314
|
+
{variant.isAnvil1 ? (
|
|
315
|
+
<LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
|
|
316
|
+
{content}
|
|
317
|
+
</LayoutContentAnvil1>
|
|
318
|
+
) : variant.isLegacy ? (
|
|
319
|
+
<LayoutContentLegacy header={header} minWidth={limitContentWidth}>
|
|
320
|
+
{content}
|
|
321
|
+
</LayoutContentLegacy>
|
|
322
|
+
) : (
|
|
323
|
+
<LayoutContentAnvil2
|
|
324
|
+
header={header}
|
|
325
|
+
onHeaderHeightChange={updateIndicatorsHeight}
|
|
326
|
+
>
|
|
327
|
+
{content}
|
|
328
|
+
</LayoutContentAnvil2>
|
|
329
|
+
)}
|
|
262
330
|
</div>
|
|
263
331
|
</LayoutPlacementContext.Provider>
|
|
264
332
|
</LayoutContext.Provider>
|
|
@@ -299,57 +367,92 @@ const TitanLayoutHeaderObserved: FC<{
|
|
|
299
367
|
</div>
|
|
300
368
|
);
|
|
301
369
|
};
|
|
370
|
+
const TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {
|
|
371
|
+
return (
|
|
372
|
+
<div className={Styles.contentHeader} data-cy="layout-content-header">
|
|
373
|
+
{children}
|
|
374
|
+
</div>
|
|
375
|
+
);
|
|
376
|
+
};
|
|
302
377
|
|
|
303
378
|
export interface TitanLayoutContentProps {
|
|
304
379
|
children: ReactNode;
|
|
305
380
|
}
|
|
306
381
|
const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
|
|
307
382
|
|
|
308
|
-
const
|
|
383
|
+
const LayoutContentAnvil2: FC<{
|
|
309
384
|
children: ReactNode;
|
|
310
385
|
header?: ReactNode;
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
386
|
+
onHeaderHeightChange?: (height: number) => void;
|
|
387
|
+
}> = ({ children, header, onHeaderHeightChange }) => {
|
|
388
|
+
return (
|
|
389
|
+
<Fragment>
|
|
390
|
+
<TitanLayoutHeaderObserved heightChange={onHeaderHeightChange}>
|
|
391
|
+
{header}
|
|
392
|
+
</TitanLayoutHeaderObserved>
|
|
393
|
+
{children}
|
|
394
|
+
</Fragment>
|
|
395
|
+
);
|
|
396
|
+
};
|
|
319
397
|
|
|
320
|
-
|
|
398
|
+
const LayoutContentAnvil1: FC<{
|
|
399
|
+
children: ReactNode;
|
|
400
|
+
header?: ReactNode;
|
|
401
|
+
minWidth?: number;
|
|
402
|
+
}> = ({ children, header, minWidth }) => {
|
|
403
|
+
const innerContentStyles: CSSProperties = useMemo(
|
|
321
404
|
() => ({
|
|
322
405
|
...(minWidth ? { minWidth: `${minWidth}px` } : {}),
|
|
323
|
-
...(anvil2 ? anvil2Styles : {}),
|
|
324
406
|
}),
|
|
325
|
-
[
|
|
407
|
+
[minWidth]
|
|
326
408
|
);
|
|
327
409
|
|
|
328
410
|
return (
|
|
329
411
|
<Fragment>
|
|
330
|
-
{
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
{anvil1 ? (
|
|
342
|
-
<div className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden">
|
|
343
|
-
{children}
|
|
344
|
-
</div>
|
|
345
|
-
) : (
|
|
346
|
-
children
|
|
347
|
-
)}
|
|
412
|
+
<TitanLayoutHeader>{header}</TitanLayoutHeader>
|
|
413
|
+
<div
|
|
414
|
+
className={classNames(Styles.content, { 'of-x-auto': !!minWidth })}
|
|
415
|
+
data-cy="layout-content"
|
|
416
|
+
>
|
|
417
|
+
<div
|
|
418
|
+
className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden"
|
|
419
|
+
style={innerContentStyles}
|
|
420
|
+
>
|
|
421
|
+
{children}
|
|
422
|
+
</div>
|
|
348
423
|
</div>
|
|
349
424
|
</Fragment>
|
|
350
425
|
);
|
|
351
426
|
};
|
|
352
427
|
|
|
428
|
+
const LayoutContentLegacy: FC<{
|
|
429
|
+
children: ReactNode;
|
|
430
|
+
header?: ReactNode;
|
|
431
|
+
minWidth: number | undefined;
|
|
432
|
+
}> = ({ children, header, minWidth }) => {
|
|
433
|
+
const innerContentStyles: CSSProperties = useMemo(
|
|
434
|
+
() => ({
|
|
435
|
+
position: 'relative',
|
|
436
|
+
minWidth: `${minWidth}px`,
|
|
437
|
+
}),
|
|
438
|
+
[minWidth]
|
|
439
|
+
);
|
|
440
|
+
|
|
441
|
+
return (
|
|
442
|
+
<Fragment>
|
|
443
|
+
<TitanLayoutHeader>{header}</TitanLayoutHeader>
|
|
444
|
+
|
|
445
|
+
{minWidth ? (
|
|
446
|
+
<div className="of-x-auto flex-basis-0 flex-grow-1">
|
|
447
|
+
<div style={innerContentStyles}>{children}</div>
|
|
448
|
+
</div>
|
|
449
|
+
) : (
|
|
450
|
+
children
|
|
451
|
+
)}
|
|
452
|
+
</Fragment>
|
|
453
|
+
);
|
|
454
|
+
};
|
|
455
|
+
|
|
353
456
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
354
457
|
Content: TitanLayoutContent,
|
|
355
458
|
Logo: TitanLayoutLogo,
|
|
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
|
|
|
4
4
|
export interface TitanBreakpoint {
|
|
5
5
|
name: BreakpointReturnProps['name'];
|
|
6
6
|
isMobile: boolean;
|
|
7
|
+
width: number;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
export const useTitanBreakpoint = (): TitanBreakpoint => {
|
|
@@ -13,6 +14,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
|
|
|
13
14
|
() => ({
|
|
14
15
|
name: breakpoint?.name ?? 'xl',
|
|
15
16
|
isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
|
|
17
|
+
width: breakpoint?.innerWidth ?? 0,
|
|
16
18
|
}),
|
|
17
19
|
[breakpoint]
|
|
18
20
|
);
|