@servicetitan/navigation 12.0.0 → 12.0.1

package/dist/components/titan-layout/layout-header-dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAqEzD,CAAC"}
+{"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAqEzD,CAAC"}

package/dist/components/titan-layout/layout-header-dark.js

@@ -4,8 +4,9 @@ import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
 import SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';
 import classNames from 'classnames';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTitanLayoutContext } from './layout-context';
 import { LayoutHeader } from './layout-header';
-import { LayoutHeaderNavigationLink } from './layout-header-links';
+import { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';
 import * as Styles from './layout-header.module.less';
 import { withTooltip } from './with-tooltip';
 function useForceUpdate() {
@@ -70,6 +71,7 @@ const LayoutHeaderNav = ({ className, mainItems, overflowItems })=>{
     const navigationRef = useRef(null);
     const forceUpdate = useForceUpdate();
     const [minimized, setMinimized] = useState(0);
+    const { NavigationComponent } = useTitanLayoutContext();
     useEffect(()=>{
         const handleResize = ()=>{
             setMinimized(0);
@@ -82,7 +84,8 @@ const LayoutHeaderNav = ({ className, mainItems, overflowItems })=>{
     ]);
     const updateIsMinimized = ()=>{
         if (containerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+            const widthGap = 16 + ((overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) ? 32 : 0);
+            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {
                 setMinimized(1);
             } else if (minimized === 0) {
                 setMinimized(2);
@@ -109,37 +112,46 @@ const LayoutHeaderNav = ({ className, mainItems, overflowItems })=>{
             /*#__PURE__*/ _jsx("div", {
                 ref: navigationRef,
                 className: classNames(Styles.headerNavigation),
-                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>withTooltip(/*#__PURE__*/ _createElement(LayoutHeaderNavigationLink, {
+                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>withTooltip(/*#__PURE__*/ _createElement(InternalLayoutHeaderNavigationLink, {
                         ...item,
                         label: isMinimized ? undefined : item.title,
-                        key: item.id
+                        key: item.id,
+                        navigationComponent: NavigationComponent
                     }), isMinimized ? item.title : undefined, {
                         key: item.id
                     }))
             }),
             !!(overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNavOverflow, {
-                items: overflowItems
+                items: overflowItems,
+                navigationComponent: NavigationComponent
             })
         ]
     });
 };
-const LayoutHeaderNavOverflow = ({ items })=>{
+const LayoutHeaderNavOverflowTrigger = (props)=>/*#__PURE__*/ _jsx(ButtonCompound, {
+        ...props,
+        className: Styles.headerNavigationOverflowTrigger,
+        "data-cy": "navigation-overflow-trigger",
+        children: /*#__PURE__*/ _jsx(Icon, {
+            svg: SvgMoreVert,
+            size: "medium"
+        })
+    });
+const LayoutHeaderNavOverflow = ({ items, navigationComponent })=>{
     return /*#__PURE__*/ _jsx(Menu, {
-        trigger: (props)=>/*#__PURE__*/ _jsx(ButtonCompound, {
-                ...props,
-                className: Styles.headerNavigationOverflowTrigger,
-                children: /*#__PURE__*/ _jsx(Icon, {
-                    svg: SvgMoreVert,
-                    size: "medium"
-                })
-            }),
-        contentClassName: Styles.headerNavigationOverflow,
+        trigger: LayoutHeaderNavOverflowTrigger,
         placement: "bottom-end",
-        children: items.map((item)=>/*#__PURE__*/ _createElement(LayoutHeaderNavigationLink, {
-                ...item,
-                label: item.title,
-                key: item.id
-            }))
+        children: /*#__PURE__*/ _jsx("div", {
+            "data-cy": "navigation-overflow-content",
+            className: Styles.headerNavigationOverflow,
+            children: items.map((item)=>/*#__PURE__*/ _createElement(InternalLayoutHeaderNavigationLink, {
+                    ...item,
+                    label: item.title,
+                    key: item.id,
+                    navigationComponent: navigationComponent,
+                    isOverflow: true
+                }))
+        })
     });
 };
 

package/dist/components/titan-layout/layout-header-dark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderNavigationLink } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    onBurgerClick,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <LayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflow: FC<{\n    items: NavigationItemData[];\n}> = ({ items }) => {\n    return (\n        <Menu\n            trigger={props => (\n                <ButtonCompound {...props} className={Styles.headerNavigationOverflowTrigger}>\n                    <Icon svg={SvgMoreVert} size=\"medium\" />\n                </ButtonCompound>\n            )}\n            contentClassName={Styles.headerNavigationOverflow}\n            placement=\"bottom-end\"\n        >\n            {items.map(item => (\n                <LayoutHeaderNavigationLink {...item} label={item.title} key={item.id} />\n            ))}\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","LayoutHeader","LayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","length","LayoutHeaderNavOverflow","items","trigger","props","headerNavigationOverflowTrigger","svg","size","contentClassName","headerNavigationOverflow","placement"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    onBurgerClick,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <InternalLayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        {...item}\n                        label={item.title}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","length","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","navigationComponent","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}

package/dist/components/titan-layout/layout-header-links-internal.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation-legacy';
+import { NavigationComponentProps } from './interface-internal';
+/** Navigation extra item with link */
+export declare const InternalLayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps & NavigationComponentProps & {
+    isOverflow?: boolean;
+}>;
+/** Navigation extra item with icon button */
+export declare const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
+//# sourceMappingURL=layout-header-links-internal.d.ts.map

package/dist/components/titan-layout/layout-header-links-internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-header-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AAIvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AA0ChE,sCAAsC;AACtC,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAC/C,yBAAyB,GAAG,wBAAwB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAmDlF,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,qCAAqC,EAAE,EAAE,CAAC,4BAA4B,CA0ClF,CAAC"}

package/dist/components/titan-layout/layout-header-links-internal.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Icon } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag } from '../counter-tag';
+import * as Styles from './layout-header.module.less';
+/** Content for navigation items */ const InternalHeaderNavigationItemContent = ({ counterClassName, icon, iconActive, label, labelClassName, tag })=>{
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            !!icon && /*#__PURE__*/ _jsx(Icon, {
+                svg: icon,
+                className: Styles.navigationIcon
+            }),
+            !!iconActive && /*#__PURE__*/ _jsx(Icon, {
+                svg: iconActive,
+                className: classNames(Styles.navigationIcon, Styles.navigationIconActive)
+            }),
+            !!label && /*#__PURE__*/ _jsx("span", {
+                className: classNames(Styles.navigationItemLabel, labelClassName),
+                "data-cy": "nav-item-label",
+                children: label
+            }),
+            !!tag && /*#__PURE__*/ _jsx(CounterTag, {
+                data: tag,
+                className: classNames(Styles.navigationItemCounter, counterClassName),
+                longClassName: Styles.navigationItemCounterLong
+            })
+        ]
+    });
+};
+/** Navigation extra item with link */ export const InternalLayoutHeaderNavigationLink = ({ id, to, hint, tooltip, className, counter, icon, iconActive, iconClassName, iconName, iconComponent, isActive, isOverflow, label, labelClassName, tag, target, title, navigationComponent: NavigationComponent, ...rest })=>{
+    return /*#__PURE__*/ _createElement(NavigationComponent, {
+        "data-cy": `navigation-item-${id}`,
+        "data-pendo": `navigation-item-${id}`,
+        ...rest,
+        key: id,
+        to: to,
+        className: classNames(isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink, className, {
+            [Styles.navigationItemActive]: isActive === true,
+            [Styles.navigationItemIconState]: !!icon && !!iconActive
+        }),
+        isActive: typeof isActive === 'function' ? isActive : undefined,
+        activeClassName: Styles.navigationItemActive,
+        target: target
+    }, /*#__PURE__*/ _jsx(InternalHeaderNavigationItemContent, {
+        tag: getCounterTag(counter, tag),
+        icon: icon,
+        iconActive: iconActive,
+        label: label,
+        labelClassName: labelClassName
+    }));
+};
+/** Navigation extra item with icon button */ export const InternalLayoutHeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconName, isActive, hint, label, labelClassName, tag, tooltip, title, titleClassName, ...rest })=>{
+    return /*#__PURE__*/ _jsx("div", {
+        "data-cy": `navigation-trigger-${id}`,
+        "data-pendo": `navigation-trigger-${id}`,
+        ...rest,
+        title: hint,
+        className: classNames(Styles.navigationLink, {
+            [Styles.navigationItemActive]: isActive === true,
+            [Styles.navigationItemIconState]: !!icon && !!iconActive
+        }, 'cursor-pointer', className),
+        children: /*#__PURE__*/ _jsx(InternalHeaderNavigationItemContent, {
+            tag: getCounterTag(counter, tag),
+            icon: icon,
+            iconActive: iconActive,
+            label: label,
+            labelClassName: labelClassName
+        })
+    });
+};
+
+//# sourceMappingURL=layout-header-links-internal.js.map

package/dist/components/titan-layout/layout-header-links-internal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links-internal.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC, Fragment } from 'react';\nimport {\n    HeaderNavigationLinkProps,\n    HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\n// use v1 tooltips due to bug with v2 in monolith\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-header.module.less';\n\n/** Content for navigation items */\nconst InternalHeaderNavigationItemContent: FC<{\n    tag?: CounterTagProps;\n    counterClassName?: string;\n    icon: IconProps['svg'] | undefined;\n    iconActive?: IconProps['svg'];\n    label?: string;\n    labelClassName?: string;\n}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {\n    return (\n        <Fragment>\n            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}\n            {!!iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}\n                />\n            )}\n\n            {!!label && (\n                <span\n                    className={classNames(Styles.navigationItemLabel, labelClassName)}\n                    data-cy=\"nav-item-label\"\n                >\n                    {label}\n                </span>\n            )}\n\n            {!!tag && (\n                <CounterTag\n                    data={tag}\n                    className={classNames(Styles.navigationItemCounter, counterClassName)}\n                    longClassName={Styles.navigationItemCounterLong}\n                />\n            )}\n        </Fragment>\n    );\n};\n\n/** Navigation extra item with link */\nexport const InternalLayoutHeaderNavigationLink: FC<\n    HeaderNavigationLinkProps & NavigationComponentProps & { isOverflow?: boolean }\n> = ({\n    id,\n    to,\n    hint,\n    tooltip,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconClassName,\n    iconName,\n    iconComponent,\n    isActive,\n    isOverflow,\n    label,\n    labelClassName,\n    tag,\n    target,\n    title,\n    navigationComponent: NavigationComponent,\n    ...rest\n}) => {\n    return (\n        <NavigationComponent\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            {...rest}\n            key={id}\n            to={to}\n            className={classNames(\n                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,\n                className,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                }\n            )}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n            target={target}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </NavigationComponent>\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n    id,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconName,\n    isActive,\n    hint,\n    label,\n    labelClassName,\n    tag,\n    tooltip,\n    title,\n    titleClassName,\n    ...rest\n}) => {\n    return (\n        <div\n            data-cy={`navigation-trigger-${id}`}\n            data-pendo={`navigation-trigger-${id}`}\n            {...rest}\n            title={hint}\n            className={classNames(\n                Styles.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <InternalHeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </div>\n    );\n};\n"],"names":["Icon","classNames","Fragment","getCounterTag","CounterTag","Styles","InternalHeaderNavigationItemContent","counterClassName","icon","iconActive","label","labelClassName","tag","svg","className","navigationIcon","navigationIconActive","span","navigationItemLabel","data-cy","data","navigationItemCounter","longClassName","navigationItemCounterLong","InternalLayoutHeaderNavigationLink","id","to","hint","tooltip","counter","iconClassName","iconName","iconComponent","isActive","isOverflow","target","title","navigationComponent","NavigationComponent","rest","data-pendo","key","navigationLinkOverflow","navigationLink","navigationItemActive","navigationItemIconState","undefined","activeClassName","InternalLayoutHeaderNavigationTrigger","titleClassName","div"],"mappings":"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"}

package/dist/components/titan-layout/layout-header-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AA+CvC,sCAAsC;AACtC,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,yBAAyB,CA+CpE,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAAC,4BAA4B,CA2C1E,CAAC"}
+{"version":3,"file":"layout-header-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AAQvC,sCAAsC;AACtC,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,yBAAyB,CAOpE,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAAC,4BAA4B,CAK1E,CAAC"}

package/dist/components/titan-layout/layout-header-links.js

@@ -1,78 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { Icon } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-import { Fragment } from 'react';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
-import { withTooltip } from '../header-navigation/with-tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTitanLayoutContext } from './layout-context';
-import * as Styles from './layout-header.module.less';
-/** Content for navigation items */ const HeaderNavigationItemContent = ({ counterClassName, icon, iconActive, label, labelClassName, tag })=>{
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            !!icon && /*#__PURE__*/ _jsx(Icon, {
-                svg: icon,
-                className: Styles.navigationIcon
-            }),
-            !!iconActive && /*#__PURE__*/ _jsx(Icon, {
-                svg: iconActive,
-                className: classNames(Styles.navigationIcon, Styles.navigationIconActive)
-            }),
-            !!label && /*#__PURE__*/ _jsx("span", {
-                className: classNames(Styles.navigationItemLabel, labelClassName),
-                "data-cy": "nav-item-label",
-                children: label
-            }),
-            !!tag && /*#__PURE__*/ _jsx(CounterTag, {
-                data: tag,
-                className: classNames(Styles.navigationItemCounter, counterClassName),
-                longClassName: Styles.navigationItemCounterLong
-            })
-        ]
-    });
-};
-/** Navigation extra item with link */ export const LayoutHeaderNavigationLink = ({ id, to, hint, tooltip, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, title, ...rest })=>{
+import { InternalLayoutHeaderNavigationLink, InternalLayoutHeaderNavigationTrigger } from './layout-header-links-internal';
+import { withTooltip } from './with-tooltip';
+/** Navigation extra item with link */ export const LayoutHeaderNavigationLink = ({ tooltip, ...rest })=>{
     const { NavigationComponent } = useTitanLayoutContext();
-    return withTooltip(/*#__PURE__*/ _createElement(NavigationComponent, {
-        "data-cy": `navigation-item-${id}`,
-        "data-pendo": `navigation-item-${id}`,
+    return withTooltip(/*#__PURE__*/ _jsx(InternalLayoutHeaderNavigationLink, {
         ...rest,
-        key: id,
-        to: to,
-        className: classNames(Styles.navigationLink, className, {
-            [Styles.navigationItemActive]: isActive === true,
-            [Styles.navigationItemIconState]: !!icon && !!iconActive
-        }),
-        isActive: typeof isActive === 'function' ? isActive : undefined,
-        activeClassName: Styles.navigationItemActive,
-        target: target
-    }, /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
-        tag: getCounterTag(counter, tag),
-        icon: icon,
-        iconActive: iconActive,
-        label: label,
-        labelClassName: labelClassName
-    })), tooltip);
+        navigationComponent: NavigationComponent
+    }), tooltip);
 };
