@servicetitan/navigation 2.3.0 → 2.4.0

package/dist/components/side-navigation/side-navigation.d.ts

@@ -7,10 +7,18 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
+    /** is menu expanded */
+    expanded?: boolean;
     /** navigation component used for routing */
     navigationComponent?: FC<NavLinkComponentProps>;
+    /** expand change handler */
+    onExpandChange?(expanded: boolean): void;
 }
 export declare const SideNavigation: FC<SideNavigationProps>;
+interface SideNavigationItemProps extends HeaderNavigationItemData {
+    expanded?: boolean;
+}
 /** Side Navigation menu item */
-export declare const SideNavigationItem: FC<HeaderNavigationItemData>;
+export declare const SideNavigationItem: FC<SideNavigationItemProps>;
+export {};
 //# sourceMappingURL=side-navigation.d.ts.map

package/dist/components/side-navigation/side-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AASzF,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,wBAAwB,EAAE,CAAC;IACnC,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqBlD,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CA6C3D,CAAC"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAUzF,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,wBAAwB,EAAE,CAAC;IACnC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,cAAc,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqClD,CAAC;AAEF,UAAU,uBAAwB,SAAQ,wBAAwB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC"}

package/dist/components/side-navigation/side-navigation.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Tooltip } from '@servicetitan/design-system';
+import { Button, Icon } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag } from '../counter-tag';
 import * as Styles from './side-navigation.module.less';
-export const SideNavigation = ({ className, id, items, navigationComponent = DefaultNavLinkComponent, }) => {
-    return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsx("div", { className: classNames(Styles.sideNav, className), id: id, "data-cy": "side-navigation", children: _jsx("div", { className: Styles.sideNavContent, children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({}, item), item.id))) }) }) }));
+export const SideNavigation = ({ className, expanded, id, items, navigationComponent = DefaultNavLinkComponent, onExpandChange, }) => {
+    return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavCollapsed, className), id: id, "data-cy": "side-navigation", children: [_jsx("div", { className: Styles.sideNavTop, children: _jsx(Button, { iconName: "keyboard_tab", fill: "subtle", onClick: () => onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!expanded), "aria-label": expanded ? 'Collapse menu' : 'Expand menu', children: expanded ? 'Collapse menu' : undefined }) }), _jsx("div", { className: Styles.sideNavContent, children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) })] }) }));
 };
 /** Side Navigation menu item */
-export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, }) => {
+export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, expanded, }) => {
     const NavigationComponent = useNavLink();
     const iconClass = classNames(Styles.navigationIcon, iconClassName);
-    return (_jsx(Tooltip, { el: "div", direction: "r", text: title, children: _jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-            }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!counter && (_jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter }))] }, id) }));
+    return withTooltip(_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, title: hint, className: classNames(Styles.navigationItem, className, {
+            [Styles.navigationItemActive]: isActive === true,
+        }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'r');
 };
 //# sourceMappingURL=side-navigation.js.map

package/dist/components/side-navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EACH,uBAAuB,EACvB,cAAc,EACd,UAAU,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAaxD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,SAAS,EACT,EAAE,EACF,KAAK,EACL,mBAAmB,GAAG,uBAAuB,GAChD,EAAE,EAAE;IACD,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,YAC/C,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAChD,EAAE,EAAE,EAAE,aACE,iBAAiB,YAEzB,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAChC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,KAAC,kBAAkB,oBAAmB,IAAI,GAAjB,IAAI,CAAC,EAAE,CAAc,CACjD,CAAC,GACA,GACJ,GACgB,CAC7B,CAAC;AACN,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,EAC7D,EAAE,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IAEnE,OAAO,CACH,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI,EAAE,KAAK,YACvC,MAAC,mBAAmB,eACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,EAEnC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,EAAE;gBACpD,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;aACnD,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,aAE3C,aAAa,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,SAAS,YACnB,KAAC,aAAa,KAAG,GACjB,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,CACjD,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAE,SAAS,GAAI,CAC9B,EAEA,CAAC,CAAC,OAAO,IAAI,CACV,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,GAAI,CACzE,KArBI,EAAE,CAsBW,GAChB,CACb,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/side-navigation/side-navigation.module.less

