@servicetitan/navigation 2.4.2 → 3.0.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

@@ -12,7 +12,7 @@ export interface SideNavigationProps {
     /** 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 +20,10 @@ interface SideNavigationItemProps extends HeaderNavigationItemData {
 }
 /** Side Navigation menu item */
 export declare const SideNavigationItem: FC<SideNavigationItemProps>;
+/** Side Navigation options item */
+export declare const SideNavigationOptions: FC<{
+    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,MAAM,OAAO,CAAC;AACrC,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,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,CAkClD,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,mCAAmC;AACnC,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CA8DA,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 { 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, 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: [_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))) }), _jsxs("div", { className: Styles.sideNavBottom, children: [_jsx("div", { className: Styles.sideNavBottomDivider }), _jsx(SideNavigationOptions, { 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,19 @@ 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 item */
+export const SideNavigationOptions = ({ expanded, onExpandedChange }) => {
+    const [open, setOpen] = useState(false);
+    const trigger = withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => setOpen(!open), children: [_jsx("div", { className: Styles.optionsIcon, children: _jsx(IconSideOptions, {}) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Menu Options" })] }), open || expanded ? undefined : 'Menu Options', 'r');
+    const onExpand = () => {
+        setOpen(false);
+        onExpandedChange(true);
+    };
+    const onCollapse = () => {
+        setOpen(false);
+        onExpandedChange(false);
+    };
+    return (_jsxs(Popover, { className: "bg-neutral-30", trigger: trigger, 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":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EACH,uBAAuB,EACvB,cAAc,EACd,UAAU,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAiBxD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,SAAS,EACT,QAAQ,EACR,EAAE,EACF,KAAK,EACL,mBAAmB,GAAG,uBAAuB,EAC7C,gBAAgB,GACnB,EAAE,EAAE;IACD,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,YAC/C,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,OAAO,EACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EACtD,SAAS,CACZ,EACD,EAAE,EAAE,EAAE,aACE,iBAAiB,aAEzB,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aAAU,kBAAkB,YAC5D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,KAAC,kBAAkB,kBAAe,QAAQ,EAAE,QAAQ,IAAM,IAAI,GAArC,IAAI,CAAC,EAAE,CAAkC,CACrE,CAAC,GACA,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAChC,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,GAAI,EAC/C,KAAC,qBAAqB,IAClB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,GACpC,IACA,IACJ,GACgB,CAC7B,CAAC;AACN,CAAC,CAAC;AAMF,gCAAgC;AAChC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC5D,EAAE,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,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,WAAW,CACd,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;YACpD,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;SACnD,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,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,GAAQ,EACxE,CAAC,CAAC,OAAO,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,GAAI,KApB/E,EAAE,CAqBW,EACtB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC5B,GAAG,CACN,CAAC;AACN,CAAC,CAAC;AAEF,mCAAmC;AACnC,MAAM,CAAC,MAAM,qBAAqB,GAG7B,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IACpC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,WAAW,CACvB,0BACY,yBAAyB,gBACtB,yBAAyB,EACpC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,aAE7B,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAC9B,KAAC,eAAe,KAAG,GACjB,EAEL,CAAC,CAAC,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,6BAAqB,IACzE,EACN,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,EAC7C,GAAG,CACN,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,IAAI,EACd,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,GAAG,EACX,KAAK,EAAC,IAAI,aAEV,KAAC,OAAO,IAAC,SAAS,EAAC,OAAO,6BAAuB,EACjD,KAAC,yBAAyB,IACtB,MAAM,EAAE,CAAC,QAAQ,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,UAAU,GACrB,EACF,KAAC,yBAAyB,IACtB,MAAM,EAAE,CAAC,CAAC,QAAQ,EAClB,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,QAAQ,GACnB,EAEF,KAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,GAAG,EAEtC,KAAC,yBAAyB,IACtB,MAAM,EAAE,KAAK,EACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAChD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GACvC,IACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAK1B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACtD,MAAC,KAAK,IACF,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,0BAA0B,EAC5E,aAAa,EACb,EAAE,CAAC,MAAM,CAAC,2BAA2B,CAAC,EAAE,OAAO,IAAI,CAAC,MAAM,EAAE,CAC/D,EACD,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,IAAI,OAAO,aAE3B,KAAC,aAAa,KAAG,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,0CAA0C,YAAE,KAAK,GAAY,EAChF,MAAM,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,IAC5B,CACX,CAAC"}

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

@@ -1,6 +1,9 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@text-color: #383838;
+@border-color: #c5c5cb;
+
 .side-nav {
     display: flex;
     flex-direction: column;
@@ -12,21 +15,22 @@
     transition: width 100ms ease-in-out;
 
     background-color: #ebebeb;
-    border-right: 1px solid #c5c5cb;
+    border-right: 1px solid @border-color;
+
+    .side-nav-bottom {
+        padding-left: 12px;
+        padding-right: 12px;
 
-    .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;
+
+        .sideNavBottomDivider {
+            border-top: 1px solid @border-color;
+        }
     }
 
-    &.side-nav-collapsed {
+    &.side-nav-slim {
         width: 56px;
 
         .navigation-item-counter {
@@ -39,27 +43,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 {
@@ -69,6 +52,8 @@
         overflow-y: auto;
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
+        flex-grow: 1;
+        flex-basis: 0;
     }
 }
 
@@ -88,8 +73,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 +98,56 @@
     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;
+}

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

@@ -33,7 +33,7 @@ const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target,
     }, 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,

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.0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "c20faec803e84d7891453ef6834525522d72a3cd"
+    "gitHead": "7093c94176a1cf164fbb81e186123625abd87795"
 }

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,9 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
+@text-color: #383838;
+@border-color: #c5c5cb;
+
 .side-nav {
     display: flex;
     flex-direction: column;
@@ -12,21 +15,22 @@
     transition: width 100ms ease-in-out;
 
     background-color: #ebebeb;
-    border-right: 1px solid #c5c5cb;
+    border-right: 1px solid @border-color;
+
+    .side-nav-bottom {
+        padding-left: 12px;
+        padding-right: 12px;
 
-    .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;
+
+        .sideNavBottomDivider {
+            border-top: 1px solid @border-color;
+        }
     }
 
-    &.side-nav-collapsed {
+    &.side-nav-slim {
         width: 56px;
 
         .navigation-item-counter {
@@ -39,27 +43,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 {
@@ -69,6 +52,8 @@
         overflow-y: auto;
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
+        flex-grow: 1;
+        flex-basis: 0;
     }
 }
 
@@ -88,8 +73,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 +98,56 @@
     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;
+}

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

@@ -4,9 +4,16 @@ 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 sideNavBottomDivider: string;
 export const sideNavContent: string;
 export const sideNavExpanded: string;
-export const sideNavTop: string;
+export const sideNavSlim: string;
 

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

@@ -71,7 +71,7 @@ export const DefaultSideNavigation = () => {
         <SideNavigation
             navigationComponent={NavLinkMock}
             expanded={expanded}
-            onExpandChange={setExpanded}
+            onExpandedChange={setExpanded}
             items={[
                 items.dashboard,
                 items.calendar,

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, 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 {
@@ -23,7 +24,7 @@ export interface SideNavigationProps {
     /** navigation component used for routing */
     navigationComponent?: FC<NavLinkComponentProps>;
     /** expand change handler */
-    onExpandChange?(expanded: boolean): void;
+    onExpandedChange(expanded: boolean): void;
 }
 
 export const SideNavigation: FC<SideNavigationProps> = ({
@@ -32,34 +33,31 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     id,
     items,
     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>
                 <div className={Styles.sideNavContent} data-cy="navigation-items">
                     {items?.map(item => (
                         <SideNavigationItem key={item.id} expanded={expanded} {...item} />
                     ))}
                 </div>
+                <div className={Styles.sideNavBottom}>
+                    <div className={Styles.sideNavBottomDivider} />
+                    <SideNavigationOptions
+                        expanded={expanded}
+                        onExpandedChange={onExpandedChange}
+                    />
+                </div>
             </div>
         </NavLinkContext.Provider>
     );
@@ -116,3 +114,92 @@ export const SideNavigationItem: FC<SideNavigationItemProps> = ({
         'r'
     );
 };
+
+/** Side Navigation options item */
+export const SideNavigationOptions: FC<{
+    expanded?: boolean;
+    onExpandedChange(expanded: boolean): void;
+}> = ({ expanded, onExpandedChange }) => {
+    const [open, setOpen] = useState(false);
+
+    const trigger = withTooltip(
+        <div
+            data-cy="navigation-left-options"
+            data-pendo="navigation-left-options"
+            className={classNames(Styles.optionsItem)}
+            onClick={() => setOpen(!open)}
+        >
+            <div className={Styles.optionsIcon}>
+                <IconSideOptions />
+            </div>
+
+            {!!expanded && <span className={Styles.optionsItemText}>Menu Options</span>}
+        </div>,
+        open || expanded ? undefined : 'Menu Options',
+        'r'
+    );
+
+    const onExpand = () => {
+        setOpen(false);
+        onExpandedChange(true);
+    };
+    const onCollapse = () => {
+        setOpen(false);
+        onExpandedChange(false);
+    };
+
+    return (
+        <Popover
+            className="bg-neutral-30"
+            trigger={trigger}
+            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>
+);