-/** Navigation extra item with icon button */ export const LayoutHeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconName, isActive, hint, label, labelClassName, tag, tooltip, title, titleClassName, ...rest })=>{
-    return withTooltip(/*#__PURE__*/ _jsx("div", {
-        "data-cy": `navigation-trigger-${id}`,
-        "data-pendo": `navigation-trigger-${id}`,
-        ...rest,
-        title: hint,
-        className: classNames(Styles.navigationLink, {
-            [Styles.navigationItemActive]: isActive === true,
-            [Styles.navigationItemIconState]: !!icon && !!iconActive
-        }, 'cursor-pointer', className),
-        children: /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
-            tag: getCounterTag(counter, tag),
-            icon: icon,
-            iconActive: iconActive,
-            label: label,
-            labelClassName: labelClassName
-        })
+/** Navigation extra item with icon button */ export const LayoutHeaderNavigationTrigger = ({ tooltip, ...rest })=>{
+    return withTooltip(/*#__PURE__*/ _jsx(InternalLayoutHeaderNavigationTrigger, {
+        ...rest
     }), tooltip);
 };
 

package/dist/components/titan-layout/layout-header-links.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"sourcesContent":["import { Icon, IconProps } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport { FC, Fragment } from 'react';\nimport {\n    HeaderNavigationLinkProps,\n    HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag, CounterTagProps } from '../counter-tag';\n// use v1 tooltips due to bug with v2 in monolith\nimport { withTooltip } from '../header-navigation/with-tooltip';\nimport { useTitanLayoutContext } from './layout-context';\nimport * as Styles from './layout-header.module.less';\n\n/** Content for navigation items */\nconst HeaderNavigationItemContent: FC<{\n    tag?: CounterTagProps;\n    counterClassName?: string;\n    icon: IconProps['svg'] | undefined;\n    iconActive?: IconProps['svg'];\n    label?: string;\n    labelClassName?: string;\n}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {\n    return (\n        <Fragment>\n            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}\n            {!!iconActive && (\n                <Icon\n                    svg={iconActive}\n                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}\n                />\n            )}\n\n            {!!label && (\n                <span\n                    className={classNames(Styles.navigationItemLabel, labelClassName)}\n                    data-cy=\"nav-item-label\"\n                >\n                    {label}\n                </span>\n            )}\n\n            {!!tag && (\n                <CounterTag\n                    data={tag}\n                    className={classNames(Styles.navigationItemCounter, counterClassName)}\n                    longClassName={Styles.navigationItemCounterLong}\n                />\n            )}\n        </Fragment>\n    );\n};\n\n/** Navigation extra item with link */\nexport const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({\n    id,\n    to,\n    hint,\n    tooltip,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconClassName,\n    iconComponent,\n    iconName,\n    isActive,\n    label,\n    labelClassName,\n    tag,\n    target,\n    title,\n    ...rest\n}) => {\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    return withTooltip(\n        <NavigationComponent\n            data-cy={`navigation-item-${id}`}\n            data-pendo={`navigation-item-${id}`}\n            {...rest}\n            key={id}\n            to={to}\n            className={classNames(Styles.navigationLink, className, {\n                [Styles.navigationItemActive]: isActive === true,\n                [Styles.navigationItemIconState]: !!icon && !!iconActive,\n            })}\n            isActive={typeof isActive === 'function' ? isActive : undefined}\n            activeClassName={Styles.navigationItemActive}\n            target={target}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </NavigationComponent>,\n        tooltip\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n    id,\n    className,\n    counter,\n    icon,\n    iconActive,\n    iconName,\n    isActive,\n    hint,\n    label,\n    labelClassName,\n    tag,\n    tooltip,\n    title,\n    titleClassName,\n    ...rest\n}) => {\n    return withTooltip(\n        <div\n            data-cy={`navigation-trigger-${id}`}\n            data-pendo={`navigation-trigger-${id}`}\n            {...rest}\n            title={hint}\n            className={classNames(\n                Styles.navigationLink,\n                {\n                    [Styles.navigationItemActive]: isActive === true,\n                    [Styles.navigationItemIconState]: !!icon && !!iconActive,\n                },\n                'cursor-pointer',\n                className\n            )}\n        >\n            <HeaderNavigationItemContent\n                tag={getCounterTag(counter, tag)}\n                icon={icon}\n                iconActive={iconActive}\n                label={label}\n                labelClassName={labelClassName}\n            />\n        </div>,\n        tooltip\n    );\n};\n"],"names":["Icon","classNames","Fragment","getCounterTag","CounterTag","withTooltip","useTitanLayoutContext","Styles","HeaderNavigationItemContent","counterClassName","icon","iconActive","label","labelClassName","tag","svg","className","navigationIcon","navigationIconActive","span","navigationItemLabel","data-cy","data","navigationItemCounter","longClassName","navigationItemCounterLong","LayoutHeaderNavigationLink","id","to","hint","tooltip","counter","iconClassName","iconComponent","iconName","isActive","target","title","rest","NavigationComponent","data-pendo","key","navigationLink","navigationItemActive","navigationItemIconState","undefined","activeClassName","LayoutHeaderNavigationTrigger","titleClassName","div"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-links.tsx"],"sourcesContent":["import { FC } from 'react';\nimport {\n    HeaderNavigationLinkProps,\n    HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalLayoutHeaderNavigationLink,\n    InternalLayoutHeaderNavigationTrigger,\n} from './layout-header-links-internal';\nimport { withTooltip } from './with-tooltip';\n\n/** Navigation extra item with link */\nexport const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    return withTooltip(\n        <InternalLayoutHeaderNavigationLink {...rest} navigationComponent={NavigationComponent} />,\n        tooltip\n    );\n};\n\n/** Navigation extra item with icon button */\nexport const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n    tooltip,\n    ...rest\n}) => {\n    return withTooltip(<InternalLayoutHeaderNavigationTrigger {...rest} />, tooltip);\n};\n"],"names":["useTitanLayoutContext","InternalLayoutHeaderNavigationLink","InternalLayoutHeaderNavigationTrigger","withTooltip","LayoutHeaderNavigationLink","tooltip","rest","NavigationComponent","navigationComponent","LayoutHeaderNavigationTrigger"],"mappings":";AAKA,SAASA,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,kCAAkC,EAClCC,qCAAqC,QAClC,iCAAiC;AACxC,SAASC,WAAW,QAAQ,iBAAiB;AAE7C,oCAAoC,GACpC,OAAO,MAAMC,6BAA4D,CAAC,EAAEC,OAAO,EAAE,GAAGC,MAAM;IAC1F,MAAM,EAAEC,mBAAmB,EAAE,GAAGP;IAEhC,OAAOG,0BACH,KAACF;QAAoC,GAAGK,IAAI;QAAEE,qBAAqBD;QACnEF;AAER,EAAE;AAEF,2CAA2C,GAC3C,OAAO,MAAMI,gCAAkE,CAAC,EAC5EJ,OAAO,EACP,GAAGC,MACN;IACG,OAAOH,0BAAY,KAACD;QAAuC,GAAGI,IAAI;QAAMD;AAC5E,EAAE"}

