@servicetitan/navigation 10.4.1 → 10.5.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.
Files changed (17) hide show
  1. package/dist/components/layout.stories.d.ts +2 -0
  2. package/dist/components/layout.stories.d.ts.map +1 -1
  3. package/dist/components/layout.stories.js +7 -1
  4. package/dist/components/layout.stories.js.map +1 -1
  5. package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
  6. package/dist/components/left-navigation/side-navigation.js +6 -2
  7. package/dist/components/left-navigation/side-navigation.js.map +1 -1
  8. package/dist/components/left-navigation/side-navigation.module.less +52 -34
  9. package/dist/components/left-navigation/side-navigation.stories.d.ts +1 -0
  10. package/dist/components/left-navigation/side-navigation.stories.d.ts.map +1 -1
  11. package/dist/components/left-navigation/side-navigation.stories.js +18 -0
  12. package/dist/components/left-navigation/side-navigation.stories.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/layout.stories.tsx +34 -0
  15. package/src/components/left-navigation/side-navigation.module.less +52 -34
  16. package/src/components/left-navigation/side-navigation.stories.tsx +36 -0
  17. package/src/components/left-navigation/side-navigation.tsx +35 -11
package/dist/components/layout.stories.d.ts CHANGED
@@ -8,4 +8,6 @@ export declare const LeftNavLayout: () => import("react/jsx-runtime").JSX.Elemen
8
8
  export declare const LeftNavLayoutCommercial: () => import("react/jsx-runtime").JSX.Element;
9
9
  export declare const LeftNavLayoutOnlyLinks: () => import("react/jsx-runtime").JSX.Element;
10
10
  export declare const LeftNavLayoutSubmenu: () => import("react/jsx-runtime").JSX.Element;
11
+ export declare const LeftNavLayoutSubmenuBar: () => import("react/jsx-runtime").JSX.Element;
12
+ export declare const LeftNavLayoutSubmenuBarWithTop: () => import("react/jsx-runtime").JSX.Element;
11
13
  //# sourceMappingURL=layout.stories.d.ts.map
package/dist/components/layout.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAYA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAUlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAchC,CAAC"}
1
+ {"version":3,"file":"layout.stories.d.ts","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";;;;;AAcA,wBAIE;AAEF,eAAO,MAAM,aAAa,+CAUzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAUnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAUlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAchC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAcnC,CAAC;AAEF,eAAO,MAAM,8BAA8B,+CAc1C,CAAC"}
package/dist/components/layout.stories.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Page, Sidebar } from '@servicetitan/design-system';
3
3
  import { LocationInfo, withAnvil, withDefaultRedirects, withMemoryRouter } from '../test/data';
4
4
  import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './left-navigation/header-navigation-tiny.stories';
5
- import { DefaultSideNavigation, SideNavigationLinksOnly, SideNavigationWithSubmenu, } from './left-navigation/side-navigation.stories';
5
+ import { DefaultSideNavigation, SideNavigationLinksOnly, SideNavigationWithSubmenu, SideNavigationWithSubmenuBar, SideNavigationWithSubmenuBarAndTop, } from './left-navigation/side-navigation.stories';
6
6
  export default {
7
7
  title: 'Navigation/Layout',
8
8
  parameters: {},
@@ -20,4 +20,10 @@ export const LeftNavLayoutOnlyLinks = () => {
20
20
  export const LeftNavLayoutSubmenu = () => {
21
21
  return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithDataCommercial, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(SideNavigationWithSubmenu, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { sidebar: _jsx(Sidebar, { localStorageKey: "undefined", children: "sidebar" }), children: _jsx(LocationInfo, {}) }) })] })] }));
22
22
  };
23
+ export const LeftNavLayoutSubmenuBar = () => {
24
+ return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithDataCommercial, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(SideNavigationWithSubmenuBar, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { sidebar: _jsx(Sidebar, { localStorageKey: "undefined", children: "sidebar" }), children: _jsx(LocationInfo, {}) }) })] })] }));
25
+ };
26
+ export const LeftNavLayoutSubmenuBarWithTop = () => {
27
+ return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithDataCommercial, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(SideNavigationWithSubmenuBarAndTop, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { sidebar: _jsx(Sidebar, { localStorageKey: "undefined", children: "sidebar" }), children: _jsx(LocationInfo, {}) }) })] })] }));
28
+ };
23
29
  //# sourceMappingURL=layout.stories.js.map
