@servicetitan/navigation 2.4.2 → 3.1.0

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

@@ -0,0 +1,4 @@
+export declare const IconSideOptions: () => import("react/jsx-runtime").JSX.Element;
+export declare const IconSideSlim: () => import("react/jsx-runtime").JSX.Element;
+export declare const IconSideExpanded: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,+CAyB3B,CAAC;AAEF,eAAO,MAAM,YAAY,+CAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAyB5B,CAAC"}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconSideOptions = () => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M1 3C1 1.89543 1.89543 1 3 1H7V17H3C1.89543 17 1 16.1046 1 15V3Z", stroke: "currentColor", strokeWidth: "2", strokeOpacity: "1" }), _jsx("rect", { x: "1", y: "1", width: "16", height: "16", rx: "2", stroke: "currentColor", strokeWidth: "2", strokeOpacity: "1" })] }));
+export const IconSideSlim = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 8L7 16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" })] }));
+export const IconSideExpanded = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 8L7 16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" }), _jsx("path", { d: "M11 8V16", stroke: "currentColor", strokeOpacity: "1", strokeWidth: "2", strokeLinecap: "round" })] }));
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/components/side-navigation/icons.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CACjC,eACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,eACI,CAAC,EAAC,kEAAkE,EACpE,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,GAAG,GACnB,EACF,eACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,GAAG,GACnB,IACA,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAC9B,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC1F,eACI,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACxB,EACF,eACI,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,IACA,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC1F,eACI,CAAC,EAAC,yJAAyJ,EAC3J,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACxB,EACF,eACI,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,EACF,eACI,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,GAAG,EACjB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACvB,IACA,CACT,CAAC"}

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 export interface SideNavigationProps {
     /** container class name */
@@ -7,12 +7,14 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
+    /** top navigation items */
+    itemsTop?: HeaderNavigationItemData[];
     /** is menu expanded */
     expanded?: boolean;
     /** navigation component used for routing */
     navigationComponent?: FC<NavLinkComponentProps>;
     /** expand change handler */
-    onExpandChange?(expanded: boolean): void;
+    onExpandedChange(expanded: boolean): void;
 }
 export declare const SideNavigation: FC<SideNavigationProps>;
 interface SideNavigationItemProps extends HeaderNavigationItemData {
@@ -20,5 +22,15 @@ interface SideNavigationItemProps extends HeaderNavigationItemData {
 }
 /** Side Navigation menu item */
 export declare const SideNavigationItem: FC<SideNavigationItemProps>;
+/** Side Navigation options toggle */
+export declare const SideNavigationOptionsToggle: FC<{
+    expanded?: boolean;
+    onExpandedChange(expanded: boolean): void;
+}>;
+/** Side Navigation options popover */
+export declare const SideNavigationOptionsPopover: FC<PropsWithChildren<{
+    expanded?: boolean;
+    onExpandedChange(expanded: boolean): void;
+}>>;
 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;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"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAWzF,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,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4ClD,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;AAEF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC;AAEN,sCAAsC;AACtC,eAAO,MAAM,4BAA4B,EAAE,EAAE,CACzC,iBAAiB,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAAC,CA8CL,CAAC"}

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Icon } from '@servicetitan/design-system';
+import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
+import { Fragment, useState } from 'react';
 import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag } from '../counter-tag';
+import { IconSideExpanded, IconSideOptions, IconSideSlim } from './icons';
 import * as Styles from './side-navigation.module.less';