package/dist/components/titan-layout/layout-header.module.less

@@ -122,14 +122,15 @@
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     &.calculating {
-        .header-navigation {
-            opacity: 0;
+        > * {
+            opacity: 0 !important;
         }
     }
 
@@ -237,7 +238,8 @@
 }
 
 //!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
-.navigation-link {
+.navigation-link,
+.navigation-link-overflow {
     &.navigation-item-icon-state.navigation-item-active {
         .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
             display: none;
@@ -276,34 +278,34 @@
 
         border-radius: 12px;
         font-size: @size-links-tiny;
-    }
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
-        min-width: 16px !important;
-        height: 16px !important;
-        position: absolute;
-        top: 4px;
-        right: -2px;
 
-        &.navigation-item-counter-long {
-            right: -8px;
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            min-width: 16px !important;
+            height: 16px !important;
+            position: absolute;
+            top: 4px;
+            right: -2px;
+
+            &.navigation-item-counter-long {
+                right: -8px;
+            }
         }
-    }
 
-    .navigation-item-label {
-        color: inherit;
-        font-size: @typescale-1;
-        font-family: @base-font-family;
-        font-weight: @font-weight-semibold;
-        margin-left: @spacing-half;
-    }
+        .navigation-item-label {
+            color: inherit;
+            font-size: @typescale-1;
+            font-family: @base-font-family;
+            font-weight: @font-weight-semibold;
+            margin-left: @spacing-half;
+        }
 
-    .navigation-icon[data-anv][data-anv] {
-        height: 24px;
-        width: 24px;
+        .navigation-icon[data-anv][data-anv] {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     &.header-desktop {
@@ -339,7 +341,7 @@
 }
 
 .header-dark .navigation-link,
-.header-navigation > .navigation-link {
+.header-navigation .navigation-link {
     &.navigation-item-active {
         color: @color-blue-200 !important;
     }
@@ -401,47 +403,52 @@
     }
 }
 
-.header-navigation-overflow .navigation-link {
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-    cursor: pointer;
-
-    font-family: @base-font-family;
-    font-size: @typescale-4;
-    position: relative;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+.header-navigation-overflow {
+    display: flex;
+    flex-direction: column;
 
     margin-left: -0.5rem;
     margin-right: -0.5rem;
 
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue;
-    }
+    .navigation-link-overflow {
+        display: inline-flex;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        cursor: pointer;
 
-    .navigation-item-label {
         font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
+        font-size: @typescale-4;
+        position: relative;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
 
-        min-width: 12px !important;
-        height: 12px !important;
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-    .navigation-icon[data-anv][data-anv] {
-        height: 20px;
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        &.navigation-item-active:not(:hover) {
+            color: @color-blue;
+        }
+
+        .navigation-item-label {
+            font-family: @base-font-family;
+            font-size: @typescale-2;
+            margin-left: @spacing-half;
+        }
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            margin-right: @spacing-half;
+            margin-left: @spacing-half;
+
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+        .navigation-icon[data-anv][data-anv] {
+            height: 20px;
+        }
     }
 }

package/dist/components/titan-layout/layout-header.module.less.d.ts

@@ -32,4 +32,5 @@ export const navigationItemCounterLong: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;
+export const navigationLinkOverflow: string;
 

package/dist/components/titan-layout/titan-layout.stories.d.ts

@@ -22,6 +22,7 @@ export declare const TitanLayoutLegacyTop: (args: LayoutContentArgs) => import("
 export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil1TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil1Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const TitanLayoutAnvil1TopOverflow: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayoutAnvil2Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;

package/dist/components/titan-layout/titan-layout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAM3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}
+{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}

package/dist/components/titan-layout/with-tooltip.d.ts

@@ -1,6 +1,6 @@
 import { TooltipProps } from '@servicetitan/anvil2';
 import { ReactElement } from 'react';
-export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, props: {
+export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, props?: {
     placement?: TooltipProps["placement"];
     key?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/titan-layout/with-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,4CASA,CAAC"}
+{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,QAAQ;IACJ,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,4CASA,CAAC"}

package/dist/components/titan-layout/with-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n    element: ReactElement,\n    tooltip: string | undefined,\n    props: {\n        placement?: TooltipProps['placement'];\n        key?: string;\n    }\n) =>\n    tooltip ? (\n        <Tooltip placement=\"bottom\" {...props}>\n            <Tooltip.Content>{tooltip}</Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n"],"names":["Tooltip","withTooltip","element","tooltip","props","placement","Content","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,QAKAD,wBACI,MAACH;QAAQK,WAAU;QAAU,GAAGD,KAAK;;0BACjC,KAACJ,QAAQM,OAAO;0BAAEH;;0BAClB,KAACH,QAAQO,OAAO;0BAAEL;;;SAGtBA,QACF"}
+{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n    element: ReactElement,\n    tooltip: string | undefined,\n    props?: {\n        placement?: TooltipProps['placement'];\n        key?: string;\n    }\n) =>\n    tooltip ? (\n        <Tooltip placement=\"bottom\" {...props}>\n            <Tooltip.Content>{tooltip}</Tooltip.Content>\n            <Tooltip.Trigger>{element}</Tooltip.Trigger>\n        </Tooltip>\n    ) : (\n        element\n    );\n"],"names":["Tooltip","withTooltip","element","tooltip","props","placement","Content","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC,QAKAD,wBACI,MAACH;QAAQK,WAAU;QAAU,GAAGD,KAAK;;0BACjC,KAACJ,QAAQM,OAAO;0BAAEH;;0BAClB,KAACH,QAAQO,OAAO;0BAAEL;;;SAGtBA,QACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.0",
+    "version": "12.0.1",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "7dcd2ea3b19aa633f1cc2204060dfa25895b37a1"
+    "gitHead": "e2203627fce8344ea7b26536a80d70bca4065620"
 }

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

@@ -1,10 +1,12 @@
-import { ButtonCompound, Icon, Menu } from '@servicetitan/anvil2';
+import { ButtonCompound, Icon, Menu, MenuProps } 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 { NavigationComponentProps } from './interface-internal';
+import { useTitanLayoutContext } from './layout-context';
 import { LayoutHeader, LayoutHeaderProps } from './layout-header';
-import { LayoutHeaderNavigationLink } from './layout-header-links';
+import { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';
 import * as Styles from './layout-header.module.less';
 import { withTooltip } from './with-tooltip';
 
@@ -107,6 +109,7 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
     const navigationRef = useRef<HTMLDivElement>(null);
     const forceUpdate = useForceUpdate();
     const [minimized, setMinimized] = useState(MinimizedState.Calculating);
+    const { NavigationComponent } = useTitanLayoutContext();
 
     useEffect(() => {
         const handleResize = () => {
@@ -120,7 +123,8 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
 
     const updateIsMinimized = () => {
         if (containerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > containerRef.current.clientWidth) {
+            const widthGap = 16 + (overflowItems?.length ? 32 : 0);
+            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {
                 setMinimized(MinimizedState.Minimized);
             } else if (minimized === MinimizedState.Calculating) {
                 setMinimized(MinimizedState.Full);
@@ -150,37 +154,55 @@ const LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overf
             <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>
                 {mainItems?.map(item =>
                     withTooltip(
-                        <LayoutHeaderNavigationLink
+                        <InternalLayoutHeaderNavigationLink
                             {...item}
                             label={isMinimized ? undefined : item.title}
                             key={item.id}
+                            navigationComponent={NavigationComponent}
                         />,
                         isMinimized ? item.title : undefined,
                         { key: item.id }
                     )
                 )}
             </div>
-            {!!overflowItems?.length && <LayoutHeaderNavOverflow items={overflowItems} />}
+            {!!overflowItems?.length && (
+                <LayoutHeaderNavOverflow
+                    items={overflowItems}
+                    navigationComponent={NavigationComponent}
+                />
+            )}
         </div>
     );
 };
 
-const LayoutHeaderNavOverflow: FC<{
-    items: NavigationItemData[];
-}> = ({ items }) => {
+const LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (
+    <ButtonCompound
+        {...props}
+        className={Styles.headerNavigationOverflowTrigger}
+        data-cy="navigation-overflow-trigger"
+    >
+        <Icon svg={SvgMoreVert} size="medium" />
+    </ButtonCompound>
+);
+
+const LayoutHeaderNavOverflow: FC<
+    {
+        items: NavigationItemData[];
+    } & NavigationComponentProps
+> = ({ items, navigationComponent }) => {
     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 trigger={LayoutHeaderNavOverflowTrigger} placement="bottom-end">
+            <div data-cy="navigation-overflow-content" className={Styles.headerNavigationOverflow}>
+                {items.map(item => (
+                    <InternalLayoutHeaderNavigationLink
+                        {...item}
+                        label={item.title}
+                        key={item.id}
+                        navigationComponent={navigationComponent}
+                        isOverflow
+                    />
+                ))}
+            </div>
         </Menu>
     );
 };

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

@@ -0,0 +1,151 @@
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
+// use v1 tooltips due to bug with v2 in monolith
+import { NavigationComponentProps } from './interface-internal';
+import * as Styles from './layout-header.module.less';
+
+/** Content for navigation items */
+const InternalHeaderNavigationItemContent: FC<{
+    tag?: CounterTagProps;
+    counterClassName?: string;
+    icon: IconProps['svg'] | undefined;
+    iconActive?: IconProps['svg'];
+    label?: string;
+    labelClassName?: string;
+}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
+    return (
+        <Fragment>
+            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+            {!!iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
+                />
+            )}
+
+            {!!label && (
+                <span
+                    className={classNames(Styles.navigationItemLabel, labelClassName)}
+                    data-cy="nav-item-label"
+                >
+                    {label}
+                </span>
+            )}
+
+            {!!tag && (
+                <CounterTag
+                    data={tag}
+                    className={classNames(Styles.navigationItemCounter, counterClassName)}
+                    longClassName={Styles.navigationItemCounterLong}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+/** Navigation extra item with link */
+export const InternalLayoutHeaderNavigationLink: FC<
+    HeaderNavigationLinkProps & NavigationComponentProps & { isOverflow?: boolean }
+> = ({
+    id,
+    to,
+    hint,
+    tooltip,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconClassName,
+    iconName,
+    iconComponent,
+    isActive,
+    isOverflow,
+    label,
+    labelClassName,
+    tag,
+    target,
+    title,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
+    return (
+        <NavigationComponent
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...rest}
+            key={id}
+            to={to}
+            className={classNames(
+                isOverflow ? Styles.navigationLinkOverflow : Styles.navigationLink,
+                className,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                }
+            )}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+            target={target}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </NavigationComponent>
+    );
+};
+
+/** Navigation extra item with icon button */
+export const InternalLayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+    id,
+    className,
+    counter,
+    icon,
+    iconActive,
+    iconName,
+    isActive,
+    hint,
+    label,
+    labelClassName,
+    tag,
+    tooltip,
+    title,
+    titleClassName,
+    ...rest
+}) => {
+    return (
+        <div
+            data-cy={`navigation-trigger-${id}`}
+            data-pendo={`navigation-trigger-${id}`}
+            {...rest}
+            title={hint}
+            className={classNames(
+                Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
+                'cursor-pointer',
+                className
+            )}
+        >
+            <InternalHeaderNavigationItemContent
+                tag={getCounterTag(counter, tag)}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
+        </div>
+    );
+};

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

@@ -1,148 +1,29 @@
-import { Icon, IconProps } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import {
     HeaderNavigationLinkProps,
     HeaderNavigationTriggerProps,
 } from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
-import { withTooltip } from '../header-navigation/with-tooltip';
 import { useTitanLayoutContext } from './layout-context';
-import * as Styles from './layout-header.module.less';
-
-/** Content for navigation items */
-const HeaderNavigationItemContent: FC<{
-    tag?: CounterTagProps;
-    counterClassName?: string;
-    icon: IconProps['svg'] | undefined;
-    iconActive?: IconProps['svg'];
-    label?: string;
-    labelClassName?: string;
-}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
-    return (
-        <Fragment>
-            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
-            {!!iconActive && (
-                <Icon
-                    svg={iconActive}
-                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
-                />
-            )}
-
-            {!!label && (
-                <span
-                    className={classNames(Styles.navigationItemLabel, labelClassName)}
-                    data-cy="nav-item-label"
-                >
-                    {label}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
+import {
+    InternalLayoutHeaderNavigationLink,
+    InternalLayoutHeaderNavigationTrigger,
+} from './layout-header-links-internal';
+import { withTooltip } from './with-tooltip';
 
 /** Navigation extra item with link */
-export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    hint,
-    tooltip,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    title,
-    ...rest
-}) => {
+export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {
     const { NavigationComponent } = useTitanLayoutContext();
 
     return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            className={classNames(Styles.navigationLink, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconState]: !!icon && !!iconActive,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </NavigationComponent>,
+        <InternalLayoutHeaderNavigationLink {...rest} navigationComponent={NavigationComponent} />,
         tooltip
     );
 };
 
 /** Navigation extra item with icon button */
 export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconName,
-    isActive,
-    hint,
-    label,
-    labelClassName,
-    tag,
     tooltip,
-    title,
-    titleClassName,
     ...rest
 }) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
+    return withTooltip(<InternalLayoutHeaderNavigationTrigger {...rest} />, tooltip);
 };

package/src/components/titan-layout/layout-header.module.less

@@ -122,14 +122,15 @@
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     &.calculating {
-        .header-navigation {
-            opacity: 0;
+        > * {
+            opacity: 0 !important;
         }
     }
 
@@ -237,7 +238,8 @@
 }
 
 //!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
-.navigation-link {
+.navigation-link,
+.navigation-link-overflow {
     &.navigation-item-icon-state.navigation-item-active {
         .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
             display: none;
@@ -276,34 +278,34 @@
 
         border-radius: 12px;
         font-size: @size-links-tiny;
-    }
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
-        min-width: 16px !important;
-        height: 16px !important;
-        position: absolute;
-        top: 4px;
-        right: -2px;
 
-        &.navigation-item-counter-long {
-            right: -8px;
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            min-width: 16px !important;
+            height: 16px !important;
+            position: absolute;
+            top: 4px;
+            right: -2px;
+
+            &.navigation-item-counter-long {
+                right: -8px;
+            }
         }
-    }
 
-    .navigation-item-label {
-        color: inherit;
-        font-size: @typescale-1;
-        font-family: @base-font-family;
-        font-weight: @font-weight-semibold;
-        margin-left: @spacing-half;
-    }
+        .navigation-item-label {
+            color: inherit;
+            font-size: @typescale-1;
+            font-family: @base-font-family;
+            font-weight: @font-weight-semibold;
+            margin-left: @spacing-half;
+        }
 
-    .navigation-icon[data-anv][data-anv] {
-        height: 24px;
-        width: 24px;
+        .navigation-icon[data-anv][data-anv] {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     &.header-desktop {
@@ -339,7 +341,7 @@
 }
 
 .header-dark .navigation-link,
-.header-navigation > .navigation-link {
+.header-navigation .navigation-link {
     &.navigation-item-active {
         color: @color-blue-200 !important;
     }
@@ -401,47 +403,52 @@
     }
 }
 
-.header-navigation-overflow .navigation-link {
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-    cursor: pointer;
-
-    font-family: @base-font-family;
-    font-size: @typescale-4;
-    position: relative;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+.header-navigation-overflow {
+    display: flex;
+    flex-direction: column;
 
     margin-left: -0.5rem;
     margin-right: -0.5rem;
 
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue;
-    }
+    .navigation-link-overflow {
+        display: inline-flex;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        cursor: pointer;
 
-    .navigation-item-label {
         font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
+        font-size: @typescale-4;
+        position: relative;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
 
-        min-width: 12px !important;
-        height: 12px !important;
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-    .navigation-icon[data-anv][data-anv] {
-        height: 20px;
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        &.navigation-item-active:not(:hover) {
+            color: @color-blue;
+        }
+
+        .navigation-item-label {
+            font-family: @base-font-family;
+            font-size: @typescale-2;
+            margin-left: @spacing-half;
+        }
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            margin-right: @spacing-half;
+            margin-left: @spacing-half;
+
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+        .navigation-icon[data-anv][data-anv] {
+            height: 20px;
+        }
     }
 }

package/src/components/titan-layout/layout-header.module.less.d.ts

@@ -32,4 +32,5 @@ export const navigationItemCounterLong: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;
+export const navigationLinkOverflow: string;
 

package/src/components/titan-layout/titan-layout.stories.tsx

@@ -365,6 +365,20 @@ export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
 );
 
 export const TitanLayoutAnvil1Top = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil1"
+        navVariant="top"
+        top={undefined}
+        navigationOverflowItems={undefined}
+    >
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1TopOverflow = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top" top={undefined}>
         <Anvil1Page>
             <Content {...args} />

package/src/components/titan-layout/with-tooltip.tsx

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 export const withTooltip = (
     element: ReactElement,
     tooltip: string | undefined,
-    props: {
+    props?: {
         placement?: TooltipProps['placement'];
         key?: string;
     }