package/dist/components/layout.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,qBAAqB,EACrB,uBAAuB,EACvB,yBAAyB,GAC5B,MAAM,2CAA2C,CAAC;AAEnD,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,CAAC;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,uBAAuB,KAAG,EAC3B,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,yBAAyB,KAAG,EAC7B,cAAK,SAAS,EAAC,0BAA0B,YACrC,KAAC,IAAI,IAAC,OAAO,EAAE,KAAC,OAAO,IAAC,eAAe,EAAC,WAAW,wBAAkB,YACjE,KAAC,YAAY,KAAG,GACb,GACL,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":"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"}
package/dist/components/left-navigation/side-navigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGH,EAAE,EAEF,YAAY,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACH,kBAAkB,EAGrB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAOrB,KAAK,gBAAgB,CAAC,CAAC,IACjB,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC5C,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;AACrD,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACpD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,mCAAmC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAClE;AAWD,iBAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,gBAAgB,GACnB,EAAE,mBAAmB,2CAqHrB;AAED,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;CACpF;AA+KD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}
1
+ {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGH,EAAE,EAEF,YAAY,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACH,kBAAkB,EAGrB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAOrB,KAAK,gBAAgB,CAAC,CAAC,IACjB,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,GAC5C,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;AACrD,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACpD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,mCAAmC;IACnC,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAClE;AAWD,iBAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,gBAAgB,GACnB,EAAE,mBAAmB,2CAoIrB;AAED,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;CACpF;AAwLD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}
package/dist/components/left-navigation/side-navigation.js CHANGED
@@ -47,7 +47,7 @@ function SideNavigationElement({ className, children, expanded, id, items, appea
47
47
  const handleExpandedChange = useCallback((value) => {
48
48
  onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(isExperimental ? { bar: false, collapsedBar: !value } : { bar: value });
49
49
  }, [isExperimental, onExpandedChange]);
50
- return (_jsx(SideNavigationContext.Provider, { value: defaultContext, children: _jsxs("div", { className: classNames(Styles.sideNav, isExperimental ? Styles.sideNavV2 : Styles.sideNavV1, isExpanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [_jsxs("div", { className: Styles.sideNavMain, children: [_jsxs("div", { className: Styles.sideNavNavigation, children: [childTop, _jsx(ThemeProvider, { mode: "dark", className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => item.submenu && !isExperimental ? (_jsx(SideNavigationGroupItem, { expanded: expanded, onExpandedChange: onExpandedChange, navigationComponent: NavigationComponent, ...item }, item.id)) : (_jsx("div", { onClickCapture: onLinkClick, children: _jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: NavigationComponent, ...item, tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)) }) }, item.id))) })] }), isExperimental && isExpanded && !!(activeNavItem === null || activeNavItem === void 0 ? void 0 : activeNavItem.submenu) && (_jsxs("div", { className: Styles.sideNavSubmenuBar, children: [_jsx(Headline, { size: "small", className: "c-white m-b-2-i m-t-2 p-t-half m-l-3", children: activeNavItem.title }), _jsx("div", { className: Styles.submenuBar, children: _jsx(SideNavigationGroupContent, { groups: (_a = activeNavItem.submenu.groups) !== null && _a !== void 0 ? _a : [], navigationComponent: NavigationComponent }) })] }))] }), (!isExperimental || !!(activeNavItem === null || activeNavItem === void 0 ? void 0 : activeNavItem.submenu)) && (_jsxs("div", { className: Styles.sideNavFooter, children: [_jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: isExpanded, onExpandedChange: handleExpandedChange }) })] }))] }) }));
50
+ return (_jsx(SideNavigationContext.Provider, { value: defaultContext, children: _jsxs("div", { className: classNames(Styles.sideNav, isExperimental ? Styles.sideNavV2 : Styles.sideNavV1, isExpanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [_jsxs("div", { className: Styles.sideNavMain, children: [_jsxs("div", { className: Styles.sideNavNavigation, children: [isExperimental && !isExpanded && !!(activeNavItem === null || activeNavItem === void 0 ? void 0 : activeNavItem.submenu) && (_jsx(SideNavigationOptionsToggle, { appearance: "expand", onExpandedChange: handleExpandedChange })), childTop, _jsx(ThemeProvider, { mode: "dark", className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => item.submenu && !isExperimental ? (_jsx(SideNavigationGroupItem, { expanded: expanded, onExpandedChange: onExpandedChange, navigationComponent: NavigationComponent, ...item }, item.id)) : (_jsx("div", { onClickCapture: onLinkClick, children: _jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: NavigationComponent, ...item, tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)) }) }, item.id))) })] }), isExperimental && isExpanded && !!(activeNavItem === null || activeNavItem === void 0 ? void 0 : activeNavItem.submenu) && (_jsxs("div", { className: Styles.sideNavSubmenuBar, children: [_jsxs("div", { className: "d-f justify-content-between align-items-center m-t-2 m-l-3", children: [_jsx(Headline, { size: "small", className: "c-white m-b-0-i", children: activeNavItem.title }), _jsx(SideNavigationOptionsToggle, { appearance: "collapse", onExpandedChange: handleExpandedChange })] }), _jsx("div", { className: Styles.submenuBar, children: _jsx(SideNavigationGroupContent, { groups: (_a = activeNavItem.submenu.groups) !== null && _a !== void 0 ? _a : [], navigationComponent: NavigationComponent }) })] }))] }), !isExperimental && (_jsxs("div", { className: Styles.sideNavFooter, children: [_jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { appearance: isExpanded ? 'collapse-button' : 'expand', onExpandedChange: handleExpandedChange }) })] }))] }) }));
51
51
  }
