@servicetitan/navigation 11.0.0-canary.237.ff793b3.0 → 11.1.0

package/dist/utils/navigation-legacy.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=navigation-legacy.js.map

package/dist/utils/navigation-legacy.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-legacy.js","sourceRoot":"","sources":["../../src/utils/navigation-legacy.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/utils/navigation-legacy.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { IconPropsStrict } from '@servicetitan/design-system';\nimport { FC, HTMLAttributeAnchorTarget } from 'react';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\nexport interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {\n    /** link description */\n    hint: string;\n\n    /** flag if the link is not shown (based on FG and/or user permissions) */\n    isHidden?: boolean;\n\n    /** custom className (can be used for mdi icons) */\n    iconClassName?: string;\n\n    /** anvil's icon name of item */\n    iconName?: IconPropsStrict['name'];\n\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** icon component of item (<svg />) */\n    iconComponent?: FC;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface HeaderNavigationItemLinkProps {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface HeaderNavigationTriggerPropsStrict {\n    /** unique identifier */\n    id: string;\n    /** item title (used for mobile) */\n    title: string;\n    /** tooltip text */\n    tooltip?: string;\n    /** item description */\n    hint?: string;\n    /** container class name */\n    className?: string;\n    /** item label */\n    label?: string;\n    /** label class name */\n    labelClassName?: string;\n    /** isActive */\n    isActive?: boolean;\n    /** counter value shown for item */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n    /** counter component class name */\n    counterClassName?: string;\n    /** icon component class name */\n    iconClassName?: string;\n    /** IconComponent custom icon component */\n    iconComponent?: FC;\n    /** iconName name of anvil icon */\n    iconName?: IconPropsStrict['name'];\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n    /** svg icon (anvil2) of active item */\n    iconActive?: IconProps['svg'];\n}\n\nexport interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n\nexport interface HeaderNavigationLinkPropsStrict\n    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {\n    /** link href */\n    to: string;\n    /** isActive */\n    isActive?: boolean | ((pathname: string) => boolean);\n    /** link html target */\n    target?: HTMLAttributeAnchorTarget;\n}\n\nexport interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n"],"names":[],"mappings":"AAsGA,WAGC"}

package/dist/utils/navigation.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=navigation.js.map

package/dist/utils/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { FC } from 'react';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n    /** flag if the link is not shown (based on FG and/or user permissions) */\n    isHidden?: boolean;\n\n    /** custom className (can be used for mdi icons) */\n    iconClassName?: string;\n\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** icon component of item (<svg />) */\n    iconComponent?: FC;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface NavigationLinkData {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n    /** submenu groups */\n    groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n    /** item tag (optional) value. shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n    /** submenu group title */\n    title: string;\n\n    /** submenu group links */\n    links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AAwDA,WAMC"}

package/dist/utils/side-nav.js

@@ -3,8 +3,8 @@ export function getSubmenuGroupTag(submenu, defaultTag) {
         return defaultTag;
     }
     let tagValue = undefined;
-    for (const group of submenu.groups) {
-        for (const link of group.links) {
+    for (const group of submenu.groups){
+        for (const link of group.links){
             const ltv = link.counter;
             if (ltv) {
                 if (typeof ltv === 'number') {
@@ -12,8 +12,7 @@ export function getSubmenuGroupTag(submenu, defaultTag) {
                         tagValue = 0;
                     }
                     tagValue += ltv;
-                }
-                else if (typeof tagValue !== 'number') {
+                } else if (typeof tagValue !== 'number') {
                     tagValue = true;
                 }
             }
@@ -21,8 +20,12 @@ export function getSubmenuGroupTag(submenu, defaultTag) {
     }
     return tagValue ? getCounterTag(tagValue) : defaultTag;
 }
-export const getCounterTag = (counter, tag) => {
+export const getCounterTag = (counter, tag)=>{
     const value = counter !== null && counter !== void 0 ? counter : tag === null || tag === void 0 ? void 0 : tag.value;
-    return value ? { value, className: '' } : undefined;
+    return value ? {
+        value,
+        className: ''
+    } : undefined;
 };
+
 //# sourceMappingURL=side-nav.js.map

package/dist/utils/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAC9B,OAA0C,EAC1C,UAAuC;IAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ,GAAiC,SAAS,CAAC;IAEvD,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACjC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAC7B,MAAM,GAAG,GAAiC,IAAI,CAAC,OAAO,CAAC;YAEvD,IAAI,GAAG,EAAE,CAAC;gBACN,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;wBAC/B,QAAQ,GAAG,CAAC,CAAC;oBACjB,CAAC;oBACD,QAAQ,IAAI,GAAG,CAAC;gBACpB,CAAC;qBAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBACtC,QAAQ,GAAG,IAAI,CAAC;gBACpB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3D,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,OAAoC,EACpC,GAAoB,EACO,EAAE;IAC7B,MAAM,KAAK,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC;IAEpC,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC,CAAC"}
+{"version":3,"sources":["../../src/utils/side-nav.ts"],"sourcesContent":["import { CounterTagProps } from '../components/counter-tag';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\nexport function getSubmenuGroupTag(\n    submenu: NavigationSubmenuData | undefined,\n    defaultTag: CounterTagProps | undefined\n): CounterTagProps | undefined {\n    if (!submenu) {\n        return defaultTag;\n    }\n\n    let tagValue: number | boolean | undefined = undefined;\n\n    for (const group of submenu.groups) {\n        for (const link of group.links) {\n            const ltv: number | boolean | undefined = link.counter;\n\n            if (ltv) {\n                if (typeof ltv === 'number') {\n                    if (typeof tagValue !== 'number') {\n                        tagValue = 0;\n                    }\n                    tagValue += ltv;\n                } else if (typeof tagValue !== 'number') {\n                    tagValue = true;\n                }\n            }\n        }\n    }\n\n    return tagValue ? getCounterTag(tagValue) : defaultTag;\n}\n\nexport const getCounterTag = (\n    counter: CounterTagValue | undefined,\n    tag?: CounterTagData\n): CounterTagProps | undefined => {\n    const value = counter ?? tag?.value;\n\n    return value ? { value, className: '' } : undefined;\n};\n"],"names":["getSubmenuGroupTag","submenu","defaultTag","tagValue","undefined","group","groups","link","links","ltv","counter","getCounterTag","tag","value","className"],"mappings":"AAIA,OAAO,SAASA,mBACZC,OAA0C,EAC1CC,UAAuC;IAEvC,IAAI,CAACD,SAAS;QACV,OAAOC;IACX;IAEA,IAAIC,WAAyCC;IAE7C,KAAK,MAAMC,SAASJ,QAAQK,MAAM,CAAE;QAChC,KAAK,MAAMC,QAAQF,MAAMG,KAAK,CAAE;YAC5B,MAAMC,MAAoCF,KAAKG,OAAO;YAEtD,IAAID,KAAK;gBACL,IAAI,OAAOA,QAAQ,UAAU;oBACzB,IAAI,OAAON,aAAa,UAAU;wBAC9BA,WAAW;oBACf;oBACAA,YAAYM;gBAChB,OAAO,IAAI,OAAON,aAAa,UAAU;oBACrCA,WAAW;gBACf;YACJ;QACJ;IACJ;IAEA,OAAOA,WAAWQ,cAAcR,YAAYD;AAChD;AAEA,OAAO,MAAMS,gBAAgB,CACzBD,SACAE;IAEA,MAAMC,QAAQH,oBAAAA,qBAAAA,UAAWE,gBAAAA,0BAAAA,IAAKC,KAAK;IAEnC,OAAOA,QAAQ;QAAEA;QAAOC,WAAW;IAAG,IAAIV;AAC9C,EAAE"}

package/dist/utils/use-breakpoint.js

@@ -1,14 +1,17 @@
 import { useBreakpoint } from '@servicetitan/anvil2';
 import { useMemo } from 'react';
-export const useTitanBreakpoint = () => {
+export const useTitanBreakpoint = ()=>{
     const breakpoint = useBreakpoint();
-    return useMemo(() => {
-        var _a, _b;
-        return ({
-            name: (_a = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _a !== void 0 ? _a : 'xl',
-            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
-            width: (_b = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _b !== void 0 ? _b : 0,
-        });
-    }, [breakpoint]);
+    return useMemo(()=>{
+        var _breakpoint_name, _breakpoint_innerWidth;
+        return {
+            name: (_breakpoint_name = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _breakpoint_name !== void 0 ? _breakpoint_name : 'xl',
+            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            width: (_breakpoint_innerWidth = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _breakpoint_innerWidth !== void 0 ? _breakpoint_innerWidth : 0
+        };
+    }, [
+        breakpoint
+    ]);
 };
+
 //# sourceMappingURL=use-breakpoint.js.map

package/dist/utils/use-breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK;YAC3D,KAAK,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,CAAC;SACrC,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../src/utils/use-breakpoint.ts"],"sourcesContent":["import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';\nimport { useMemo } from 'react';\n\nexport interface TitanBreakpoint {\n    name: BreakpointReturnProps['name'];\n    isMobile: boolean;\n    width: number;\n}\n\nexport const useTitanBreakpoint = (): TitanBreakpoint => {\n    const breakpoint = useBreakpoint();\n\n    return useMemo(\n        () => ({\n            name: breakpoint?.name ?? 'xl',\n            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,\n            width: breakpoint?.innerWidth ?? 0,\n        }),\n        [breakpoint]\n    );\n};\n"],"names":["useBreakpoint","useMemo","useTitanBreakpoint","breakpoint","name","isMobile","innerWidth","width"],"mappings":"AAAA,SAAgCA,aAAa,QAAQ,uBAAuB;AAC5E,SAASC,OAAO,QAAQ,QAAQ;AAQhC,OAAO,MAAMC,qBAAqB;IAC9B,MAAMC,aAAaH;IAEnB,OAAOC,QACH;YACUE,kBAECA;eAHJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,aAAaA,WAAWG,UAAU,GAAG,MAAM;YACrDC,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;KAAW;AAEpB,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "11.0.0-canary.237.ff793b3.0",
+    "version": "11.1.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -26,9 +26,9 @@
         "react": ">=18.0.0"
     },
     "devDependencies": {
-        "@servicetitan/anvil2": "~1.47.1",
+        "@servicetitan/anvil2": "~1.49.2",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^30.3.1",
+        "@servicetitan/react-ioc": "^32.6.0",
         "@servicetitan/tokens": ">=12.1.11",
         "@testing-library/react": "^16.2.0",
         "mobx": "~6.10.2",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "ff793b337eca5999e2472d38757b0618e5331fd9"
+    "gitHead": "e3dfbcd9f507c9f4373502a0e0d835f8e9fe2f2a"
 }

package/src/components/left-navigation/index.ts

@@ -1,4 +1,4 @@
 export * from './header-navigation-tiny';
 export * from './side-navigation';
 export * from './side-navigation-links';
-export * from './interface';
+export type * from './interface';

package/src/components/logo/logo-titan.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 export interface LogoTitanSvgProps {
+    className?: string;
     height?: number;
     width?: number;
     fill?: string;
@@ -13,11 +14,12 @@ export const LogoTitanSvg: FC<LogoTitanSvgProps> = props => {
         width: props.width ?? 116,
         height: props.height ?? 106,
     };
-    const fill = props.fill ?? '#3A3A3A';
+    const fill = props.fill ?? 'currentColor';
     const mantleFill = props.mantleFill ?? fill;
 
     return (
         <svg
+            className={props.className}
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"
             {...dimensions}

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -123,6 +123,11 @@
 
     .dropdown-section {
         padding: @spacing-1 @spacing-2;
+        position: relative;
+
+        &.dropdown-section-with-counter {
+            padding-right: @spacing-3;
+        }
     }
 
     .dropdown-link {
@@ -136,15 +141,22 @@
         }
     }
 
-    .counter {
-        color: @color-white;
-        font-size: @typescale-0;
-        font-weight: @font-weight-semibold;
+    .counter-wrapper {
         position: absolute;
-        top: @spacing-half;
-        margin-left: @spacing-half;
-        min-width: 12px !important;
-        min-height: 12px !important;
+        top: 0;
+        bottom: 0;
+        right: @spacing-1;
+
+        display: flex;
+        align-items: center;
+
+        .counter {
+            color: @color-white;
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+            min-width: 12px !important;
+            min-height: 12px !important;
+        }
     }
 }
 

package/src/components/profile-dropdown/profile-dropdown.module.less.d.ts

@@ -4,12 +4,14 @@ export const badge: string;
 export const badgeNoContent: string;
 export const badgeWithContent: string;
 export const counter: string;
+export const counterWrapper: string;
 export const dropdown: string;
 export const dropdownContent: string;
 export const dropdownContentBottomLeft: string;
 export const dropdownContentWrapper: string;
 export const dropdownLink: string;
 export const dropdownSection: string;
+export const dropdownSectionWithCounter: string;
 export const expandIcon: string;
 export const hint: string;
 export const hintContent: string;

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -96,7 +96,11 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
             ) : isLegacy ? (
                 <ProfileLogo />
             ) : (
-                <Icon size="large" svg={open ? SvgAccountActive : SvgAccountInactive} />
+                <Icon
+                    className="c-inherit-i"
+                    size="large"
+                    svg={open ? SvgAccountActive : SvgAccountInactive}
+                />
             )}
 
             {!!info && (
@@ -121,7 +125,7 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 
             <Icon
                 svg={open ? SvgExpandLess : SvgExpandMore}
-                className={classNames(Styles.expandIcon)}
+                className={classNames(Styles.expandIcon, 'c-inherit-i')}
                 size="small"
             />
 
@@ -148,6 +152,17 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     );
 };
 
+const useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>
+    useMemo(() => {
+        const data = getCounterTag(counter, tag);
+
+        return data ? (
+            <div className={Styles.counterWrapper}>
+                <CounterTag className={Styles.counter} data={data} />
+            </div>
+        ) : undefined;
+    }, [counter, tag]);
+
 export type ProfileItemContent =
     | { children: string; text?: string }
     | { children: ReactNode; text: string };
@@ -157,6 +172,8 @@ export interface ProfileDropdownSectionPropsStrict {
     id: string;
     tooltip?: string;
     className?: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
     onClick?(e: MouseEvent): void;
 }
 
@@ -167,7 +184,9 @@ export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>,
 export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     children,
     className,
+    counter,
     id,
+    tag,
     text,
     tooltip,
     onClick,
@@ -181,20 +200,26 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
         }
     };
 
+    const tagElement = useTag(counter, tag);
+
     return withTooltip(
         <div
-            className={classNames(Styles.dropdownSection, className, {
-                'cursor-pointer': !!onClick,
-            })}
+            className={classNames(
+                Styles.dropdownSection,
+                tagElement && Styles.dropdownSectionWithCounter,
+                !!onClick && Styles.dropdownLink,
+                className
+            )}
             onClick={clickHandler}
             data-cy={`profile-dropdown-section-${id}`}
             data-pendo={`profile-dropdown-section-${id}`}
             {...rest}
         >
             {children}
+            {tagElement}
         </div>,
         tooltip,
-        'left'
+        { placement: 'left' }
     );
 };
 
@@ -234,15 +259,17 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
 
     const isExternalLink = external ?? to?.startsWith('http');
 
-    const tagElement = useMemo(
-        () => <CounterTag data={getCounterTag(counter, tag)} className={Styles.counter} />,
-        [counter, tag]
-    );
+    const tagElement = useTag(counter, tag);
 
     return withTooltip(
         isExternalLink ? (
             <a
-                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                className={classNames(
+                    Styles.dropdownSection,
+                    tagElement && Styles.dropdownSectionWithCounter,
+                    Styles.dropdownLink,
+                    className
+                )}
                 href={to}
                 target={target}
                 data-cy={`profile-dropdown-link-${id}`}
@@ -254,7 +281,12 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             </a>
         ) : (
             <NavigationComponent
-                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                className={classNames(
+                    Styles.dropdownSection,
+                    Styles.dropdownLink,
+                    { [Styles.dropdownSectionWithCounter]: !!tagElement },
+                    className
+                )}
                 target={target}
                 to={to}
                 data-cy={`profile-dropdown-link-${id}`}
@@ -266,7 +298,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             </NavigationComponent>
         ),
         tooltip,
-        'left'
+        { placement: 'left' }
     );
 };
 

package/src/components/titan-layout/index.ts

@@ -1,5 +1,5 @@
 export * from './titan-layout';
 export * from './layout-profile';
 export * from './layout-context';
-export * from './layout-logo';
-export * from './interface';
+export type { TitanLayoutLogoProps } from './layout-logo';
+export type * from './interface';

package/src/components/titan-layout/layout-header-dark.tsx

@@ -0,0 +1,186 @@
+import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
+import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';
+import classNames from 'classnames';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { LayoutHeader, LayoutHeaderProps } from './layout-header';
+import { LayoutHeaderNavigationLink } from './layout-header-links';
+import * as Styles from './layout-header.module.less';
+import { withTooltip } from './with-tooltip';
+
+function useForceUpdate() {
+    const [, setTick] = useState(0);
+    return useCallback(() => {
+        setTick(tick => tick + 1);
+    }, []);
+}
+
+enum MinimizedState {
+    Calculating,
+    Minimized,
+    Full,
+}
+
+interface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {
+    navigationMainItems?: NavigationItemData[];
+    navigationOverflowItems?: NavigationItemData[];
+}
+
+export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
+    className,
+    isMobile,
+    navigationMainItems,
+    navigationOverflowItems,
+    hasNotifications,
+    onBurgerClick,
+    logo,
+    profile,
+    right,
+    rightText,
+    rightClassName,
+    center,
+    centerClassName,
+    ...rest
+}) => {
+    return center ? (
+        <div
+            className={classNames(Styles.headerStacked, className)}
+            data-cy="header-navigation"
+            {...rest}
+        >
+            <LayoutHeader
+                variant="dark"
+                right={right}
+                rightText={rightText}
+                rightClassName={rightClassName}
+                center={center}
+                centerClassName={centerClassName}
+                isMobile={isMobile}
+                hasNotifications={hasNotifications}
+                logo={logo}
+                profile={profile}
+                onBurgerClick={onBurgerClick}
+                data-cy="header-navigation-top"
+            />
+
+            {!isMobile && (
+                <LayoutHeaderNav
+                    className={Styles.headerStackedNav}
+                    mainItems={navigationMainItems}
+                    overflowItems={navigationOverflowItems}
+                />
+            )}
+        </div>
+    ) : (
+        <LayoutHeader
+            variant="dark"
+            className={classNames(className, !isMobile && Styles.headerDesktopNav)}
+            right={right}
+            rightText={rightText}
+            rightClassName={rightClassName}
+            center={
+                isMobile ? undefined : (
+                    <LayoutHeaderNav
+                        mainItems={navigationMainItems}
+                        overflowItems={navigationOverflowItems}
+                    />
+                )
+            }
+            centerClassName={centerClassName}
+            isMobile={isMobile}
+            hasNotifications={hasNotifications}
+            logo={logo}
+            profile={profile}
+            onBurgerClick={onBurgerClick}
+            {...rest}
+        />
+    );
+};
+
+interface LayoutHeaderNavProps {
+    className?: string;
+    mainItems?: NavigationItemData[];
+    overflowItems?: NavigationItemData[];
+}
+const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const navigationRef = useRef<HTMLDivElement>(null);
+    const forceUpdate = useForceUpdate();
+    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setMinimized(MinimizedState.Calculating);
+            forceUpdate();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [forceUpdate]);
+
+    const updateIsMinimized = () => {
+        if (containerRef.current && navigationRef.current) {
+            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+                setMinimized(MinimizedState.Minimized);
+            } else if (minimized === MinimizedState.Calculating) {
+                setMinimized(MinimizedState.Full);
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateIsMinimized();
+    });
+
+    useEffect(() => {
+        setMinimized(MinimizedState.Calculating);
+        forceUpdate();
+    }, [forceUpdate]);
+
+    const isMinimized = minimized === MinimizedState.Minimized;
+
+    return (
+        <div
+            ref={containerRef}
+            className={classNames(Styles.headerNavigationWrapper, className, {
+                [Styles.calculating]: minimized === MinimizedState.Calculating,
+            })}
+            data-cy="navigation-items"
+        >
+            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>
+                {mainItems?.map(item =>
+                    withTooltip(
+                        <LayoutHeaderNavigationLink
+                            {...item}
+                            label={isMinimized ? undefined : item.title}
+                            key={item.id}
+                        />,
+                        isMinimized ? item.title : undefined,
+                        { key: item.id }
+                    )
+                )}
+            </div>
+            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}
+        </div>
+    );
+};
+
+const LayoutHeaderNavOverflow: FC<{
+    items: NavigationItemData[];
+}> = ({ items }) => {
+    return (
+        <Menu
+            trigger={props => (
+                <ButtonCompound {...props} className={Styles.headerNavigationOverflowTrigger}>
+                    <Icon svg={SvgMoreVert} size="medium" />
+                </ButtonCompound>
+            )}
+            contentClassName={Styles.headerNavigationOverflow}
+            placement="bottom-end"
+        >
+            {items.map(item => (
+                <LayoutHeaderNavigationLink {...item} label={item.title} key={item.id} />
+            ))}
+        </Menu>
+    );
+};

package/src/components/titan-layout/layout-header-links.tsx

@@ -66,6 +66,7 @@ export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     labelClassName,
     tag,
     target,
+    title,
     ...rest
 }) => {
     const { NavigationComponent } = useTitanLayoutContext();
@@ -77,7 +78,6 @@ export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             {...rest}
             key={id}
             to={to}
-            title={hint}
             className={classNames(Styles.navigationLink, className, {
                 [Styles.navigationItemActive]: isActive === true,
                 [Styles.navigationItemIconState]: !!icon && !!iconActive,
@@ -134,7 +134,8 @@ export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = (
         >
             <HeaderNavigationItemContent
                 tag={getCounterTag(counter, tag)}
-                icon={isActive && iconActive ? iconActive : icon}
+                icon={icon}
+                iconActive={iconActive}
                 label={label}
                 labelClassName={labelClassName}
             />