-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, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) })] }) }));
+export const SideNavigation = ({ className, expanded, id, items, itemsTop, navigationComponent = DefaultNavLinkComponent, onExpandedChange, }) => {
+    return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }) }));
 };
 /** Side Navigation menu item */
 export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, expanded, }) => {
@@ -16,4 +18,20 @@ export const SideNavigationItem = ({ id, to, title, hint, counter, className, ic
             [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');
 };
+/** Side Navigation options toggle */
+export const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange(!expanded), children: [_jsx("div", { className: Styles.optionsIcon, children: _jsx(IconSideOptions, {}) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'r');
+/** Side Navigation options popover */
+export const SideNavigationOptionsPopover = ({ children, expanded, onExpandedChange }) => {
+    const [open, setOpen] = useState(false);
+    const onExpand = () => {
+        setOpen(false);
+        onExpandedChange(true);
+    };
+    const onCollapse = () => {
+        setOpen(false);
+        onExpandedChange(false);
+    };
+    return (_jsxs(Popover, { className: "bg-neutral-30", trigger: children, direction: "tr", onClickOutside: () => setOpen(false), open: open, padding: "s", width: "xs", children: [_jsx(Eyebrow, { className: "p-l-2", children: "menu options" }), _jsx(SideNavigationOptionsItem, { active: !expanded, icon: IconSideSlim, title: "Slim", onClick: onCollapse }), _jsx(SideNavigationOptionsItem, { active: !!expanded, icon: IconSideExpanded, title: "Expanded", onClick: onExpand }), _jsx(Divider, { className: "m-x-half m-y-1" }), _jsx(SideNavigationOptionsItem, { active: false, icon: expanded ? IconSideExpanded : IconSideSlim, title: expanded ? 'Expanded' : 'Slim' })] }));
+};
+const SideNavigationOptionsItem = ({ active, onClick, title, icon: IconComponent }) => (_jsxs(Stack, { className: classNames(active ? Styles.optionsPopoverItemActive : Styles.optionsPopoverItemInactive, 'p-y-1 p-x-2', { [Styles.optionsPopoverItemClickable]: onClick && !active }), alignItems: "center", onClick: !active && onClick, children: [_jsx(IconComponent, {}), _jsx(BodyText, { className: "c-inherit m-l-1 flex-grow-1 flex-basis-0", children: title }), active && _jsx(Icon, { name: "check" })] }));
 //# 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":"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"}
+{"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

@@ -1,6 +1,10 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@text-color: var(--colorsTextDefault, @color-neutral-400);
+@border-color: var(--colorsBorderGrey, @color-neutral-60);
+@bg-color: var(--colorsSurfaceGrey, @color-neutral-50);
+
 .side-nav {
     display: flex;
     flex-direction: column;
@@ -11,22 +15,19 @@
     -o-transition: width 100ms ease-in-out;
     transition: width 100ms ease-in-out;
 
-    background-color: #ebebeb;
-    border-right: 1px solid #c5c5cb;
+    background-color: @bg-color;
+
+    .side-nav-bottom {
+        padding-left: 12px;
+        padding-right: 12px;
+        border-top: 1px solid @border-color;
 
-    .side-nav-top {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 56px;
-        flex-basis: 56px;
-        flex-grow: 0;
-        flex-shrink: 0;
-        border-bottom: 1px solid #c5c5cb;
-        padding-left: @spacing-1;
+        flex-direction: column;
+        justify-content: center;
     }
 
-    &.side-nav-collapsed {
+    &.side-nav-slim {
         width: 56px;
 
         .navigation-item-counter {
@@ -39,27 +40,6 @@
 
     &.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 {
@@ -67,14 +47,24 @@
         flex-direction: column;
         align-items: stretch;
         overflow-y: auto;
-        margin-top: @spacing-1;
-        margin-bottom: @spacing-1;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .side-nav-top {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
     }
 }
 
 .navigation-item {
     font-family: @base-font-family;
-    color: #383838;
+    color: @text-color;
     position: relative;
     display: flex;
     justify-content: flex-start;
@@ -88,8 +78,7 @@
     border-radius: 12px;
 
     &.navigation-item-active {
-        color: @color-white !important;
-        background-color: @color-neutral-500;
+        background-color: @color-white;
     }
 
     &:hover:not(.navigation-item-active) {
@@ -114,3 +103,62 @@
     width: 24px;
     font-size: 24px;
 }
+
+.options-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    cursor: pointer;
+    height: 32px;
+
+    margin-top: @spacing-1;
+    margin-bottom: @spacing-1;
+    border-radius: 8px;
+
+    &:hover {
+        background-color: @color-white;
+    }
+
+    .options-icon {
+        height: 18px;
+        width: 18px;
+        font-size: 18px;
+        padding-left: 7px;
+    }
+
+    .options-item-text {
+        font-family: @base-font-family;
+        font-size: @typescale-3;
+        padding-left: @spacing-2;
+        flex: 1;
+    }
+}
+
+.options-popover-item-clickable {
+    cursor: pointer;
+
+    &:hover {
+        background-color: @color-neutral-60;
+    }
+}
+
+.options-popover-item-active {
+    background-color: @color-blue-100;
+    color: @color-blue-500;
+}
+
+.options-popover-item-inactive,
+.options-popover-item-active {
+    border-radius: @border-radius-1;
+}
+
+.divider {
+    border-top: 1px solid @border-color;
+    margin-left: 12px;
+    margin-right: 12px;
+}

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,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAyBjC,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;AAmDF,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC"}

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

@@ -27,13 +27,14 @@ const items = {
     pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
     projects: getItem('projects', { iconName: 'folder_special' }),
     reports: getItem('reports', { iconName: 'poll' }),
+    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
 };
 const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
         e.preventDefault();
     }, className: props.className, children: props.children }));
 export const DefaultSideNavigation = () => {
     const [expanded, setExpanded] = useState(false);
-    return (_jsx(SideNavigation, { navigationComponent: NavLinkMock, expanded: expanded, onExpandChange: setExpanded, items: [
+    return (_jsx(SideNavigation, { navigationComponent: NavLinkMock, expanded: expanded, onExpandedChange: setExpanded, items: [
             items.dashboard,
             items.calendar,
             items.calls,
@@ -46,6 +47,6 @@ export const DefaultSideNavigation = () => {
             items.priceBook,
             items.pointOfSale,
             items.reports,
-        ] }));
+        ], itemsTop: [items.tasks] }));
 };
 //# 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "2.4.2",
+    "version": "3.1.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "c20faec803e84d7891453ef6834525522d72a3cd"
+    "gitHead": "bc12bb9c5588e0887811bff83cd360df90708442"
 }

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

@@ -0,0 +1,73 @@
+export const IconSideOptions = () => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M1 3C1 1.89543 1.89543 1 3 1H7V17H3C1.89543 17 1 16.1046 1 15V3Z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeOpacity="1"
+        />
+        <rect
+            x="1"
+            y="1"
+            width="16"
+            height="16"
+            rx="2"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeOpacity="1"
+        />
+    </svg>
+);
+
+export const IconSideSlim = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M7 8L7 16"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+        />
+    </svg>
+);
+
+export const IconSideExpanded = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M3 6.375C3 4.51104 4.51104 3 6.375 3H17.625C19.489 3 21 4.51104 21 6.375V17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.375Z"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M7 8L7 16"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+        />
+        <path
+            d="M11 8V16"
+            stroke="currentColor"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+        />
+    </svg>
+);

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

@@ -1,6 +1,10 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@text-color: var(--colorsTextDefault, @color-neutral-400);
+@border-color: var(--colorsBorderGrey, @color-neutral-60);
+@bg-color: var(--colorsSurfaceGrey, @color-neutral-50);
+
 .side-nav {
     display: flex;
     flex-direction: column;
@@ -11,22 +15,19 @@
     -o-transition: width 100ms ease-in-out;
     transition: width 100ms ease-in-out;
 
-    background-color: #ebebeb;
-    border-right: 1px solid #c5c5cb;
+    background-color: @bg-color;
+
+    .side-nav-bottom {
+        padding-left: 12px;
+        padding-right: 12px;
+        border-top: 1px solid @border-color;
 
-    .side-nav-top {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 56px;
-        flex-basis: 56px;
-        flex-grow: 0;
-        flex-shrink: 0;
-        border-bottom: 1px solid #c5c5cb;
-        padding-left: @spacing-1;
+        flex-direction: column;
+        justify-content: center;
     }
 
-    &.side-nav-collapsed {
+    &.side-nav-slim {
         width: 56px;
 
         .navigation-item-counter {
@@ -39,27 +40,6 @@
 
     &.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 {
@@ -67,14 +47,24 @@
         flex-direction: column;
         align-items: stretch;
         overflow-y: auto;
-        margin-top: @spacing-1;
-        margin-bottom: @spacing-1;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .side-nav-top {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
     }
 }
 
 .navigation-item {
     font-family: @base-font-family;
-    color: #383838;
+    color: @text-color;
     position: relative;
     display: flex;
     justify-content: flex-start;
@@ -88,8 +78,7 @@
     border-radius: 12px;
 
     &.navigation-item-active {
-        color: @color-white !important;
-        background-color: @color-neutral-500;
+        background-color: @color-white;
     }
 
     &:hover:not(.navigation-item-active) {
@@ -114,3 +103,62 @@
     width: 24px;
     font-size: 24px;
 }
+
+.options-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    cursor: pointer;
+    height: 32px;
+
+    margin-top: @spacing-1;
+    margin-bottom: @spacing-1;
+    border-radius: 8px;
+
+    &:hover {
+        background-color: @color-white;
+    }
+
+    .options-icon {
+        height: 18px;
+        width: 18px;
+        font-size: 18px;
+        padding-left: 7px;
+    }
+
+    .options-item-text {
+        font-family: @base-font-family;
+        font-size: @typescale-3;
+        padding-left: @spacing-2;
+        flex: 1;
+    }
+}
+
+.options-popover-item-clickable {
+    cursor: pointer;
+
+    &:hover {
+        background-color: @color-neutral-60;
+    }
+}
+
+.options-popover-item-active {
+    background-color: @color-blue-100;
+    color: @color-blue-500;
+}
+
+.options-popover-item-inactive,
+.options-popover-item-active {
+    border-radius: @border-radius-1;
+}
+
+.divider {
+    border-top: 1px solid @border-color;
+    margin-left: 12px;
+    margin-right: 12px;
+}

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

@@ -1,12 +1,20 @@
 export const __esModule: true;
+export const divider: string;
 export const navigationIcon: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemText: string;
+export const optionsIcon: string;
+export const optionsItem: string;
+export const optionsItemText: string;
+export const optionsPopoverItemActive: string;
+export const optionsPopoverItemClickable: string;
+export const optionsPopoverItemInactive: string;
 export const sideNav: string;
-export const sideNavCollapsed: string;
+export const sideNavBottom: string;
 export const sideNavContent: string;
 export const sideNavExpanded: string;
+export const sideNavSlim: string;
 export const sideNavTop: string;
 

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

@@ -50,6 +50,7 @@ const items = {
     pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
     projects: getItem('projects', { iconName: 'folder_special' }),
     reports: getItem('reports', { iconName: 'poll' }),
+    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
 };
 
 const NavLinkMock: FC<NavLinkComponentProps> = props => (
@@ -71,7 +72,7 @@ export const DefaultSideNavigation = () => {
         <SideNavigation
             navigationComponent={NavLinkMock}
             expanded={expanded}
-            onExpandChange={setExpanded}
+            onExpandedChange={setExpanded}
             items={[
                 items.dashboard,
                 items.calendar,
@@ -88,6 +89,7 @@ export const DefaultSideNavigation = () => {
                 items.pointOfSale,
                 items.reports,
             ]}
+            itemsTop={[items.tasks]}
         />
     );
 };

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

@@ -1,6 +1,6 @@
-import { Button, Icon } from '@servicetitan/design-system';
+import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC } from 'react';
+import { FC, Fragment, PropsWithChildren, useState } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 import {
     DefaultNavLinkComponent,
@@ -9,6 +9,7 @@ import {
 } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag } from '../counter-tag';
+import { IconSideExpanded, IconSideOptions, IconSideSlim } from './icons';
 import * as Styles from './side-navigation.module.less';
 
 export interface SideNavigationProps {
@@ -18,12 +19,14 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
+    /** top navigation items */
+    itemsTop?: HeaderNavigationItemData[];
     /** is menu expanded */
     expanded?: boolean;
     /** navigation component used for routing */
     navigationComponent?: FC<NavLinkComponentProps>;
     /** expand change handler */
-    onExpandChange?(expanded: boolean): void;
+    onExpandedChange(expanded: boolean): void;
 }
 
 export const SideNavigation: FC<SideNavigationProps> = ({
@@ -31,35 +34,42 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     expanded,
     id,
     items,
+    itemsTop,
     navigationComponent = DefaultNavLinkComponent,
-    onExpandChange,
+    onExpandedChange,
 }) => {
     return (
         <NavLinkContext.Provider value={navigationComponent}>
             <div
                 className={classNames(
                     Styles.sideNav,
-                    expanded ? Styles.sideNavExpanded : Styles.sideNavCollapsed,
+                    expanded ? Styles.sideNavExpanded : Styles.sideNavSlim,
                     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>
+                {!!itemsTop?.length && (
+                    <Fragment>
+                        <div className={Styles.sideNavTop} data-cy="navigation-items-top">
+                            {itemsTop.map(item => (
+                                <SideNavigationItem key={item.id} expanded={expanded} {...item} />
+                            ))}
+                        </div>
+                        <div className={Styles.divider} />
+                    </Fragment>
+                )}
                 <div className={Styles.sideNavContent} data-cy="navigation-items">
                     {items?.map(item => (
                         <SideNavigationItem key={item.id} expanded={expanded} {...item} />
                     ))}
                 </div>
+                <div className={Styles.sideNavBottom}>
+                    <SideNavigationOptionsToggle
+                        expanded={expanded}
+                        onExpandedChange={onExpandedChange}
+                    />
+                </div>
             </div>
         </NavLinkContext.Provider>
     );
@@ -116,3 +126,99 @@ export const SideNavigationItem: FC<SideNavigationItemProps> = ({
         'r'
     );
 };
+
+/** Side Navigation options toggle */
+export const SideNavigationOptionsToggle: FC<{
+    expanded?: boolean;
+    onExpandedChange(expanded: boolean): void;
+}> = ({ expanded, onExpandedChange }) =>
+    withTooltip(
+        <div
+            data-cy="navigation-left-options"
+            data-pendo="navigation-left-options"
+            className={classNames(Styles.optionsItem)}
+            onClick={() => onExpandedChange(!expanded)}
+        >
+            <div className={Styles.optionsIcon}>
+                <IconSideOptions />
+            </div>
+
+            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
+        </div>,
+        expanded ? undefined : 'Expand Menu',
+        'r'
+    );
+
+/** Side Navigation options popover */
+export const SideNavigationOptionsPopover: FC<
+    PropsWithChildren<{
+        expanded?: boolean;
+        onExpandedChange(expanded: boolean): void;
+    }>
+> = ({ children, expanded, onExpandedChange }) => {
+    const [open, setOpen] = useState(false);
+
+    const onExpand = () => {
+        setOpen(false);
+        onExpandedChange(true);
+    };
+    const onCollapse = () => {
+        setOpen(false);
+        onExpandedChange(false);
+    };
+
+    return (
+        <Popover
+            className="bg-neutral-30"
+            trigger={children}
+            direction="tr"
+            onClickOutside={() => setOpen(false)}
+            open={open}
+            padding="s"
+            width="xs"
+        >
+            <Eyebrow className="p-l-2">menu options</Eyebrow>
+            <SideNavigationOptionsItem
+                active={!expanded}
+                icon={IconSideSlim}
+                title="Slim"
+                onClick={onCollapse}
+            />
+            <SideNavigationOptionsItem
+                active={!!expanded}
+                icon={IconSideExpanded}
+                title="Expanded"
+                onClick={onExpand}
+            />
+
+            <Divider className="m-x-half m-y-1" />
+
+            <SideNavigationOptionsItem
+                active={false}
+                icon={expanded ? IconSideExpanded : IconSideSlim}
+                title={expanded ? 'Expanded' : 'Slim'}
+            />
+        </Popover>
+    );
+};
+
+const SideNavigationOptionsItem: FC<{
+    active: boolean;
+    icon: FC;
+    title: string;
+    onClick?: () => void;
+}> = ({ active, onClick, title, icon: IconComponent }) => (
+    <Stack
+        className={classNames(
+            active ? Styles.optionsPopoverItemActive : Styles.optionsPopoverItemInactive,
+            'p-y-1 p-x-2',
+            { [Styles.optionsPopoverItemClickable]: onClick && !active }
+        )}
+        alignItems="center"
+        onClick={!active && onClick}
+    >
+        <IconComponent />
+        <BodyText className="c-inherit m-l-1 flex-grow-1 flex-basis-0">{title}</BodyText>
+        {active && <Icon name="check" />}
+    </Stack>
+);