52
52
  function SideNavigationTopElement({ children }) {
53
53
  const list = Children.map(children, child => {
@@ -95,7 +95,11 @@ const SideNavigationGroupLink = ({ id, counter, tag, title, to, isActive, naviga
95
95
  }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.submenuLinkActive, children: [_jsx("span", { children: title }), _jsx(BadgeTag, { data: getCounterTag(counter, tag), className: Styles.submenuLinkCounter })] }, id));
96
96
  };
97
97
  /** Side Navigation options toggle */
98
- const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsx("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!expanded), children: _jsxs("div", { className: Styles.optionsItemContent, children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? SvgCollapse : SvgExpand }) }), expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }) }), expanded ? undefined : 'Expand Menu', 'right');
98
+ const SideNavigationOptionsToggle = ({ appearance, onExpandedChange }) => withTooltip(_jsx("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(appearance === 'expand'), children: _jsxs("div", { className: Styles.optionsItemContent, children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: appearance === 'expand' ? SvgExpand : SvgCollapse }) }), appearance === 'collapse-button' && (_jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" }))] }) }), appearance === 'expand'
99
+ ? 'Expand Menu'
100
+ : appearance === 'collapse'
101
+ ? 'Collapse Menu'
102
+ : undefined, 'right');
99
103
  export const SideNavigation = Object.assign(SideNavigationElement, {
100
104
  Top: SideNavigationTop,
101
105
  });
