@servicetitan/navigation 11.0.0-canary.237.4d902dc.0 → 11.0.0-canary.237.64cfcfe.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/titan-layout/layout-header.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header.js +1 -1
- package/dist/components/titan-layout/layout-header.js.map +1 -1
- package/dist/components/titan-layout/layout-header.module.less +20 -13
- package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.js +2 -2
- package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts +0 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.js +2 -2
- package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.module.less +4 -16
- package/dist/components/titan-layout/titan-layout.d.ts +4 -3
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +39 -11
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/components/titan-layout/titan-layout.module.less +45 -14
- package/dist/components/titan-layout/titan-layout.stories.d.ts +10 -11
- package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.stories.js +22 -12
- package/dist/components/titan-layout/titan-layout.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/titan-layout/layout-header.module.less +20 -13
- package/src/components/titan-layout/layout-header.tsx +5 -1
- package/src/components/titan-layout/layout-sidebar-links.tsx +5 -2
- package/src/components/titan-layout/layout-sidebar.module.less +4 -16
- package/src/components/titan-layout/layout-sidebar.module.less.d.ts +0 -2
- package/src/components/titan-layout/layout-sidebar.tsx +1 -4
- package/src/components/titan-layout/titan-layout.module.less +45 -14
- package/src/components/titan-layout/titan-layout.module.less.d.ts +4 -0
- package/src/components/titan-layout/titan-layout.stories.tsx +51 -15
- package/src/components/titan-layout/titan-layout.tsx +78 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,0BAA0B;IACvC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,0BAA0B;IACvC,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA2D9C,CAAC"}
|
|
@@ -6,6 +6,6 @@ import { LayoutHeaderNavigationTrigger } from './layout-header-links';
|
|
|
6
6
|
import * as Styles from './layout-header.module.less';
|
|
7
7
|
export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, logo, profile, onBurgerClick, ...rest }) => {
|
|
8
8
|
const { breakpoint } = useTitanLayoutContext();
|
|
9
|
-
return (_jsx(LayoutPlacementContext.Provider, { value: "top", children: _jsxs("div", { className: classNames(Styles.header, className), ...rest, "data-cy": "header-navigation", children: [_jsxs("div", { className: classNames(Styles.heTopLeft), "data-cy": "navigation-left", children: [breakpoint.isMobile && (_jsx(LayoutHeaderNavigationTrigger, { id: "burger", title: "", icon: SvgBurgerMenu, iconActive: SvgBurgerMenu, className: "m-r-1", onClick: onBurgerClick })), logo] }), _jsx("div", { className: classNames(Styles.heTopCenter, centerClassName), "data-cy": "navigation-center", children: center }), _jsxs("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName), "data-cy": "navigation-right", children: [!!rightText && _jsx("div", { className: Styles.heTopRightText, children: rightText }), right, profile] })] }) }));
|
|
9
|
+
return (_jsx(LayoutPlacementContext.Provider, { value: "top", children: _jsxs("div", { className: classNames(Styles.header, className), ...rest, "data-cy": "header-navigation", children: [_jsxs("div", { className: classNames(Styles.heTopLeft), "data-cy": "navigation-left", children: [breakpoint.isMobile && (_jsx(LayoutHeaderNavigationTrigger, { id: "burger", title: "", icon: SvgBurgerMenu, iconActive: SvgBurgerMenu, className: "m-r-1", onClick: onBurgerClick })), logo] }), _jsx("div", { className: classNames(Styles.heTopCenter, 'd-f align-items-center justify-content-center', centerClassName), "data-cy": "navigation-center", children: center }), _jsxs("div", { className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName), "data-cy": "navigation-right", children: [!!rightText && _jsx("div", { className: Styles.heTopRightText, children: rightText }), right, profile] })] }) }));
|
|
10
10
|
};
|
|
11
11
|
//# sourceMappingURL=layout-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-header.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,2DAA2D,CAAC;AACtF,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAyBtD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,SAAS,EACT,cAAc,EACd,MAAM,EACN,eAAe,EACf,IAAI,EACJ,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACV,EAAE,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/C,OAAO,CACH,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,YACxC,eACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAC3C,IAAI,aACA,mBAAmB,aAE3B,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,aAAU,iBAAiB,aAClE,UAAU,CAAC,QAAQ,IAAI,CACpB,KAAC,6BAA6B,IAC1B,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,EAAE,EACR,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,aAAa,GACxB,CACL,EACA,IAAI,IACH,EACN,cACI,SAAS,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"layout-header.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,2DAA2D,CAAC;AACtF,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAyBtD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,SAAS,EACT,cAAc,EACd,MAAM,EACN,eAAe,EACf,IAAI,EACJ,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACV,EAAE,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/C,OAAO,CACH,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAC,KAAK,YACxC,eACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAC3C,IAAI,aACA,mBAAmB,aAE3B,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,aAAU,iBAAiB,aAClE,UAAU,CAAC,QAAQ,IAAI,CACpB,KAAC,6BAA6B,IAC1B,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,EAAE,EACR,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,aAAa,GACxB,CACL,EACA,IAAI,IACH,EACN,cACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,WAAW,EAClB,+CAA+C,EAC/C,eAAe,CAClB,aACO,mBAAmB,YAE1B,MAAM,GACL,EACN,eACI,SAAS,EAAE,UAAU,CACjB,qDAAqD,EACrD,MAAM,CAAC,UAAU,EACjB,cAAc,CACjB,aACO,kBAAkB,aAEzB,CAAC,CAAC,SAAS,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,SAAS,GAAO,EACvE,KAAK,EACL,OAAO,IACN,IACJ,GACwB,CACrC,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -4,28 +4,23 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
-
display:
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
8
9
|
|
|
9
10
|
background-color: @color-white;
|
|
10
11
|
color: @color-black;
|
|
12
|
+
border-bottom: 1px solid @color-neutral-60;
|
|
11
13
|
|
|
12
14
|
& > * {
|
|
13
15
|
overflow-y: hidden;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
.he-top-left {
|
|
17
|
-
grid-column: span 1;
|
|
18
19
|
display: flex;
|
|
19
20
|
align-items: center;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
.he-top-center {
|
|
23
|
-
grid-column: span 1;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
23
|
.he-top-right {
|
|
27
|
-
grid-column: span 1;
|
|
28
|
-
|
|
29
24
|
& > * {
|
|
30
25
|
color: @color-black;
|
|
31
26
|
}
|
|
@@ -92,23 +87,35 @@
|
|
|
92
87
|
// desktop
|
|
93
88
|
@media only screen and (min-width: 768px) {
|
|
94
89
|
.header {
|
|
95
|
-
grid-template-columns: repeat(3, 1fr);
|
|
96
|
-
grid-template-rows: 48px;
|
|
97
|
-
|
|
98
90
|
.navigation-link {
|
|
99
91
|
margin: 6px 2px;
|
|
100
92
|
padding: 6px 6px;
|
|
101
93
|
}
|
|
94
|
+
|
|
95
|
+
.he-top-left {
|
|
96
|
+
padding-left: @spacing-1;
|
|
97
|
+
}
|
|
102
98
|
}
|
|
99
|
+
}
|
|
100
|
+
// desktop wide
|
|
101
|
+
@media only screen and (min-width: 1200px) {
|
|
102
|
+
.header {
|
|
103
|
+
display: grid;
|
|
104
|
+
grid-template-columns: repeat(3, 1fr);
|
|
105
|
+
grid-template-rows: 48px;
|
|
103
106
|
|
|
104
|
-
|
|
105
|
-
|
|
107
|
+
.he-top-left,
|
|
108
|
+
.he-top-center,
|
|
109
|
+
.he-top-right {
|
|
110
|
+
grid-column: span 1;
|
|
111
|
+
}
|
|
106
112
|
}
|
|
107
113
|
}
|
|
108
114
|
|
|
109
115
|
// mobile
|
|
110
116
|
@media only screen and (max-width: 768px) {
|
|
111
117
|
.header {
|
|
118
|
+
display: grid;
|
|
112
119
|
grid-template-columns: repeat(3, 1fr);
|
|
113
120
|
grid-template-rows: 44px;
|
|
114
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAe1F,gCAAgC;AAChC,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAe1F,gCAAgC;AAChC,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CAiBxF;AAED,mCAAmC;AACnC,wBAAgB,yBAAyB,CAAC,EACtC,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACX,EAAE,8BAA8B,2CAehC"}
|
|
@@ -8,9 +8,9 @@ const WrappedLink = ({ children, wrapper: WrapperComponent }) => {
|
|
|
8
8
|
};
|
|
9
9
|
/** Side Navigation menu link */
|
|
10
10
|
export function TitanLayoutSidebarLink({ wrapper, ...props }) {
|
|
11
|
-
const { NavigationComponent } = useTitanLayoutContext();
|
|
11
|
+
const { NavigationComponent, breakpoint: { isMobile }, } = useTitanLayoutContext();
|
|
12
12
|
const element = (_jsx(InternalSideNavigationLink, { ...props, navigationComponent: NavigationComponent, submenuExpanded: undefined, dataPrefix: "navigation-link", tag: getCounterTag(props.counter, props.tag) }));
|
|
13
|
-
return wrapper ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
13
|
+
return wrapper && !isMobile ? _jsx(WrappedLink, { wrapper: wrapper, children: element }) : element;
|
|
14
14
|
}
|
|
15
15
|
/** Side Navigation menu trigger */
|
|
16
16
|
export function TitanLayoutSidebarTrigger({ wrapper, onMobileClick, onClick, ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,0BAA0B,EAC1B,6BAA6B,GAChC,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,GAGZ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC5C,OAAO,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAoB,CAAC;AAC7E,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,UAAU,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IACrF,MAAM,
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,0BAA0B,EAC1B,6BAA6B,GAChC,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,GAGZ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC5C,OAAO,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAoB,CAAC;AAC7E,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,UAAU,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IACrF,MAAM,EACF,mBAAmB,EACnB,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,CACZ,KAAC,0BAA0B,OACnB,KAAK,EACT,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,iBAAiB,EAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,GAC9C,CACL,CAAC;IAEF,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACnG,CAAC;AAED,mCAAmC;AACnC,MAAM,UAAU,yBAAyB,CAAC,EACtC,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACqB;IAC7B,MAAM,EACF,UAAU,EAAE,EAAE,QAAQ,EAAE,GAC3B,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,OAAO,GAAG,CACZ,KAAC,6BAA6B,OACtB,KAAK,EACT,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,oBAAoB,EAC/B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,EAC5C,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,GAChE,CACL,CAAC;IACF,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,GAAe,CAAC,CAAC,CAAC,OAAO,CAAC;AACnG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,
|
|
1
|
+
{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqFhD,CAAC"}
|
|
@@ -10,11 +10,11 @@ import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context'
|
|
|
10
10
|
import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink, } from './layout-sidebar-links-internal';
|
|
11
11
|
import * as Styles from './layout-sidebar.module.less';
|
|
12
12
|
import { withTooltip } from './with-tooltip';
|
|
13
|
-
export const LayoutSidebar = ({ className,
|
|
13
|
+
export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded, onBarExpandChange, onSubmenuExpandChange, mainItems, top, bottom, navigationComponent, }) => {
|
|
14
14
|
const handleClick = (e) => {
|
|
15
15
|
e.stopPropagation();
|
|
16
16
|
};
|
|
17
|
-
return (_jsx(LayoutPlacementContext.Provider, { value: "side", children: _jsxs("div", { className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && barExpanded && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
|
|
17
|
+
return (_jsx(LayoutPlacementContext.Provider, { value: "side", children: _jsxs("div", { className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && barExpanded && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim), className), "data-cy": "side-navigation", onClick: handleClick, 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: 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) }) })] }))] }) }));
|
|
18
18
|
};
|
|
19
19
|
LayoutSidebar.displayName = 'LayoutSidebar';
|
|
20
20
|
/** 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;
|
|
1
|
+
{"version":3,"file":"layout-sidebar.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,21 +15,6 @@
|
|
|
15
15
|
align-items: stretch;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
// desktop version positioned with flex
|
|
19
|
-
.nav-flex {
|
|
20
|
-
flex-basis: var(--nav-offset-left);
|
|
21
|
-
flex-grow: 0;
|
|
22
|
-
flex-shrink: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// desktop version positioned with fixed
|
|
26
|
-
.nav-fixed {
|
|
27
|
-
position: fixed;
|
|
28
|
-
top: var(--nav-offset-top);
|
|
29
|
-
bottom: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
18
|
// mobile version
|
|
34
19
|
.nav-drawer {
|
|
35
20
|
display: none;
|
|
@@ -156,7 +141,6 @@
|
|
|
156
141
|
// desktop version expanded
|
|
157
142
|
.nav-wide {
|
|
158
143
|
width: var(--nav-offset-left);
|
|
159
|
-
padding-top: @spacing-2;
|
|
160
144
|
|
|
161
145
|
.toggle {
|
|
162
146
|
.toggle-content {
|
|
@@ -177,6 +161,10 @@
|
|
|
177
161
|
margin-top: @spacing-1;
|
|
178
162
|
margin-bottom: @spacing-1;
|
|
179
163
|
}
|
|
164
|
+
|
|
165
|
+
.nav-main {
|
|
166
|
+
padding-top: @spacing-1;
|
|
167
|
+
}
|
|
180
168
|
}
|
|
181
169
|
|
|
182
170
|
.nav-drawer,
|
|
@@ -17,11 +17,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
17
17
|
state?: TitanLayoutState;
|
|
18
18
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
19
19
|
header?: ReactElement;
|
|
20
|
+
top?: ReactElement;
|
|
21
|
+
sideTop?: ReactElement[];
|
|
20
22
|
profile?: ReactElement;
|
|
21
23
|
extraLinks?: ReactElement;
|
|
22
24
|
extraLinksTop?: ReactElement;
|
|
23
25
|
extraText?: string;
|
|
24
|
-
sidebarTop?: ReactElement[];
|
|
25
26
|
};
|
|
26
27
|
export interface TitanLayoutContentProps {
|
|
27
28
|
children: ReactNode;
|
|
@@ -29,8 +30,8 @@ export interface TitanLayoutContentProps {
|
|
|
29
30
|
export declare const TitanLayout: FC<TitanLayoutProps> & {
|
|
30
31
|
Content: FC<TitanLayoutContentProps>;
|
|
31
32
|
Logo: FC<TitanLayoutLogoProps>;
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
Link: typeof TitanLayoutSidebarLink;
|
|
34
|
+
Trigger: typeof TitanLayoutSidebarTrigger;
|
|
34
35
|
};
|
|
35
36
|
export {};
|
|
36
37
|
//# sourceMappingURL=titan-layout.d.ts.map
|
|
@@ -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,
|
|
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;AAI3F,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,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAEjD,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;CACtB,CAAC;AA4OF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACvB;AA4BD,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { Children, Fragment, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
|
|
3
|
+
import { Children, Fragment, isValidElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { DefaultNavLinkComponent } from '../../utils/navigation-context';
|
|
5
5
|
import { useTitanBreakpoint } from '../../utils/use-breakpoint';
|
|
6
6
|
import { LayoutContext, LayoutPlacementContext, } from './layout-context';
|
|
@@ -26,7 +26,7 @@ const useVariant = (appearance) => useMemo(() => {
|
|
|
26
26
|
isLegacy,
|
|
27
27
|
isAnvil1,
|
|
28
28
|
isAnvil2,
|
|
29
|
-
isSequent: isLegacy ||
|
|
29
|
+
isSequent: isLegacy || isAnvil2,
|
|
30
30
|
};
|
|
31
31
|
}, [appearance]);
|
|
32
32
|
const useLayoutChildren = (children) => useMemo(() => Children.toArray(children).reduce((out, item) => {
|
|
@@ -45,7 +45,7 @@ const useLayoutChildren = (children) => useMemo(() => Children.toArray(children)
|
|
|
45
45
|
}, {
|
|
46
46
|
logo: _jsx(TitanLayoutLogo, {}),
|
|
47
47
|
}), [children]);
|
|
48
|
-
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText,
|
|
48
|
+
const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, top, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText, sideTop, }) => {
|
|
49
49
|
const breakpoint = useTitanBreakpoint();
|
|
50
50
|
const isMobile = breakpoint.isMobile;
|
|
51
51
|
const context = useMemo(() => ({
|
|
@@ -87,23 +87,51 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationC
|
|
|
87
87
|
submenuExpanded: expanded ? id : undefined,
|
|
88
88
|
});
|
|
89
89
|
}, [state, onStateChange]);
|
|
90
|
-
const [layoutStyles] = useState({});
|
|
91
90
|
const layoutClass = variant.isLegacy
|
|
92
91
|
? Styles.layoutLegacy
|
|
93
92
|
: variant.isAnvil1
|
|
94
93
|
? Styles.layoutAnvil1
|
|
95
94
|
: Styles.layoutAnvil2;
|
|
96
|
-
return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile
|
|
97
|
-
? Styles.
|
|
98
|
-
: (state === null || state === void 0 ? void 0 : state.navCollapsed)
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
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, !isMobile && (state === null || state === void 0 ? void 0 : state.navCollapsed)
|
|
96
|
+
? Styles.layoutNavSlim
|
|
97
|
+
: Styles.layoutNavWide, layoutClass), children: [variant.isSequent && _jsx("div", { className: Styles.topPlaceholder }), _jsx(LayoutHeader, { className: Styles.top, logo: logo, profile: isMobile ? undefined : profile, center: top, rightText: isMobile ? undefined : extraText, right: _jsxs(Fragment, { children: [extraLinksTop, !isMobile && extraLinks] }), onBurgerClick: onBurgerClick }), _jsx(LayoutSidebar, { className: Styles.side, mobile: breakpoint.isMobile, barExpanded: isMobile ? mobileDrawerOpened : !(state === null || state === void 0 ? void 0 : state.navCollapsed), submenuExpanded: state === null || state === void 0 ? void 0 : state.submenuExpanded, onBarExpandChange: onBarExpandChange, onSubmenuExpandChange: onSubmenuExpandChange, 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 }), _jsx(LayoutContent, { header: header, anvil2: variant.isAnvil2, children: content })] }) }) }));
|
|
98
|
+
};
|
|
99
|
+
const TitanLayoutHeaderObserved = ({ children, heightChange }) => {
|
|
100
|
+
const ref = useRef(null);
|
|
101
|
+
useEffect(() => {
|
|
102
|
+
if (ref.current) {
|
|
103
|
+
const updatePosition = () => {
|
|
104
|
+
if (ref.current && heightChange) {
|
|
105
|
+
const pos = ref.current.getBoundingClientRect();
|
|
106
|
+
heightChange(pos.height);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
const observer = new ResizeObserver(updatePosition);
|
|
110
|
+
observer.observe(ref.current);
|
|
111
|
+
updatePosition();
|
|
112
|
+
return () => observer.disconnect();
|
|
113
|
+
}
|
|
114
|
+
}, [heightChange]);
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
return () => {
|
|
117
|
+
heightChange === null || heightChange === void 0 ? void 0 : heightChange(0);
|
|
118
|
+
};
|
|
119
|
+
}, [heightChange]);
|
|
120
|
+
return (_jsx("div", { ref: ref, className: Styles.header, children: children }));
|
|
101
121
|
};
|
|
102
122
|
const TitanLayoutContent = ({ children }) => children;
|
|
123
|
+
const LayoutContent = ({ anvil2, children, header, }) => {
|
|
124
|
+
const [anvil2Styles, setAnvil2Styles] = useState({});
|
|
125
|
+
const updateIndicatorsHeight = useCallback((offset) => {
|
|
126
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
127
|
+
}, []);
|
|
128
|
+
return (_jsxs("div", { className: Styles.content, style: anvil2Styles, children: [!!header &&
|
|
129
|
+
(anvil2 ? (_jsx(TitanLayoutHeaderObserved, { heightChange: updateIndicatorsHeight, children: header })) : (header)), children] }));
|
|
130
|
+
};
|
|
103
131
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
104
132
|
Content: TitanLayoutContent,
|
|
105
133
|
Logo: TitanLayoutLogo,
|
|
106
|
-
|
|
107
|
-
|
|
134
|
+
Link: TitanLayoutSidebarLink,
|
|
135
|
+
Trigger: TitanLayoutSidebarTrigger,
|
|
108
136
|
});
|
|
109
137
|
//# sourceMappingURL=titan-layout.js.map
|
|
@@ -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,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,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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"}
|
|
@@ -8,30 +8,53 @@
|
|
|
8
8
|
@bg-color-hover: rgba(255, 255, 255, 0.08);
|
|
9
9
|
@bg-color-active: rgba(120, 187, 250, 0.2);
|
|
10
10
|
|
|
11
|
-
.layout-legacy {
|
|
12
|
-
padding-left: var(--nav-offset-left);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
11
|
.layout-anvil1 {
|
|
16
|
-
|
|
12
|
+
height: calc(100vh - var(--nav-offset-top));
|
|
13
|
+
margin-top: var(--nav-offset-top);
|
|
14
|
+
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
|
|
18
|
+
.side {
|
|
19
|
+
flex-basis: var(--nav-offset-left);
|
|
20
|
+
flex-grow: 0;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.content {
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
17
31
|
}
|
|
18
32
|
|
|
19
33
|
.layout-anvil2 {
|
|
20
|
-
|
|
34
|
+
.header {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: var(--nav-offset-top);
|
|
37
|
+
z-index: 989;
|
|
38
|
+
}
|
|
21
39
|
}
|
|
22
40
|
|
|
23
41
|
.layout-legacy,
|
|
24
42
|
.layout-anvil2 {
|
|
43
|
+
padding-left: var(--nav-offset-left);
|
|
44
|
+
|
|
25
45
|
.top-placeholder {
|
|
26
46
|
height: var(--nav-offset-top);
|
|
27
47
|
}
|
|
28
48
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
49
|
+
&.layout-desktop {
|
|
50
|
+
.side {
|
|
51
|
+
position: fixed;
|
|
52
|
+
top: var(--nav-offset-top);
|
|
53
|
+
bottom: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
z-index: @z-index-global-nav;
|
|
57
|
+
}
|
|
35
58
|
}
|
|
36
59
|
}
|
|
37
60
|
|
|
@@ -43,11 +66,19 @@
|
|
|
43
66
|
--nav-offset-left: 0;
|
|
44
67
|
}
|
|
45
68
|
|
|
46
|
-
&.layout-nav-slim {
|
|
69
|
+
&.layout-desktop.layout-nav-slim {
|
|
47
70
|
--nav-offset-left: 64px;
|
|
48
71
|
}
|
|
49
72
|
|
|
50
|
-
&.layout-nav-wide {
|
|
73
|
+
&.layout-desktop.layout-nav-wide {
|
|
51
74
|
--nav-offset-left: 212px;
|
|
52
75
|
}
|
|
76
|
+
|
|
77
|
+
.top {
|
|
78
|
+
position: fixed;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
right: 0;
|
|
82
|
+
z-index: 991;
|
|
83
|
+
}
|
|
53
84
|
}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
interface LayoutContentArgs {
|
|
2
|
+
header: boolean;
|
|
3
|
+
sideTop: boolean;
|
|
4
|
+
extraText: boolean;
|
|
5
|
+
}
|
|
3
6
|
declare const _default: {
|
|
4
7
|
title: string;
|
|
5
|
-
component: FC<TitanLayoutProps> & {
|
|
6
|
-
Content: FC<import("./titan-layout").TitanLayoutContentProps>;
|
|
7
|
-
Logo: FC<import("./layout-logo").TitanLayoutLogoProps>;
|
|
8
|
-
SidebarLink: typeof import("./layout-sidebar-links").TitanLayoutSidebarLink;
|
|
9
|
-
SidebarTrigger: typeof import("./layout-sidebar-links").TitanLayoutSidebarTrigger;
|
|
10
|
-
};
|
|
11
8
|
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
12
9
|
parameters: {};
|
|
10
|
+
argTypes: {};
|
|
11
|
+
args: LayoutContentArgs;
|
|
13
12
|
};
|
|
14
13
|
export default _default;
|
|
15
|
-
export declare const TitanLayoutLegacy: () => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export declare const TitanLayoutAnvil1: () => import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export declare const TitanLayoutAnvil2: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const TitanLayoutLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
18
17
|
//# sourceMappingURL=titan-layout.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"
|
|
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;CACtB;;;;;;UAWQ,iBAAiB;;AAT1B,wBAUE;AAgKF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAOxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAWxD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
|
|
2
|
+
import { Announcement, Page as Anvil2Page, Button, Popover } from '@servicetitan/anvil2';
|
|
3
3
|
import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
|
|
4
4
|
import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
|
|
5
5
|
import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
|
|
@@ -13,9 +13,14 @@ import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
|
|
|
13
13
|
import { ProfileDropdown, TitanLayout } from './';
|
|
14
14
|
export default {
|
|
15
15
|
title: 'Navigation/TitanLayout',
|
|
16
|
-
component: TitanLayout,
|
|
17
16
|
decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
18
17
|
parameters: {},
|
|
18
|
+
argTypes: {},
|
|
19
|
+
args: {
|
|
20
|
+
header: true,
|
|
21
|
+
sideTop: true,
|
|
22
|
+
extraText: true,
|
|
23
|
+
},
|
|
19
24
|
};
|
|
20
25
|
const mainNavItems = [
|
|
21
26
|
items.dashboard,
|
|
@@ -38,25 +43,30 @@ const SideLinkPopoverWrapper = ({ children, context }) => {
|
|
|
38
43
|
return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: (props) => _jsx("div", { ...props, children: children }) }), _jsx(Popover.Content, { style: context.styles.popoverContent, children: "popover content" })] }));
|
|
39
44
|
};
|
|
40
45
|
const sidebarTop = () => [
|
|
41
|
-
_jsx(TitanLayout.
|
|
42
|
-
_jsx(TitanLayout.
|
|
43
|
-
_jsx(TitanLayout.
|
|
46
|
+
_jsx(TitanLayout.Link, { ...items.tasks }, "tasks"),
|
|
47
|
+
_jsx(TitanLayout.Link, { ...items.calls }, "calls"),
|
|
48
|
+
_jsx(TitanLayout.Trigger, { ...items.marketing, isActive: false, wrapper: SideLinkPopoverWrapper, onMobileClick: () => alert('clicked'), counter: 50 }, "marketing"),
|
|
44
49
|
];
|
|
45
|
-
const
|
|
50
|
+
const ContentHeader = () => {
|
|
51
|
+
const [longInfo, setLongInfo] = useState(false);
|
|
52
|
+
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 ? '↑' : '↓' })] }) })] }));
|
|
53
|
+
};
|
|
54
|
+
const useLayoutProps = (args) => {
|
|
46
55
|
const [state, setState] = useState(undefined);
|
|
47
56
|
return {
|
|
48
57
|
state,
|
|
49
58
|
onStateChange: setState,
|
|
59
|
+
navigationComponent: NavLinkMock,
|
|
50
60
|
navigationMainItems: mainNavItems,
|
|
51
61
|
profile,
|
|
62
|
+
header: args.header ? _jsx(ContentHeader, {}) : undefined,
|
|
52
63
|
extraLinks,
|
|
53
64
|
extraLinksTop,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
extraText: 'EST (-8 hrs)',
|
|
65
|
+
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
66
|
+
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
57
67
|
};
|
|
58
68
|
};
|
|
59
|
-
export const TitanLayoutLegacy = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "legacy", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(LocationInfo, {}) })] }));
|
|
60
|
-
export const TitanLayoutAnvil1 = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "anvil1", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil1Page, { children: _jsx(LocationInfo, {}) }) })] }));
|
|
61
|
-
export const TitanLayoutAnvil2 = () => (_jsxs(TitanLayout, { ...useLayoutProps(), appearance: "anvil2", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil2Page, { children: _jsx(Anvil2Page.Content, { children: _jsx(LocationInfo, {}) }) }) })] }));
|
|
69
|
+
export const TitanLayoutLegacy = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "legacy", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(LocationInfo, {}) })] }));
|
|
70
|
+
export const TitanLayoutAnvil1 = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "anvil1", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil1Page, { children: _jsx(LocationInfo, {}) }) })] }));
|
|
71
|
+
export const TitanLayoutAnvil2 = (args) => (_jsxs(TitanLayout, { ...useLayoutProps(args), appearance: "anvil2", children: [_jsx(TitanLayout.Logo, { title: true }), _jsx(TitanLayout.Content, { children: _jsx(Anvil2Page, { children: _jsx(Anvil2Page.Content, { children: _jsx(LocationInfo, {}) }) }) })] }));
|
|
62
72
|
//# sourceMappingURL=titan-layout.stories.js.map
|
|
@@ -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,IAAI,IAAI,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,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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"}
|
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.64cfcfe.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": "64cfcfe344bbe0ad0d6a25cdae1c6e1b63bda41f"
|
|
46
46
|
}
|
|
@@ -4,28 +4,23 @@
|
|
|
4
4
|
@size-links-tiny: 24px;
|
|
5
5
|
|
|
6
6
|
.header {
|
|
7
|
-
display:
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: space-between;
|
|
8
9
|
|
|
9
10
|
background-color: @color-white;
|
|
10
11
|
color: @color-black;
|
|
12
|
+
border-bottom: 1px solid @color-neutral-60;
|
|
11
13
|
|
|
12
14
|
& > * {
|
|
13
15
|
overflow-y: hidden;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
.he-top-left {
|
|
17
|
-
grid-column: span 1;
|
|
18
19
|
display: flex;
|
|
19
20
|
align-items: center;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
.he-top-center {
|
|
23
|
-
grid-column: span 1;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
23
|
.he-top-right {
|
|
27
|
-
grid-column: span 1;
|
|
28
|
-
|
|
29
24
|
& > * {
|
|
30
25
|
color: @color-black;
|
|
31
26
|
}
|
|
@@ -92,23 +87,35 @@
|
|
|
92
87
|
// desktop
|
|
93
88
|
@media only screen and (min-width: 768px) {
|
|
94
89
|
.header {
|
|
95
|
-
grid-template-columns: repeat(3, 1fr);
|
|
96
|
-
grid-template-rows: 48px;
|
|
97
|
-
|
|
98
90
|
.navigation-link {
|
|
99
91
|
margin: 6px 2px;
|
|
100
92
|
padding: 6px 6px;
|
|
101
93
|
}
|
|
94
|
+
|
|
95
|
+
.he-top-left {
|
|
96
|
+
padding-left: @spacing-1;
|
|
97
|
+
}
|
|
102
98
|
}
|
|
99
|
+
}
|
|
100
|
+
// desktop wide
|
|
101
|
+
@media only screen and (min-width: 1200px) {
|
|
102
|
+
.header {
|
|
103
|
+
display: grid;
|
|
104
|
+
grid-template-columns: repeat(3, 1fr);
|
|
105
|
+
grid-template-rows: 48px;
|
|
103
106
|
|
|
104
|
-
|
|
105
|
-
|
|
107
|
+
.he-top-left,
|
|
108
|
+
.he-top-center,
|
|
109
|
+
.he-top-right {
|
|
110
|
+
grid-column: span 1;
|
|
111
|
+
}
|
|
106
112
|
}
|
|
107
113
|
}
|
|
108
114
|
|
|
109
115
|
// mobile
|
|
110
116
|
@media only screen and (max-width: 768px) {
|
|
111
117
|
.header {
|
|
118
|
+
display: grid;
|
|
112
119
|
grid-template-columns: repeat(3, 1fr);
|
|
113
120
|
grid-template-rows: 44px;
|
|
114
121
|
|
|
@@ -63,7 +63,11 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
|
|
|
63
63
|
{logo}
|
|
64
64
|
</div>
|
|
65
65
|
<div
|
|
66
|
-
className={classNames(
|
|
66
|
+
className={classNames(
|
|
67
|
+
Styles.heTopCenter,
|
|
68
|
+
'd-f align-items-center justify-content-center',
|
|
69
|
+
centerClassName
|
|
70
|
+
)}
|
|
67
71
|
data-cy="navigation-center"
|
|
68
72
|
>
|
|
69
73
|
{center}
|
|
@@ -17,7 +17,10 @@ const WrappedLink: FC<{
|
|
|
17
17
|
|
|
18
18
|
/** Side Navigation menu link */
|
|
19
19
|
export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
|
|
20
|
-
const {
|
|
20
|
+
const {
|
|
21
|
+
NavigationComponent,
|
|
22
|
+
breakpoint: { isMobile },
|
|
23
|
+
} = useTitanLayoutContext();
|
|
21
24
|
|
|
22
25
|
const element = (
|
|
23
26
|
<InternalSideNavigationLink
|
|
@@ -29,7 +32,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
|
|
|
29
32
|
/>
|
|
30
33
|
);
|
|
31
34
|
|
|
32
|
-
return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
35
|
+
return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
/** Side Navigation menu trigger */
|
|
@@ -15,21 +15,6 @@
|
|
|
15
15
|
align-items: stretch;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
// desktop version positioned with flex
|
|
19
|
-
.nav-flex {
|
|
20
|
-
flex-basis: var(--nav-offset-left);
|
|
21
|
-
flex-grow: 0;
|
|
22
|
-
flex-shrink: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// desktop version positioned with fixed
|
|
26
|
-
.nav-fixed {
|
|
27
|
-
position: fixed;
|
|
28
|
-
top: var(--nav-offset-top);
|
|
29
|
-
bottom: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
18
|
// mobile version
|
|
34
19
|
.nav-drawer {
|
|
35
20
|
display: none;
|
|
@@ -156,7 +141,6 @@
|
|
|
156
141
|
// desktop version expanded
|
|
157
142
|
.nav-wide {
|
|
158
143
|
width: var(--nav-offset-left);
|
|
159
|
-
padding-top: @spacing-2;
|
|
160
144
|
|
|
161
145
|
.toggle {
|
|
162
146
|
.toggle-content {
|
|
@@ -177,6 +161,10 @@
|
|
|
177
161
|
margin-top: @spacing-1;
|
|
178
162
|
margin-bottom: @spacing-1;
|
|
179
163
|
}
|
|
164
|
+
|
|
165
|
+
.nav-main {
|
|
166
|
+
padding-top: @spacing-1;
|
|
167
|
+
}
|
|
180
168
|
}
|
|
181
169
|
|
|
182
170
|
.nav-drawer,
|
|
@@ -6,8 +6,6 @@ export const navClose: string;
|
|
|
6
6
|
export const navCloseWrapper: string;
|
|
7
7
|
export const navDrawer: string;
|
|
8
8
|
export const navDrawerOpened: string;
|
|
9
|
-
export const navFixed: string;
|
|
10
|
-
export const navFlex: string;
|
|
11
9
|
export const navFooter: string;
|
|
12
10
|
export const navGroupItem: string;
|
|
13
11
|
export const navGroupWrapper: string;
|
|
@@ -31,7 +31,6 @@ export interface LayoutSidebarProps {
|
|
|
31
31
|
top?: ReactElement[];
|
|
32
32
|
bottom?: ReactElement;
|
|
33
33
|
mainItems?: NavigationItemData[];
|
|
34
|
-
flex: boolean;
|
|
35
34
|
barExpanded: boolean;
|
|
36
35
|
submenuExpanded: string | undefined;
|
|
37
36
|
mobile: boolean;
|
|
@@ -42,7 +41,6 @@ export interface LayoutSidebarProps {
|
|
|
42
41
|
|
|
43
42
|
export const LayoutSidebar: FC<LayoutSidebarProps> = ({
|
|
44
43
|
className,
|
|
45
|
-
flex,
|
|
46
44
|
mobile,
|
|
47
45
|
barExpanded,
|
|
48
46
|
submenuExpanded,
|
|
@@ -65,7 +63,6 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
|
|
|
65
63
|
mobile && Styles.navDrawer,
|
|
66
64
|
mobile && barExpanded && Styles.navDrawerOpened,
|
|
67
65
|
!mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
|
|
68
|
-
!mobile && (flex ? Styles.navFlex : Styles.navFixed),
|
|
69
66
|
className
|
|
70
67
|
)}
|
|
71
68
|
data-cy="side-navigation"
|
|
@@ -82,7 +79,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
|
|
|
82
79
|
</div>
|
|
83
80
|
</div>
|
|
84
81
|
)}
|
|
85
|
-
{top?.length && <SidebarTop>{top}</SidebarTop>}
|
|
82
|
+
{!!top?.length && <SidebarTop>{top}</SidebarTop>}
|
|
86
83
|
|
|
87
84
|
<div data-cy="navigation-items">
|
|
88
85
|
{mainItems?.map(item =>
|
|
@@ -8,30 +8,53 @@
|
|
|
8
8
|
@bg-color-hover: rgba(255, 255, 255, 0.08);
|
|
9
9
|
@bg-color-active: rgba(120, 187, 250, 0.2);
|
|
10
10
|
|
|
11
|
-
.layout-legacy {
|
|
12
|
-
padding-left: var(--nav-offset-left);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
11
|
.layout-anvil1 {
|
|
16
|
-
|
|
12
|
+
height: calc(100vh - var(--nav-offset-top));
|
|
13
|
+
margin-top: var(--nav-offset-top);
|
|
14
|
+
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
|
|
18
|
+
.side {
|
|
19
|
+
flex-basis: var(--nav-offset-left);
|
|
20
|
+
flex-grow: 0;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.content {
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
17
31
|
}
|
|
18
32
|
|
|
19
33
|
.layout-anvil2 {
|
|
20
|
-
|
|
34
|
+
.header {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: var(--nav-offset-top);
|
|
37
|
+
z-index: 989;
|
|
38
|
+
}
|
|
21
39
|
}
|
|
22
40
|
|
|
23
41
|
.layout-legacy,
|
|
24
42
|
.layout-anvil2 {
|
|
43
|
+
padding-left: var(--nav-offset-left);
|
|
44
|
+
|
|
25
45
|
.top-placeholder {
|
|
26
46
|
height: var(--nav-offset-top);
|
|
27
47
|
}
|
|
28
48
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
49
|
+
&.layout-desktop {
|
|
50
|
+
.side {
|
|
51
|
+
position: fixed;
|
|
52
|
+
top: var(--nav-offset-top);
|
|
53
|
+
bottom: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
z-index: @z-index-global-nav;
|
|
57
|
+
}
|
|
35
58
|
}
|
|
36
59
|
}
|
|
37
60
|
|
|
@@ -43,11 +66,19 @@
|
|
|
43
66
|
--nav-offset-left: 0;
|
|
44
67
|
}
|
|
45
68
|
|
|
46
|
-
&.layout-nav-slim {
|
|
69
|
+
&.layout-desktop.layout-nav-slim {
|
|
47
70
|
--nav-offset-left: 64px;
|
|
48
71
|
}
|
|
49
72
|
|
|
50
|
-
&.layout-nav-wide {
|
|
73
|
+
&.layout-desktop.layout-nav-wide {
|
|
51
74
|
--nav-offset-left: 212px;
|
|
52
75
|
}
|
|
76
|
+
|
|
77
|
+
.top {
|
|
78
|
+
position: fixed;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
right: 0;
|
|
82
|
+
z-index: 991;
|
|
83
|
+
}
|
|
53
84
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
export const __esModule: true;
|
|
2
|
+
export const content: string;
|
|
3
|
+
export const header: string;
|
|
2
4
|
export const layout: string;
|
|
3
5
|
export const layoutAnvil1: string;
|
|
4
6
|
export const layoutAnvil2: string;
|
|
7
|
+
export const layoutDesktop: string;
|
|
5
8
|
export const layoutLegacy: string;
|
|
6
9
|
export const layoutMobile: string;
|
|
7
10
|
export const layoutNavSlim: string;
|
|
8
11
|
export const layoutNavWide: string;
|
|
12
|
+
export const side: string;
|
|
9
13
|
export const top: string;
|
|
10
14
|
export const topPlaceholder: string;
|
|
11
15
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
|
|
1
|
+
import { Announcement, Page as Anvil2Page, Button, Popover } from '@servicetitan/anvil2';
|
|
2
2
|
import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
|
|
3
3
|
import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
|
|
4
4
|
import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
|
|
@@ -20,11 +20,22 @@ import { SideNavigationLinkWrapperProps } from '../left-navigation';
|
|
|
20
20
|
import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
|
|
21
21
|
import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
|
|
22
22
|
|
|
23
|
+
interface LayoutContentArgs {
|
|
24
|
+
header: boolean;
|
|
25
|
+
sideTop: boolean;
|
|
26
|
+
extraText: boolean;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
export default {
|
|
24
30
|
title: 'Navigation/TitanLayout',
|
|
25
|
-
component: TitanLayout,
|
|
26
31
|
decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
27
32
|
parameters: {},
|
|
33
|
+
argTypes: {},
|
|
34
|
+
args: {
|
|
35
|
+
header: true,
|
|
36
|
+
sideTop: true,
|
|
37
|
+
extraText: true,
|
|
38
|
+
} as LayoutContentArgs,
|
|
28
39
|
};
|
|
29
40
|
|
|
30
41
|
const mainNavItems = [
|
|
@@ -131,9 +142,9 @@ const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children,
|
|
|
131
142
|
};
|
|
132
143
|
|
|
133
144
|
const sidebarTop = () => [
|
|
134
|
-
<TitanLayout.
|
|
135
|
-
<TitanLayout.
|
|
136
|
-
<TitanLayout.
|
|
145
|
+
<TitanLayout.Link key="tasks" {...items.tasks} />,
|
|
146
|
+
<TitanLayout.Link key="calls" {...items.calls} />,
|
|
147
|
+
<TitanLayout.Trigger
|
|
137
148
|
key="marketing"
|
|
138
149
|
{...items.marketing}
|
|
139
150
|
isActive={false}
|
|
@@ -142,26 +153,51 @@ const sidebarTop = () => [
|
|
|
142
153
|
counter={50}
|
|
143
154
|
/>,
|
|
144
155
|
];
|
|
145
|
-
const
|
|
156
|
+
const ContentHeader = () => {
|
|
157
|
+
const [longInfo, setLongInfo] = useState(false);
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<Fragment>
|
|
161
|
+
<Announcement title="Some info" status="info" />
|
|
162
|
+
<Announcement title="Some warning" status="warning" />
|
|
163
|
+
<div
|
|
164
|
+
className="d-f justify-content-center align-items-center bg-purple-100-i"
|
|
165
|
+
style={{ height: longInfo ? '120px' : '48px' }}
|
|
166
|
+
>
|
|
167
|
+
<div className="d-f align-items-center gap-1">
|
|
168
|
+
custom content{' '}
|
|
169
|
+
<Button onClick={() => setLongInfo(!longInfo)} size="small" aria-label="test">
|
|
170
|
+
{longInfo ? '↑' : '↓'}
|
|
171
|
+
</Button>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</Fragment>
|
|
175
|
+
);
|
|
176
|
+
};
|
|
177
|
+
const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
|
|
146
178
|
const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
|
|
147
179
|
|
|
148
180
|
return {
|
|
149
181
|
state,
|
|
150
182
|
onStateChange: setState,
|
|
151
183
|
|
|
184
|
+
navigationComponent: NavLinkMock,
|
|
152
185
|
navigationMainItems: mainNavItems,
|
|
186
|
+
|
|
153
187
|
profile,
|
|
188
|
+
|
|
189
|
+
header: args.header ? <ContentHeader /> : undefined,
|
|
190
|
+
|
|
154
191
|
extraLinks,
|
|
155
192
|
extraLinksTop,
|
|
193
|
+
extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
|
|
156
194
|
|
|
157
|
-
|
|
158
|
-
navigationComponent: NavLinkMock,
|
|
159
|
-
extraText: 'EST (-8 hrs)',
|
|
195
|
+
sideTop: args.sideTop ? sidebarTop() : undefined,
|
|
160
196
|
};
|
|
161
197
|
};
|
|
162
198
|
|
|
163
|
-
export const TitanLayoutLegacy = () => (
|
|
164
|
-
<TitanLayout {...useLayoutProps()} appearance="legacy">
|
|
199
|
+
export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
|
|
200
|
+
<TitanLayout {...useLayoutProps(args)} appearance="legacy">
|
|
165
201
|
<TitanLayout.Logo title />
|
|
166
202
|
<TitanLayout.Content>
|
|
167
203
|
<LocationInfo />
|
|
@@ -169,8 +205,8 @@ export const TitanLayoutLegacy = () => (
|
|
|
169
205
|
</TitanLayout>
|
|
170
206
|
);
|
|
171
207
|
|
|
172
|
-
export const TitanLayoutAnvil1 = () => (
|
|
173
|
-
<TitanLayout {...useLayoutProps()} appearance="anvil1">
|
|
208
|
+
export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
|
|
209
|
+
<TitanLayout {...useLayoutProps(args)} appearance="anvil1">
|
|
174
210
|
<TitanLayout.Logo title />
|
|
175
211
|
<TitanLayout.Content>
|
|
176
212
|
<Anvil1Page>
|
|
@@ -180,8 +216,8 @@ export const TitanLayoutAnvil1 = () => (
|
|
|
180
216
|
</TitanLayout>
|
|
181
217
|
);
|
|
182
218
|
|
|
183
|
-
export const TitanLayoutAnvil2 = () => (
|
|
184
|
-
<TitanLayout {...useLayoutProps()} appearance="anvil2">
|
|
219
|
+
export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
|
|
220
|
+
<TitanLayout {...useLayoutProps(args)} appearance="anvil2">
|
|
185
221
|
<TitanLayout.Logo title />
|
|
186
222
|
<TitanLayout.Content>
|
|
187
223
|
<Anvil2Page>
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
useCallback,
|
|
12
12
|
useEffect,
|
|
13
13
|
useMemo,
|
|
14
|
+
useRef,
|
|
14
15
|
useState,
|
|
15
16
|
} from 'react';
|
|
16
17
|
import { NavigationItemData } from '../../utils/navigation';
|
|
@@ -50,11 +51,12 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
50
51
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
51
52
|
|
|
52
53
|
header?: ReactElement;
|
|
54
|
+
top?: ReactElement;
|
|
55
|
+
sideTop?: ReactElement[];
|
|
53
56
|
profile?: ReactElement;
|
|
54
57
|
extraLinks?: ReactElement;
|
|
55
58
|
extraLinksTop?: ReactElement;
|
|
56
59
|
extraText?: string;
|
|
57
|
-
sidebarTop?: ReactElement[];
|
|
58
60
|
};
|
|
59
61
|
|
|
60
62
|
const defaultSidebarContext: TitanLayoutSidebarContextType = {
|
|
@@ -76,7 +78,7 @@ const useVariant = (appearance: TitanLayoutProps['appearance']) =>
|
|
|
76
78
|
isLegacy,
|
|
77
79
|
isAnvil1,
|
|
78
80
|
isAnvil2,
|
|
79
|
-
isSequent: isLegacy ||
|
|
81
|
+
isSequent: isLegacy || isAnvil2,
|
|
80
82
|
};
|
|
81
83
|
}, [appearance]);
|
|
82
84
|
|
|
@@ -115,6 +117,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
115
117
|
children,
|
|
116
118
|
navigationComponent,
|
|
117
119
|
header,
|
|
120
|
+
top,
|
|
118
121
|
profile,
|
|
119
122
|
state,
|
|
120
123
|
onStateChange,
|
|
@@ -122,7 +125,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
122
125
|
extraLinks,
|
|
123
126
|
extraLinksTop,
|
|
124
127
|
extraText,
|
|
125
|
-
|
|
128
|
+
sideTop,
|
|
126
129
|
}) => {
|
|
127
130
|
const breakpoint = useTitanBreakpoint();
|
|
128
131
|
const isMobile = breakpoint.isMobile;
|
|
@@ -179,8 +182,6 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
179
182
|
[state, onStateChange]
|
|
180
183
|
);
|
|
181
184
|
|
|
182
|
-
const [layoutStyles] = useState<object>({});
|
|
183
|
-
|
|
184
185
|
const layoutClass = variant.isLegacy
|
|
185
186
|
? Styles.layoutLegacy
|
|
186
187
|
: variant.isAnvil1
|
|
@@ -194,21 +195,19 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
194
195
|
id={id}
|
|
195
196
|
className={classNames(
|
|
196
197
|
Styles.layout,
|
|
197
|
-
isMobile
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
: Styles.layoutNavWide,
|
|
198
|
+
isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
|
|
199
|
+
!isMobile && state?.navCollapsed
|
|
200
|
+
? Styles.layoutNavSlim
|
|
201
|
+
: Styles.layoutNavWide,
|
|
202
202
|
layoutClass
|
|
203
203
|
)}
|
|
204
|
-
style={layoutStyles}
|
|
205
204
|
>
|
|
206
205
|
{variant.isSequent && <div className={Styles.topPlaceholder} />}
|
|
207
206
|
<LayoutHeader
|
|
208
207
|
className={Styles.top}
|
|
209
208
|
logo={logo}
|
|
210
209
|
profile={isMobile ? undefined : profile}
|
|
211
|
-
center={
|
|
210
|
+
center={top}
|
|
212
211
|
rightText={isMobile ? undefined : extraText}
|
|
213
212
|
right={
|
|
214
213
|
<Fragment>
|
|
@@ -220,13 +219,13 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
220
219
|
/>
|
|
221
220
|
|
|
222
221
|
<LayoutSidebar
|
|
223
|
-
|
|
222
|
+
className={Styles.side}
|
|
224
223
|
mobile={breakpoint.isMobile}
|
|
225
224
|
barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
|
|
226
225
|
submenuExpanded={state?.submenuExpanded}
|
|
227
226
|
onBarExpandChange={onBarExpandChange}
|
|
228
227
|
onSubmenuExpandChange={onSubmenuExpandChange}
|
|
229
|
-
top={
|
|
228
|
+
top={sideTop}
|
|
230
229
|
mainItems={navigationMainItems}
|
|
231
230
|
navigationComponent={context.NavigationComponent}
|
|
232
231
|
bottom={
|
|
@@ -250,21 +249,83 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
|
|
|
250
249
|
}
|
|
251
250
|
/>
|
|
252
251
|
|
|
253
|
-
{
|
|
252
|
+
<LayoutContent header={header} anvil2={variant.isAnvil2}>
|
|
253
|
+
{content}
|
|
254
|
+
</LayoutContent>
|
|
254
255
|
</div>
|
|
255
256
|
</LayoutPlacementContext.Provider>
|
|
256
257
|
</LayoutContext.Provider>
|
|
257
258
|
);
|
|
258
259
|
};
|
|
259
260
|
|
|
261
|
+
const TitanLayoutHeaderObserved: FC<{
|
|
262
|
+
children: ReactNode;
|
|
263
|
+
heightChange?(value: number): void;
|
|
264
|
+
}> = ({ children, heightChange }) => {
|
|
265
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
266
|
+
|
|
267
|
+
useEffect(() => {
|
|
268
|
+
if (ref.current) {
|
|
269
|
+
const updatePosition = () => {
|
|
270
|
+
if (ref.current && heightChange) {
|
|
271
|
+
const pos = ref.current.getBoundingClientRect();
|
|
272
|
+
heightChange(pos.height);
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
|
|
276
|
+
const observer = new ResizeObserver(updatePosition);
|
|
277
|
+
observer.observe(ref.current);
|
|
278
|
+
|
|
279
|
+
updatePosition();
|
|
280
|
+
return () => observer.disconnect();
|
|
281
|
+
}
|
|
282
|
+
}, [heightChange]);
|
|
283
|
+
|
|
284
|
+
useEffect(() => {
|
|
285
|
+
return () => {
|
|
286
|
+
heightChange?.(0);
|
|
287
|
+
};
|
|
288
|
+
}, [heightChange]);
|
|
289
|
+
return (
|
|
290
|
+
<div ref={ref} className={Styles.header}>
|
|
291
|
+
{children}
|
|
292
|
+
</div>
|
|
293
|
+
);
|
|
294
|
+
};
|
|
295
|
+
|
|
260
296
|
export interface TitanLayoutContentProps {
|
|
261
297
|
children: ReactNode;
|
|
262
298
|
}
|
|
263
299
|
const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
|
|
264
300
|
|
|
301
|
+
const LayoutContent: FC<{ children: ReactNode; header?: ReactNode; anvil2: boolean }> = ({
|
|
302
|
+
anvil2,
|
|
303
|
+
children,
|
|
304
|
+
header,
|
|
305
|
+
}) => {
|
|
306
|
+
const [anvil2Styles, setAnvil2Styles] = useState<object>({});
|
|
307
|
+
const updateIndicatorsHeight = useCallback((offset: number) => {
|
|
308
|
+
setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
|
|
309
|
+
}, []);
|
|
310
|
+
|
|
311
|
+
return (
|
|
312
|
+
<div className={Styles.content} style={anvil2Styles}>
|
|
313
|
+
{!!header &&
|
|
314
|
+
(anvil2 ? (
|
|
315
|
+
<TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
|
|
316
|
+
{header}
|
|
317
|
+
</TitanLayoutHeaderObserved>
|
|
318
|
+
) : (
|
|
319
|
+
header
|
|
320
|
+
))}
|
|
321
|
+
{children}
|
|
322
|
+
</div>
|
|
323
|
+
);
|
|
324
|
+
};
|
|
325
|
+
|
|
265
326
|
export const TitanLayout = Object.assign(TitanLayoutComponent, {
|
|
266
327
|
Content: TitanLayoutContent,
|
|
267
328
|
Logo: TitanLayoutLogo,
|
|
268
|
-
|
|
269
|
-
|
|
329
|
+
Link: TitanLayoutSidebarLink,
|
|
330
|
+
Trigger: TitanLayoutSidebarTrigger,
|
|
270
331
|
});
|