@@ -2,18 +2,67 @@
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 .side-nav {
-    width: 56px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+
+    -webkit-transition: width 100ms ease-in-out;
+    -moz-transition: width 100ms ease-in-out;
+    -o-transition: width 100ms ease-in-out;
+    transition: width 100ms ease-in-out;
 
     background-color: #ebebeb;
     border-right: 1px solid #c5c5cb;
 
+    .side-nav-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 56px;
+        border-bottom: 1px solid #c5c5cb;
+        padding-left: @spacing-1;
+    }
+
+    &.side-nav-collapsed {
+        width: 56px;
+
+        .navigation-item-counter {
+            position: absolute;
+            right: -7px;
+            top: -2px;
+            z-index: auto;
+        }
+    }
+
+    &.side-nav-expanded {
+        width: 240px;
+
+        .side-nav-top :global(.Button) {
+            padding: @spacing-1 !important;
+            border-radius: 12px;
+            cursor: pointer;
+
+            :global(.Button__content) {
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            :global(.Button__icon) {
+                font-size: 24px;
+                padding-left: @spacing-0;
+                padding-right: @spacing-1;
+
+                svg {
+                    transform: rotateY(180deg);
+                }
+            }
+        }
+    }
+
     .side-nav-content {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         overflow-y: auto;
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
@@ -21,20 +70,23 @@
 }
 
 .navigation-item {
-    width: 56px;
     font-family: @base-font-family;
     color: #383838;
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
+    align-items: center;
     flex-wrap: nowrap;
     text-wrap: nowrap;
 
-    padding-top: @spacing-1;
-    padding-bottom: @spacing-1;
+    padding: @spacing-1;
+    margin-left: @spacing-1;
+    margin-right: @spacing-1;
+    border-radius: 12px;
 
     &.navigation-item-active {
-        color: @color-purple-600 !important;
+        color: @color-white !important;
+        background-color: @color-neutral-500;
     }
 
     &:hover:not(.navigation-item-active) {
@@ -44,9 +96,13 @@
     .navigation-item-counter {
         color: @color-white;
         font-weight: @font-weight-semibold;
-        position: absolute;
-        right: 2px;
-        top: -2px;
+    }
+
+    .navigation-item-text {
+        font-family: @base-font-family;
+        font-size: @typescale-3;
+        padding-left: @spacing-2;
+        flex: 1;
     }
 }
 

package/dist/components/side-navigation/side-navigation.stories.d.ts

@@ -6,5 +6,5 @@ declare const _default: {
     parameters: {};
 };
 export default _default;
-export declare const defaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=side-navigation.stories.d.ts.map

package/dist/components/side-navigation/side-navigation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;;;;;AAY1C,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAoBjC,CAAC"}
+{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC"}

package/dist/components/side-navigation/side-navigation.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { SideNavigation } from './';
 const layout = (Story) => {
     return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] }));
@@ -30,18 +31,21 @@ const items = {
 const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
         e.preventDefault();
     }, className: props.className, children: props.children }));
-export const defaultSideNavigation = () => (_jsx(SideNavigation, { navigationComponent: NavLinkMock, items: [
-        items.dashboard,
-        items.calendar,
-        items.calls,
-        items.accounting,
-        items.dispatch,
-        items.fleet,
-        items.followUps,
-        items.inventory,
-        items.marketing,
-        items.priceBook,
-        items.pointOfSale,
-        items.reports,
-    ] }));
+export const DefaultSideNavigation = () => {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsx(SideNavigation, { navigationComponent: NavLinkMock, expanded: expanded, onExpandChange: setExpanded, items: [
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.fleet,
+            items.followUps,
+            items.inventory,
+            items.marketing,
+            items.priceBook,
+            items.pointOfSale,
+            items.reports,
+        ] }));
+};
 //# sourceMappingURL=side-navigation.stories.js.map