package/dist/components/left-navigation/side-navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,WAAW,MAAM,6DAA6D,CAAC;AACtF,OAAO,SAAS,MAAM,2DAA2D,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAEH,QAAQ,EAER,QAAQ,EAER,cAAc,EACd,WAAW,EACX,UAAU,EACV,OAAO,GACV,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOxC,OAAO,EAAE,qBAAqB,EAA6B,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAwB7C,MAAM,cAAc,GAA8B;IAC9C,MAAM,EAAE;QACJ,cAAc,EAAE;YACZ,2BAA2B,EAAE,SAAS;YACtC,OAAO,EAAE,oBAAoB;SACf;KACrB;CACJ,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,gBAAgB,GACE;;IAClB,MAAM,mBAAmB,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IACnE,MAAM,cAAc,GAAG,UAAU,KAAK,IAAI,CAAC;IAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,CAAC,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/B,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,OAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG,cAAc;QAC7B,CAAC,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,CAAA,IAAI,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA;QACrD,CAAC,CAAC,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAA,CAAC;IAEtB,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CACxB,GAAG,EAAE,CACD,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC7B,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACV,IACI,IAAI;YACJ,cAAc,CAAC,IAAI,CAAC;YACpB,IAAI,CAAC,IAAI;YACT,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC7B,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,IAAI,EAC3C,CAAC;YACC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,OAAO,GAAG,CAAC;IACf,CAAC,EACD,EAAiC,CACpC,EACL,CAAC,QAAQ,CAAC,CACb,CAAC;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9C,MAAM,oBAAoB,GAAG,WAAW,CACpC,CAAC,KAAc,EAAE,EAAE;QACf,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CACZ,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CACzE,CAAC;IACN,CAAC,EACD,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrC,CAAC;IAEF,OAAO,CACH,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,YACjD,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,OAAO,EACd,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EACpD,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EACxD,SAAS,CACZ,EACD,EAAE,EAAE,EAAE,aACE,iBAAiB,aAEzB,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAC9B,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,aACnC,cAAc,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,IAAI,CAC1D,KAAC,2BAA2B,IACxB,UAAU,EAAC,QAAQ,EACnB,gBAAgB,EAAE,oBAAoB,GACxC,CACL,EAEA,QAAQ,EACT,KAAC,aAAa,IACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,cAAc,aACxB,kBAAkB,YAEzB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CACf,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAC9B,KAAC,uBAAuB,IAEpB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,KACpC,IAAI,IAJH,IAAI,CAAC,EAAE,CAKd,CACL,CAAC,CAAC,CAAC,CACA,cAAmB,cAAc,EAAE,WAAW,YAC1C,KAAC,0BAA0B,IACvB,eAAe,EAAE,SAAS,EAC1B,mBAAmB,EAAE,mBAAmB,KACpC,IAAI,EACR,GAAG,EAAE,kBAAkB,CACnB,IAAI,CAAC,OAAO,EACZ,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CACxC,GACH,IATI,IAAI,CAAC,EAAE,CAUX,CACT,CACJ,GACW,IACd,EAEL,cAAc,IAAI,UAAU,IAAI,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,IAAI,CACzD,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,aACpC,eAAK,SAAS,EAAC,4DAA4D,aACvE,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,iBAAiB,YAC7C,aAAa,CAAC,KAAK,GACb,EAEX,KAAC,2BAA2B,IACxB,UAAU,EAAC,UAAU,EACrB,gBAAgB,EAAE,oBAAoB,GACxC,IACA,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAC7B,KAAC,0BAA0B,IACvB,MAAM,EAAE,MAAA,aAAa,CAAC,OAAO,CAAC,MAAM,mCAAI,EAAE,EAC1C,mBAAmB,EAAE,mBAAmB,GAC1C,GACA,IACJ,CACT,IACC,EAEL,CAAC,cAAc,IAAI,CAChB,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAChC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,EAClC,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YAChC,KAAC,2BAA2B,IACxB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,EACrD,gBAAgB,EAAE,oBAAoB,GACxC,GACA,IACJ,CACT,IACC,GACuB,CACpC,CAAC;AACN,CAAC;AAKD,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAA0B;IAClE,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;QACxC,OAAO,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IACzD,CAAC,CAAC,CAAC;IACH,OAAO,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,EAAC,CAAC,CAAC,CAClB,MAAC,QAAQ,eACL,KAAC,aAAa,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,aAAU,sBAAsB,YAClF,IAAI,GACO,EAChB,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,IAC3B,CACd,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AACD,MAAM,iBAAiB,GAA+B,wBAAwB,CAAC;AAE/E,gCAAgC;AAChC,MAAM,uBAAuB,GAMzB,CAAC,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;;IACnC,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,SAAS,MAAK,KAAK,CAAC,EAAE,CAAC;IAChF,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;;QAClC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG;YACf,GAAG,EAAE,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,GAAG,CAAA;YAC1B,SAAS,EAAE,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,SAAS,MAAK,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;SAC3E,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAElD,OAAO,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,GAAG,EAAC,CAAC,CAAC,CACzB,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC,aACrD,eAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,aACtC,KAAC,0BAA0B,OACnB,KAAK,EACT,eAAe,EAAE,CAAC,kBAAkB,EACpC,GAAG,EAAE,GAAG,GACV,EACF,cAAK,SAAS,EAAE,MAAM,CAAC,2BAA2B,EAAE,OAAO,EAAE,YAAY,GAAI,IAC3E,EACN,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE;oBACzC,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,kBAAkB;iBACvD,CAAC,YAEF,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC1B,KAAC,0BAA0B,IACvB,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,MAAM,mCAAI,EAAE,EACnC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,GAChD,GACA,GACJ,IACJ,CACT,CAAC,CAAC,CAAC,CACA,MAAC,OAAO,IAAC,SAAS,EAAC,aAAa,EAAC,WAAW,QAAC,KAAK,EAAE,GAAG,aACnD,KAAC,OAAO,CAAC,OAAO,cACX,CAAC,YAAiB,EAAE,EAAE,CAAC,CACpB,iBAAS,YAAY,YACjB,KAAC,0BAA0B,OACnB,KAAK,EACT,eAAe,EAAE,SAAS,EAC1B,GAAG,EAAE,GAAG,GACV,GACA,CACT,GACa,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,EAAC,gBAAgB,YAC7E,eAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aACjC,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B,YACtD,KAAK,CAAC,KAAK,GACL,EACX,KAAC,0BAA0B,IACvB,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,MAAM,mCAAI,EAAE,EACnC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,GAChD,IACA,GACQ,IACZ,CACb,CAAC;AACN,CAAC,CAAC;AACF,MAAM,0BAA0B,GAAyD,CAAC,EACtF,MAAM,EACN,mBAAmB,GACtB,EAAE,EAAE;IACD,OAAO,CACH,KAAC,QAAQ,cACJ,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;;YACjC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACtB,OAAO,GAAG,CAAC;YACf,CAAC;YAED,MAAM,KAAK,GAAG,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,IAAI,EAAE,mCAAI,EAAE,CAAC;YACxC,6CAA6C;YAC7C,GAAG,CAAC,IAAI,CACJ,KAAC,IAAI,IAED,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,kBAAkB,EAAE;oBAC7C,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,CAAC,KAAK;iBAC3C,CAAC,YAED,KAAK,IAND,UAAU,KAAK,QAAQ,CAOzB,CACV,CAAC;YACF,GAAG,CAAC,IAAI,CACJ,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,uBAAuB,OAEhB,IAAI,EACR,mBAAmB,EAAE,mBAAmB,IAFnC,IAAI,IAAI,CAAC,EAAE,IAAI,KAAK,EAAE,CAG7B,CACL,CAAC,CACL,CAAC;YACF,4CAA4C;YAE5C,OAAO,GAAG,CAAC;QACf,CAAC,EAAE,EAAoB,CAAC,GACjB,CACd,CAAC;AACN,CAAC,CAAC;AACF,MAAM,uBAAuB,GAA6D,CAAC,EACvF,EAAE,EACF,OAAO,EACP,GAAG,EACH,KAAK,EACL,EAAE,EACF,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,GAC3C,EAAE,EAAE;IACD,OAAO,CACH,MAAC,mBAAmB,eACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,EAEnC,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE;YACtC,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,QAAQ,KAAK,IAAI;SAChD,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,iBAAiB,aAEzC,yBAAO,KAAK,GAAQ,EACpB,KAAC,QAAQ,IAAC,IAAI,EAAE,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,GAAI,KAThF,EAAE,CAUW,CACzB,CAAC;AACN,CAAC,CAAC;AAEF,qCAAqC;AACrC,MAAM,2BAA2B,GAG5B,CAAC,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACtC,WAAW,CACP,yBACY,yBAAyB,gBACtB,yBAAyB,EACpC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,UAAU,KAAK,QAAQ,CAAC,YAE1D,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACrC,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,YACrC,KAAC,IAAI,IACD,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAE,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,GACxD,GACA,EAEL,UAAU,KAAK,iBAAiB,IAAI,CACjC,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,8BAAsB,CAChE,IACC,GACJ,EACN,UAAU,KAAK,QAAQ;IACnB,CAAC,CAAC,aAAa;IACf,CAAC,CAAC,UAAU,KAAK,UAAU;QACzB,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,SAAS,EACjB,OAAO,CACV,CAAC;AAEN,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE;IAC/D,GAAG,EAAE,iBAAiB;CACzB,CAAC,CAAC"}
package/dist/components/left-navigation/side-navigation.module.less CHANGED
@@ -7,7 +7,6 @@
7
7
  @bg-color: #0f1d26;
8
8
  @bg-color-hover: rgba(255, 255, 255, 0.08);
9
9
  @bg-color-active: rgba(120, 187, 250, 0.2);
10
- @bg-color-drawer: #24323c;
11
10
 
12
11
  .side-nav {
13
12
  display: flex;
@@ -115,39 +114,11 @@
115
114
  }
116
115
  }
117
116
 
118
- &.side-nav-slim {
119
- .options-item-content {
120
- margin-left: @spacing-2;
121
- margin-right: @spacing-2;
122
-
123
- .options-icon-wrapper {
124
- padding-left: @spacing-half;
125
- padding-right: @spacing-half;
126
- }
127
- }
128
- }
129
-
130
117
  &.side-nav-expanded {
131
118
  -webkit-transition: width 100ms ease-in-out;
132
119
  -moz-transition: width 100ms ease-in-out;
133
120
  -o-transition: width 100ms ease-in-out;
134
121
  transition: width 100ms ease-in-out;
135
-
136
- .options-item-content {
137
- margin-left: @spacing-1;
138
- margin-right: @spacing-1;
139
-
140
- .options-icon-wrapper {
141
- padding-left: @spacing-1;
142
- padding-right: @spacing-1;
143
- }
144
-
145
- .options-item-text {
146
- font-family: @base-font-family;
147
- font-size: @typescale-3;
148
- padding-left: @spacing-1;
149
- }
150
- }
151
122
  }
152
123
  }
153
124
 
@@ -165,7 +136,8 @@
165
136
  background-color: @bg-color;
166
137
  }
167
138
  .side-nav-submenu-bar {
168
- background-color: @bg-color-drawer;
139
+ background-color: @bg-color;
140
+ border-left: 1px solid var(--border-color-strong, #444445);
169
141
  width: 204px;
170
142
  }
171
143
 
@@ -173,12 +145,12 @@
173
145
  display: flex;
174
146
  flex-direction: column;
175
147
  align-items: stretch;
148
+ padding-top: @spacing-1;
176
149
 
177
150
  background-color: @bg-color;
178
151
 
179
152
  .side-nav-content {
180
153
  overflow-y: auto;
181
- padding-top: @spacing-1;
182
154
  padding-bottom: @spacing-1;
183
155
  flex-grow: 1;
184
156
  flex-basis: 0;
@@ -193,7 +165,6 @@
193
165
  display: flex;
194
166
  flex-direction: column;
195
167
  align-items: stretch;
196
- padding-top: @spacing-1;
197
168
  padding-bottom: @spacing-1;
198
169
  }
199
170
 
@@ -462,8 +433,6 @@
462
433
  text-wrap: nowrap;
463
434
  height: 32px;
464
435
 
465
- margin-top: @spacing-2;
466
- margin-bottom: @spacing-2;
467
436
  border-radius: @border-radius-2;
468
437
  }
469
438
 
@@ -485,6 +454,55 @@
485
454
  }
486
455
  }
487
456
 
457
+ .side-nav-slim .side-nav-footer .options-item {
458
+ .options-item-content {
459
+ margin: @spacing-2;
460
+
461
+ .options-icon-wrapper {
462
+ padding-left: @spacing-half;
463
+ padding-right: @spacing-half;
464
+ }
465
+ }
466
+ }
467
+
468
+ .side-nav-expanded .side-nav-footer .options-item {
469
+ .options-item-content {
470
+ margin: @spacing-2 @spacing-1;
471
+
472
+ .options-icon-wrapper {
473
+ padding-left: @spacing-1;
474
+ padding-right: @spacing-1;
475
+ }
476
+
477
+ .options-item-text {
478
+ font-family: @base-font-family;
479
+ font-size: @typescale-3;
480
+ padding-left: @spacing-1;
481
+ }
482
+ }
483
+ }
484
+
485
+ .side-nav-submenu-bar .options-item {
486
+ .options-item-content {
487
+ margin-right: @spacing-2;
488
+ justify-content: center;
489
+ width: 32px;
490
+ }
491
+ }
492
+
493
+ .side-nav-navigation .options-item {
494
+ width: 64px;
495
+ margin-top: @spacing-1;
496
+ margin-bottom: 12px;
497
+ display: flex;
498
+ justify-content: center;
499
+
500
+ .options-icon-wrapper {
501
+ padding-left: @spacing-half;
502
+ padding-right: @spacing-half;
503
+ }
504
+ }
505
+
488
506
  .divider {
489
507
  border-top: 1px solid @border-color;
490
508
  }