package/dist/components/side-navigation/side-navigation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
+export * from './components/side-navigation';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
+export * from './components/side-navigation';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/utils/with-tooltip.d.ts

@@ -1,3 +1,4 @@
+import { TooltipPropsStrict } from '@servicetitan/design-system';
 import { ReactNode } from 'react';
-export declare const withTooltip: (element: ReactNode, tooltip?: string) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare const withTooltip: (element: ReactNode, tooltip: string | undefined, direction?: TooltipPropsStrict['direction']) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 //# sourceMappingURL=with-tooltip.d.ts.map

package/dist/utils/with-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,WAAW,YAAa,SAAS,YAAY,MAAM,iHAO3D,CAAC"}
+{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,WAAW,YACX,SAAS,WACT,MAAM,GAAG,SAAS,cAChB,kBAAkB,CAAC,WAAW,CAAC,iHAQzC,CAAC"}

package/dist/utils/with-tooltip.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@servicetitan/design-system';
-export const withTooltip = (element, tooltip) => tooltip ? (_jsx(Tooltip, { el: "div", direction: "b", text: tooltip, children: element })) : (element);
+export const withTooltip = (element, tooltip, direction = 'b') => tooltip ? (_jsx(Tooltip, { el: "div", direction: direction, text: tooltip, children: element })) : (element);
 //# sourceMappingURL=with-tooltip.js.map

package/dist/utils/with-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-tooltip.js","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAGtD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAkB,EAAE,OAAgB,EAAE,EAAE,CAChE,OAAO,CAAC,CAAC,CAAC,CACN,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI,EAAE,OAAO,YACxC,OAAO,GACF,CACb,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CAAC"}
+{"version":3,"file":"with-tooltip.js","sourceRoot":"","sources":["../../src/utils/with-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,CACvB,OAAkB,EAClB,OAA2B,EAC3B,YAA6C,GAAG,EAClD,EAAE,CACA,OAAO,CAAC,CAAC,CAAC,CACN,KAAC,OAAO,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,YAChD,OAAO,GACF,CACb,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "bc2868724b59e5aa753e2f2313a6316d44407b8e"
+    "gitHead": "8d8d1f7a55d4d68408a728079821bd0745ce5c68"
 }

package/src/components/side-navigation/side-navigation.module.less

@@ -2,18 +2,67 @@
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
 .side-nav {
-    width: 56px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+
+    -webkit-transition: width 100ms ease-in-out;
+    -moz-transition: width 100ms ease-in-out;
+    -o-transition: width 100ms ease-in-out;
+    transition: width 100ms ease-in-out;
 
     background-color: #ebebeb;
     border-right: 1px solid #c5c5cb;
 
+    .side-nav-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 56px;
+        border-bottom: 1px solid #c5c5cb;
+        padding-left: @spacing-1;
+    }
+
+    &.side-nav-collapsed {
+        width: 56px;
+
+        .navigation-item-counter {
+            position: absolute;
+            right: -7px;
+            top: -2px;
+            z-index: auto;
+        }
+    }
+
+    &.side-nav-expanded {
+        width: 240px;
+
+        .side-nav-top :global(.Button) {
+            padding: @spacing-1 !important;
+            border-radius: 12px;
+            cursor: pointer;
+
+            :global(.Button__content) {
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            :global(.Button__icon) {
+                font-size: 24px;
+                padding-left: @spacing-0;
+                padding-right: @spacing-1;
+
+                svg {
+                    transform: rotateY(180deg);
+                }
+            }
+        }
+    }
+
     .side-nav-content {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         overflow-y: auto;
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
@@ -21,20 +70,23 @@
 }
 
 .navigation-item {
-    width: 56px;
     font-family: @base-font-family;
     color: #383838;
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
+    align-items: center;
     flex-wrap: nowrap;
     text-wrap: nowrap;
 
-    padding-top: @spacing-1;
-    padding-bottom: @spacing-1;
+    padding: @spacing-1;
+    margin-left: @spacing-1;
+    margin-right: @spacing-1;
+    border-radius: 12px;
 
     &.navigation-item-active {
-        color: @color-purple-600 !important;
+        color: @color-white !important;
+        background-color: @color-neutral-500;
     }
 
     &:hover:not(.navigation-item-active) {
@@ -44,9 +96,13 @@
     .navigation-item-counter {
         color: @color-white;
         font-weight: @font-weight-semibold;
-        position: absolute;
-        right: 2px;
-        top: -2px;
+    }
+
+    .navigation-item-text {
+        font-family: @base-font-family;
+        font-size: @typescale-3;
+        padding-left: @spacing-2;
+        flex: 1;
     }
 }
 

package/src/components/side-navigation/side-navigation.module.less.d.ts

@@ -3,6 +3,10 @@ export const navigationIcon: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
+export const navigationItemText: string;
 export const sideNav: string;
+export const sideNavCollapsed: string;
 export const sideNavContent: string;
+export const sideNavExpanded: string;
+export const sideNavTop: string;
 

package/src/components/side-navigation/side-navigation.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType, FC, useState } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 import { SideNavigation } from './';
 
@@ -65,24 +65,29 @@ const NavLinkMock: FC<NavLinkComponentProps> = props => (
     </a>
 );
 
-export const defaultSideNavigation = () => (
-    <SideNavigation
-        navigationComponent={NavLinkMock}
-        items={[
-            items.dashboard,
-            items.calendar,
-            items.calls,
-            items.accounting,
-            items.dispatch,
+export const DefaultSideNavigation = () => {
+    const [expanded, setExpanded] = useState(false);
+    return (
+        <SideNavigation
+            navigationComponent={NavLinkMock}
+            expanded={expanded}
+            onExpandChange={setExpanded}
+            items={[
+                items.dashboard,
+                items.calendar,
+                items.calls,
+                items.accounting,
+                items.dispatch,
 
-            items.fleet,
-            items.followUps,
-            items.inventory,
+                items.fleet,
+                items.followUps,
+                items.inventory,
 
-            items.marketing,
-            items.priceBook,
-            items.pointOfSale,
-            items.reports,
-        ]}
-    />
-);
+                items.marketing,
+                items.priceBook,
+                items.pointOfSale,
+                items.reports,
+            ]}
+        />
+    );
+};

package/src/components/side-navigation/side-navigation.tsx

@@ -1,4 +1,4 @@
-import { Icon, Tooltip } from '@servicetitan/design-system';
+import { Button, Icon } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
@@ -7,6 +7,7 @@ import {
     NavLinkContext,
     useNavLink,
 } from '../../utils/navigation-context';
+import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag } from '../counter-tag';
 import * as Styles from './side-navigation.module.less';
 
@@ -17,26 +18,46 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
+    /** is menu expanded */
+    expanded?: boolean;
     /** navigation component used for routing */
     navigationComponent?: FC<NavLinkComponentProps>;
+    /** expand change handler */
+    onExpandChange?(expanded: boolean): void;
 }
 
 export const SideNavigation: FC<SideNavigationProps> = ({
     className,
+    expanded,
     id,
     items,
     navigationComponent = DefaultNavLinkComponent,
+    onExpandChange,
 }) => {
     return (
         <NavLinkContext.Provider value={navigationComponent}>
             <div
-                className={classNames(Styles.sideNav, className)}
+                className={classNames(
+                    Styles.sideNav,
+                    expanded ? Styles.sideNavExpanded : Styles.sideNavCollapsed,
+                    className
+                )}
                 id={id}
                 data-cy="side-navigation"
             >
+                <div className={Styles.sideNavTop}>
+                    <Button
+                        iconName="keyboard_tab"
+                        fill="subtle"
+                        onClick={() => onExpandChange?.(!expanded)}
+                        aria-label={expanded ? 'Collapse menu' : 'Expand menu'}
+                    >
+                        {expanded ? 'Collapse menu' : undefined}
+                    </Button>
+                </div>
                 <div className={Styles.sideNavContent}>
                     {items?.map(item => (
-                        <SideNavigationItem key={item.id} {...item} />
+                        <SideNavigationItem key={item.id} expanded={expanded} {...item} />
                     ))}
                 </div>
             </div>
@@ -44,8 +65,12 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     );
 };
 
+interface SideNavigationItemProps extends HeaderNavigationItemData {
+    expanded?: boolean;
+}
+
 /** Side Navigation menu item */
-export const SideNavigationItem: FC<HeaderNavigationItemData> = ({
+export const SideNavigationItem: FC<SideNavigationItemProps> = ({
     id,
     to,
     title,
@@ -56,38 +81,38 @@ export const SideNavigationItem: FC<HeaderNavigationItemData> = ({
     iconComponent: IconComponent,
     iconName,
     isActive,
+    expanded,
 }) => {
     const NavigationComponent = useNavLink();
     const iconClass = classNames(Styles.navigationIcon, iconClassName);
 
-    return (
-        <Tooltip el="div" direction="r" text={title}>
-            <NavigationComponent
-                data-cy={`navigation-item-${id}`}
-                data-pendo={`navigation-item-${id}`}
-                key={id}
-                to={to}
-                title={hint}
-                className={classNames(Styles.navigationItem, className, {
-                    [Styles.navigationItemActive]: isActive === true,
-                })}
-                isActive={typeof isActive === 'function' ? isActive : undefined}
-                activeClassName={Styles.navigationItemActive}
-            >
-                {IconComponent ? (
-                    <i className={iconClass}>
-                        <IconComponent />
-                    </i>
-                ) : iconName ? (
-                    <Icon name={iconName} className={iconClass} />
-                ) : (
-                    <i className={iconClass} />
-                )}
+    return withTooltip(
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            key={id}
+            to={to}
+            title={hint}
+            className={classNames(Styles.navigationItem, className, {
+                [Styles.navigationItemActive]: isActive === true,
+            })}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+        >
+            {IconComponent ? (
+                <i className={iconClass}>
+                    <IconComponent />
+                </i>
+            ) : iconName ? (
+                <Icon name={iconName} className={iconClass} />
+            ) : (
+                <i className={iconClass} />
+            )}
 
-                {!!counter && (
-                    <CounterTag data={counter} className={Styles.navigationItemCounter} />
-                )}
-            </NavigationComponent>
-        </Tooltip>
+            {!!expanded && <span className={Styles.navigationItemText}>{title}</span>}
+            {!!counter && <CounterTag data={counter} className={Styles.navigationItemCounter} />}
+        </NavigationComponent>,
+        expanded ? undefined : title,
+        'r'
     );
 };

package/src/index.ts

@@ -4,5 +4,6 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
+export * from './components/side-navigation';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';

package/src/utils/with-tooltip.tsx

@@ -1,9 +1,13 @@
-import { Tooltip } from '@servicetitan/design-system';
+import { Tooltip, TooltipPropsStrict } from '@servicetitan/design-system';
 import { ReactNode } from 'react';
 
-export const withTooltip = (element: ReactNode, tooltip?: string) =>
+export const withTooltip = (
+    element: ReactNode,
+    tooltip: string | undefined,
+    direction: TooltipPropsStrict['direction'] = 'b'
+) =>
     tooltip ? (
-        <Tooltip el="div" direction="b" text={tooltip}>
+        <Tooltip el="div" direction={direction} text={tooltip}>
             {element}
         </Tooltip>
     ) : (