package/dist/components/left-navigation/side-navigation.stories.d.ts CHANGED
@@ -13,4 +13,5 @@ export declare const SideNavigationLinksOnly: () => import("react/jsx-runtime").
13
13
  export declare const SideNavigationWithSubmenu: () => import("react/jsx-runtime").JSX.Element;
14
14
  export declare const SideNavigationWithCustomTopElements: () => import("react/jsx-runtime").JSX.Element;
15
15
  export declare const SideNavigationWithSubmenuBar: () => import("react/jsx-runtime").JSX.Element;
16
+ export declare const SideNavigationWithSubmenuBarAndTop: () => import("react/jsx-runtime").JSX.Element;
16
17
  //# sourceMappingURL=side-navigation.stories.d.ts.map
package/dist/components/left-navigation/side-navigation.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;;;AA6BpD,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA4BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CAwBrC,CAAC;AAWF,eAAO,MAAM,mCAAmC,+CAkC/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CA6BxC,CAAC"}
1
+ {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;;;AA6BpD,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA4BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CAwBrC,CAAC;AAWF,eAAO,MAAM,mCAAmC,+CAkC/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CA6BxC,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CAkC9C,CAAC"}
package/dist/components/left-navigation/side-navigation.stories.js CHANGED
@@ -98,4 +98,22 @@ export const SideNavigationWithSubmenuBar = () => {
98
98
  const activeItem = useActiveNavItem(navItems);
99
99
  return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, appearance: "v2", activeId: activeItem === null || activeItem === void 0 ? void 0 : activeItem.id, items: navItems }));
100
100
  };
101
+ export const SideNavigationWithSubmenuBarAndTop = () => {
102
+ const [expanded, setExpanded] = useState(undefined);
103
+ const navItems = [
104
+ items.dashboard,
105
+ items.calls,
106
+ items.schedule,
107
+ items.dispatch,
108
+ items.accountingWithSubmenu,
109
+ items.purchasingWithSubmenu,
110
+ items.followUpsWithSubmenu,
111
+ items.reports,
112
+ items.marketing,
113
+ items.priceBook,
114
+ items.projects,
115
+ ];
116
+ const activeItem = useActiveNavItem(navItems);
117
+ return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, appearance: "v2", activeId: activeItem === null || activeItem === void 0 ? void 0 : activeItem.id, items: navItems, children: _jsxs(SideNavigation.Top, { children: [_jsx(SideNavigationLink, { ...items.calls }), _jsx(SideNavigationLink, { ...items.tasks })] }) }));
118
+ };
101
119
  //# sourceMappingURL=side-navigation.stories.js.map
package/dist/components/left-navigation/side-navigation.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.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": "10.4.1",
3
+ "version": "10.5.0",
4
4
  "description": "Navigation components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -43,5 +43,5 @@
43
43
  "less": true,
44
44
  "webpack": false
45
45
  },
46
- "gitHead": "5e00eca3315b355f6cb62297de103504a2993613"
46
+ "gitHead": "cb036d2816c23b4c668ea1f22dc0f8686dad0221"
47
47
  }
package/src/components/layout.stories.tsx CHANGED
@@ -8,6 +8,8 @@ import {
8
8
  DefaultSideNavigation,
9
9
  SideNavigationLinksOnly,
10
10
  SideNavigationWithSubmenu,
11
+ SideNavigationWithSubmenuBar,
12
+ SideNavigationWithSubmenuBarAndTop,
11
13
  } from './left-navigation/side-navigation.stories';
12
14
 
13
15
  export default {
@@ -67,3 +69,35 @@ export const LeftNavLayoutSubmenu = () => {
67
69
  </div>
68
70
  );
69
71
  };
72
+
73
+ export const LeftNavLayoutSubmenuBar = () => {
74
+ return (
75
+ <div className="d-f border flex-column" style={{ height: '800px' }}>
76
+ <WithAllMonolithDataCommercial />
77
+ <div className="flex-grow-1 flex-basis-0 d-f">
78
+ <SideNavigationWithSubmenuBar />
79
+ <div className="flex-grow-1 flex-basis-0">
80
+ <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
81
+ <LocationInfo />
82
+ </Page>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ );
87
+ };
88
+
89
+ export const LeftNavLayoutSubmenuBarWithTop = () => {
90
+ return (
91
+ <div className="d-f border flex-column" style={{ height: '800px' }}>
92
+ <WithAllMonolithDataCommercial />
93
+ <div className="flex-grow-1 flex-basis-0 d-f">
94
+ <SideNavigationWithSubmenuBarAndTop />
95
+ <div className="flex-grow-1 flex-basis-0">
96
+ <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
97
+ <LocationInfo />
98
+ </Page>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ );
103
+ };
package/src/components/left-navigation/side-navigation.module.less CHANGED
@@ -7,7 +7,6 @@
7
7
  @bg-color: #0f1d26;
8
8
  @bg-color-hover: rgba(255, 255, 255, 0.08);
9
9
  @bg-color-active: rgba(120, 187, 250, 0.2);
10
- @bg-color-drawer: #24323c;
11
10
 
12
11
  .side-nav {
13
12
  display: flex;
@@ -115,39 +114,11 @@
115
114
  }
116
115
  }
117
116
 
118
- &.side-nav-slim {
119
- .options-item-content {
120
- margin-left: @spacing-2;
121
- margin-right: @spacing-2;
122
-
123
- .options-icon-wrapper {
124
- padding-left: @spacing-half;
125
- padding-right: @spacing-half;
126
- }
127
- }
128
- }
129
-
130
117
  &.side-nav-expanded {
131
118
  -webkit-transition: width 100ms ease-in-out;
132
119
  -moz-transition: width 100ms ease-in-out;
133
120
  -o-transition: width 100ms ease-in-out;
134
121
  transition: width 100ms ease-in-out;
135
-
136
- .options-item-content {
137
- margin-left: @spacing-1;
138
- margin-right: @spacing-1;
139
-
140
- .options-icon-wrapper {
141
- padding-left: @spacing-1;
142
- padding-right: @spacing-1;
143
- }
144
-
145
- .options-item-text {
146
- font-family: @base-font-family;
147
- font-size: @typescale-3;
148
- padding-left: @spacing-1;
149
- }
150
- }
151
122
  }
152
123
  }
153
124
 
@@ -165,7 +136,8 @@
165
136
  background-color: @bg-color;
166
137
  }
167
138
  .side-nav-submenu-bar {
168
- background-color: @bg-color-drawer;
139
+ background-color: @bg-color;
140
+ border-left: 1px solid var(--border-color-strong, #444445);
169
141
  width: 204px;
170
142
  }
171
143
 
@@ -173,12 +145,12 @@
173
145
  display: flex;
174
146
  flex-direction: column;
175
147
  align-items: stretch;
148
+ padding-top: @spacing-1;
176
149
 
177
150
  background-color: @bg-color;
178
151
 
179
152
  .side-nav-content {
180
153
  overflow-y: auto;
181
- padding-top: @spacing-1;
182
154
  padding-bottom: @spacing-1;
183
155
  flex-grow: 1;
184
156
  flex-basis: 0;
@@ -193,7 +165,6 @@
193
165
  display: flex;
194
166
  flex-direction: column;
195
167
  align-items: stretch;
196
- padding-top: @spacing-1;
197
168
  padding-bottom: @spacing-1;
198
169
  }
199
170
 
@@ -462,8 +433,6 @@
462
433
  text-wrap: nowrap;
463
434
  height: 32px;
464
435
 
465
- margin-top: @spacing-2;
466
- margin-bottom: @spacing-2;
467
436
  border-radius: @border-radius-2;
468
437
  }
469
438
 
@@ -485,6 +454,55 @@
485
454
  }
486
455
  }
487
456
 
457
+ .side-nav-slim .side-nav-footer .options-item {
458
+ .options-item-content {
459
+ margin: @spacing-2;
460
+
461
+ .options-icon-wrapper {
462
+ padding-left: @spacing-half;
463
+ padding-right: @spacing-half;
464
+ }
465
+ }
466
+ }
467
+
468
+ .side-nav-expanded .side-nav-footer .options-item {
469
+ .options-item-content {
470
+ margin: @spacing-2 @spacing-1;
471
+
472
+ .options-icon-wrapper {
473
+ padding-left: @spacing-1;
474
+ padding-right: @spacing-1;
475
+ }
476
+
477
+ .options-item-text {
478
+ font-family: @base-font-family;
479
+ font-size: @typescale-3;
480
+ padding-left: @spacing-1;
481
+ }
482
+ }
483
+ }
484
+
485
+ .side-nav-submenu-bar .options-item {
486
+ .options-item-content {
487
+ margin-right: @spacing-2;
488
+ justify-content: center;
489
+ width: 32px;
490
+ }
491
+ }
492
+
493
+ .side-nav-navigation .options-item {
494
+ width: 64px;
495
+ margin-top: @spacing-1;
496
+ margin-bottom: 12px;
497
+ display: flex;
498
+ justify-content: center;
499
+
500
+ .options-icon-wrapper {
501
+ padding-left: @spacing-half;
502
+ padding-right: @spacing-half;
503
+ }
504
+ }
505
+
488
506
  .divider {
489
507
  border-top: 1px solid @border-color;
490
508
  }
package/src/components/left-navigation/side-navigation.stories.tsx CHANGED
@@ -193,3 +193,39 @@ export const SideNavigationWithSubmenuBar = () => {
193
193
  />
194
194
  );
195
195
  };
196
+
197
+ export const SideNavigationWithSubmenuBarAndTop = () => {
198
+ const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
199
+ const navItems = [
200
+ items.dashboard,
201
+ items.calls,
202
+ items.schedule,
203
+ items.dispatch,
204
+
205
+ items.accountingWithSubmenu,
206
+ items.purchasingWithSubmenu,
207
+
208
+ items.followUpsWithSubmenu,
209
+ items.reports,
210
+ items.marketing,
211
+ items.priceBook,
212
+
213
+ items.projects,
214
+ ];
215
+
216
+ const activeItem = useActiveNavItem(navItems);
217
+ return (
218
+ <SideNavigation
219
+ expanded={expanded}
220
+ onExpandedChange={setExpanded}
221
+ appearance="v2"
222
+ activeId={activeItem?.id}
223
+ items={navItems}
224
+ >
225
+ <SideNavigation.Top>
226
+ <SideNavigationLink {...items.calls} />
227
+ <SideNavigationLink {...items.tasks} />
228
+ </SideNavigation.Top>
229
+ </SideNavigation>
230
+ );
231
+ };
package/src/components/left-navigation/side-navigation.tsx CHANGED
@@ -130,6 +130,13 @@ function SideNavigationElement({
130
130
  >
131
131
  <div className={Styles.sideNavMain}>
132
132
  <div className={Styles.sideNavNavigation}>
133
+ {isExperimental && !isExpanded && !!activeNavItem?.submenu && (
134
+ <SideNavigationOptionsToggle
135
+ appearance="expand"
136
+ onExpandedChange={handleExpandedChange}
137
+ />
138
+ )}
139
+
133
140
  {childTop}
134
141
  <ThemeProvider
135
142
  mode="dark"
@@ -164,9 +171,17 @@ function SideNavigationElement({
164
171
 
165
172
  {isExperimental && isExpanded && !!activeNavItem?.submenu && (
166
173
  <div className={Styles.sideNavSubmenuBar}>
167
- <Headline size="small" className="c-white m-b-2-i m-t-2 p-t-half m-l-3">
168
- {activeNavItem.title}
169
- </Headline>
174
+ <div className="d-f justify-content-between align-items-center m-t-2 m-l-3">
175
+ <Headline size="small" className="c-white m-b-0-i">
176
+ {activeNavItem.title}
177
+ </Headline>
178
+
179
+ <SideNavigationOptionsToggle
180
+ appearance="collapse"
181
+ onExpandedChange={handleExpandedChange}
182
+ />
183
+ </div>
184
+
170
185
  <div className={Styles.submenuBar}>
171
186
  <SideNavigationGroupContent
172
187
  groups={activeNavItem.submenu.groups ?? []}
@@ -177,12 +192,12 @@ function SideNavigationElement({
177
192
  )}
178
193
  </div>
179
194
 
180
- {(!isExperimental || !!activeNavItem?.submenu) && (
195
+ {!isExperimental && (
181
196
  <div className={Styles.sideNavFooter}>
182
197
  <div className={Styles.divider} />
183
198
  <div className={Styles.sideNavBottom}>
184
199
  <SideNavigationOptionsToggle
185
- expanded={isExpanded}
200
+ appearance={isExpanded ? 'collapse-button' : 'expand'}
186
201
  onExpandedChange={handleExpandedChange}
187
202
  />
188
203
  </div>
@@ -348,25 +363,34 @@ const SideNavigationGroupLink: FC<NavigationSubmenuItemData & NavigationComponen
348
363
 
349
364
  /** Side Navigation options toggle */
350
365
  const SideNavigationOptionsToggle: FC<{
351
- expanded: boolean;
366
+ appearance: 'expand' | 'collapse' | 'collapse-button';
352
367
  onExpandedChange?(expanded: boolean): void;
353
- }> = ({ expanded, onExpandedChange }) =>
368
+ }> = ({ appearance, onExpandedChange }) =>
354
369
  withTooltip(
355
370
  <div
356
371
  data-cy="navigation-left-options"
357
372
  data-pendo="navigation-left-options"
358
373
  className={classNames(Styles.optionsItem)}
359
- onClick={() => onExpandedChange?.(!expanded)}
374
+ onClick={() => onExpandedChange?.(appearance === 'expand')}
360
375
  >
361
376
  <div className={Styles.optionsItemContent}>
362
377
  <div className={Styles.optionsIconWrapper}>
363
- <Icon className={Styles.optionsIcon} svg={expanded ? SvgCollapse : SvgExpand} />
378
+ <Icon
379
+ className={Styles.optionsIcon}
380
+ svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
381
+ />
364
382
  </div>
365
383
 
366
- {expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
384
+ {appearance === 'collapse-button' && (
385
+ <span className={Styles.optionsItemText}>Collapse Menu</span>
386
+ )}
367
387
  </div>
368
388
  </div>,
369
- expanded ? undefined : 'Expand Menu',
389
+ appearance === 'expand'
390
+ ? 'Expand Menu'
391
+ : appearance === 'collapse'
392
+ ? 'Collapse Menu'
393
+ : undefined,
370
394
  'right'
371
395
  );
372
396