@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.b43c6d7.0

package/dist/utils/navigation-context.d.ts

@@ -1,27 +1,8 @@
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { NavigationLinkData } from './navigation';
-export interface NavLinkComponentPropsStrict {
+import { ComponentPropsWithoutRef, FC } from 'react';
+export type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {
     to: string;
-    title?: string;
-    className?: string;
     activeClassName?: string;
-    children: ReactNode;
     isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
+};
 export declare const DefaultNavLinkComponent: FC<NavLinkComponentProps>;
-export interface NavigationLocationInfo {
-    pathname: string;
-}
-export type NavigationActiveLinkMatcher = (location: NavigationLocationInfo, link: NavigationLinkData) => boolean;
-export interface NavigationLocationContextType {
-    location: NavigationLocationInfo;
-    isLinkActive: NavigationActiveLinkMatcher;
-}
-export declare const NavigationComponentContext: import("react").Context<FC<NavLinkComponentProps>>;
-export declare const NavigationLegacyContext: import("react").Context<boolean>;
-export declare const NavigationLocationContext: import("react").Context<NavigationLocationContextType>;
 //# sourceMappingURL=navigation-context.d.ts.map

package/dist/utils/navigation-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,2BAA2B;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,2BAA2B;IACtE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK5B,CAAC;AAEnC,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,2BAA2B,GAAG,CACtC,QAAQ,EAAE,sBAAsB,EAChC,IAAI,EAAE,kBAAkB,KACvB,OAAO,CAAC;AAEb,MAAM,WAAW,6BAA6B;IAC1C,QAAQ,EAAE,sBAAsB,CAAC;IACjC,YAAY,EAAE,2BAA2B,CAAC;CAC7C;AAED,eAAO,MAAM,0BAA0B,oDAC8B,CAAC;AACtE,eAAO,MAAM,uBAAuB,kCAAuB,CAAC;AAC5D,eAAO,MAAM,yBAAyB,wDAGpC,CAAC"}
+{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,GAAG,CAAC,GAAG;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAU7D,CAAC"}

package/dist/utils/navigation-context.js

@@ -1,16 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext } from 'react';
-export const DefaultNavLinkComponent = ({ children, activeClassName, isActive, ...props })=>/*#__PURE__*/ _jsx("a", {
+export const DefaultNavLinkComponent = ({ children, to, activeClassName, isActive, ...props })=>/*#__PURE__*/ _jsx("a", {
+        href: to,
         ...props,
         children: children
     });
-export const NavigationComponentContext = /*#__PURE__*/ createContext(DefaultNavLinkComponent);
-export const NavigationLegacyContext = /*#__PURE__*/ createContext(false);
-export const NavigationLocationContext = /*#__PURE__*/ createContext({
-    location: {
-        pathname: ''
-    },
-    isLinkActive: ()=>false
-});
 
 //# sourceMappingURL=navigation-context.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/navigation-context.tsx"],"sourcesContent":["import { FC, HTMLAttributeAnchorTarget, ReactNode, createContext } from 'react';\nimport { NavigationLinkData } from './navigation';\n\nexport interface NavLinkComponentPropsStrict {\n    to: string;\n    title?: string;\n    className?: string;\n    activeClassName?: string;\n    children: ReactNode;\n    isActive?: (pathname: string) => boolean;\n    target?: HTMLAttributeAnchorTarget;\n}\n\nexport interface NavLinkComponentProps extends NavLinkComponentPropsStrict {\n    [key: string]: any;\n}\n\nexport const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({\n    children,\n    activeClassName,\n    isActive,\n    ...props\n}) => <a {...props}>{children}</a>;\n\nexport interface NavigationLocationInfo {\n    pathname: string;\n}\n\nexport type NavigationActiveLinkMatcher = (\n    location: NavigationLocationInfo,\n    link: NavigationLinkData\n) => boolean;\n\nexport interface NavigationLocationContextType {\n    location: NavigationLocationInfo;\n    isLinkActive: NavigationActiveLinkMatcher;\n}\n\nexport const NavigationComponentContext =\n    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);\nexport const NavigationLegacyContext = createContext(false);\nexport const NavigationLocationContext = createContext<NavigationLocationContextType>({\n    location: { pathname: '' },\n    isLinkActive: () => false,\n});\n"],"names":["createContext","DefaultNavLinkComponent","children","activeClassName","isActive","props","a","NavigationComponentContext","NavigationLegacyContext","NavigationLocationContext","location","pathname","isLinkActive"],"mappings":";AAAA,SAAmDA,aAAa,QAAQ,QAAQ;AAiBhF,OAAO,MAAMC,0BAAqD,CAAC,EAC/DC,QAAQ,EACRC,eAAe,EACfC,QAAQ,EACR,GAAGC,OACN,iBAAK,KAACC;QAAG,GAAGD,KAAK;kBAAGH;OAAc;AAgBnC,OAAO,MAAMK,2CACTP,cAAyCC,yBAAyB;AACtE,OAAO,MAAMO,wCAA0BR,cAAc,OAAO;AAC5D,OAAO,MAAMS,0CAA4BT,cAA6C;IAClFU,UAAU;QAAEC,UAAU;IAAG;IACzBC,cAAc,IAAM;AACxB,GAAG"}
+{"version":3,"sources":["../../src/utils/navigation-context.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, FC } from 'react';\n\nexport type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {\n    to: string;\n    activeClassName?: string;\n    isActive?: (pathname: string) => boolean;\n};\n\nexport const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({\n    children,\n    to,\n    activeClassName,\n    isActive,\n    ...props\n}) => (\n    <a href={to} {...props}>\n        {children}\n    </a>\n);\n"],"names":["DefaultNavLinkComponent","children","to","activeClassName","isActive","props","a","href"],"mappings":";AAQA,OAAO,MAAMA,0BAAqD,CAAC,EAC/DC,QAAQ,EACRC,EAAE,EACFC,eAAe,EACfC,QAAQ,EACR,GAAGC,OACN,iBACG,KAACC;QAAEC,MAAML;QAAK,GAAGG,KAAK;kBACjBJ;OAEP"}

package/dist/utils/navigation.d.ts

@@ -1,17 +1,12 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { FC } from 'react';
 import { CounterTagData, CounterTagValue } from './counter-tag';
 export interface NavigationItemData extends NavigationLinkData {
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
-    /** custom className (can be used for mdi icons) */
-    iconClassName?: string;
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
     /** svg icon (anvil2) of active item */
     iconActive: IconProps['svg'] | undefined;
-    /** icon component of item (<svg />) */
-    iconComponent?: FC;
     /** item tag (optional). shown if it is set and true or greater than 0 */
     counter?: CounterTagValue;
     tag?: CounterTagData;
@@ -19,6 +14,8 @@ export interface NavigationItemData extends NavigationLinkData {
     className?: string;
     /** optional submenu of link item */
     submenu?: NavigationSubmenuData;
+    iconClassName?: never;
+    iconComponent?: never;
 }
 export interface NavigationLinkData {
     /** link id */

package/dist/utils/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}

package/dist/utils/navigation.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\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    /** 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    /** 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    iconClassName?: never;\n    iconComponent?: never;\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":"AAoDA,WAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.3",
+    "version": "13.0.0-canary.256.b43c6d7.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "c4d3e8b44fbf7d1fc7849c475ddeb32547bcac8b"
+    "gitHead": "b43c6d785de8f5055e173ac84493359f502dc296"
 }

package/src/components/profile-dropdown/{profile-dropdown-tiny.stories.tsx → profile-dropdown-legacy.stories.tsx}

@@ -1,16 +1,16 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationTiny } from '../left-navigation';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
 import { ProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigationTiny = (Story: any) => (
-    <HeaderNavigationTiny className="border" right={<Story />} />
+const withLayout = (Story: any) => (
+    <TitanLayout navVariant="top" profile={<Story />} navigationComponent={NavLinkMock} />
 );
 
 export default {
-    title: 'Navigation/ProfileDropdown/Tiny',
+    title: 'Navigation/ProfileDropdown/Legacy',
     component: ProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
+    decorators: [withMemoryRouter, withAnvil, withLayout],
 };
 
 export {

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

@@ -1,14 +1,22 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationStacked } from '../header-navigation';
+import { NavLinkMock, navItems, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
 import { ProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
+const withStackedLayout = (Story: any) => (
+    <TitanLayout
+        navVariant="top"
+        top={<div />}
+        profile={<Story />}
+        navigationMainItems={[navItems.accounting]}
+        navigationComponent={NavLinkMock}
+    />
+);
 
 export default {
     title: 'Navigation/ProfileDropdown/Stacked',
     component: ProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
+    decorators: [withStackedLayout, withMemoryRouter, withAnvil],
 };
 
 export {

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

@@ -1,24 +1,22 @@
 import { Button } from '@servicetitan/design-system';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigation } from '../header-navigation';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
 import { ProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation>
-        <Story />
-    </HeaderNavigation>
+const withLegacyLayout = (Story: any) => (
+    <TitanLayout navigationComponent={NavLinkMock} profile={<Story />} />
 );
 
 export default {
-    title: 'Navigation/ProfileDropdown/Legacy',
+    title: 'Navigation/ProfileDropdown/Default',
     component: ProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
+    decorators: [withLegacyLayout, withMemoryRouter, withAnvil],
 };
 
 export const ProfileDropdownDefault = () => (
     <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <ProfileDropdown.Link id="first" to="https://google.com" external>
             first link
         </ProfileDropdown.Link>
         <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
@@ -33,6 +31,15 @@ export const ProfileDropdownDefault = () => (
             third link
         </ProfileDropdown.Link>
         <ProfileDropdown.Divider />
+        <ProfileDropdown.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
     </ProfileDropdown>
 );
 

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

@@ -13,22 +13,17 @@ import {
     MouseEventHandler,
     ReactNode,
     useCallback,
-    useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 
 import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
-import {
-    NavigationComponentContext,
-    NavigationLegacyContext,
-} from '../../utils/navigation-context';
 import { getCounterTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import { useTitanLayoutContext } from '../titan-layout';
 import { withTooltip } from '../titan-layout/with-tooltip';
 import * as Styles from './profile-dropdown.module.less';
-import { ProfileLogo } from './profile-icon';
 
 export interface ProfileDropdownTriggerProps {
     className?: string;
@@ -53,7 +48,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
-    const isLegacy = useContext(NavigationLegacyContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -78,7 +72,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 Styles.triggerContainer,
                 {
                     [Styles.triggerContainerHintArrow]: hintArrow,
-                    [Styles.triggerContainerLegacy]: isLegacy,
                 },
                 className
             )}
@@ -93,8 +86,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
-            ) : isLegacy ? (
-                <ProfileLogo />
             ) : (
                 <Icon
                     className="c-inherit-i"
@@ -255,7 +246,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     onClick,
     ...rest
 }: ProfileDropdownLinkProps) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
+    const { NavigationComponent } = useTitanLayoutContext();
 
     const isExternalLink = external ?? to?.startsWith('http');
 

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

@@ -1,26 +1,30 @@
-import { FC, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
 import { TitanLayoutSidebarContextType } from './layout-context';
 
-export interface TitanLayoutSidebarLinkWrapperProps {
-    children:
-        | ReactElement<TitanLayoutSidebarLinkProps>
-        | ReactElement<TitanLayoutSidebarTriggerProps>;
+export interface TitanLayoutLinkWrapperProps {
+    children: ReactNode;
     context: TitanLayoutSidebarContextType;
+    isMobile: boolean;
 }
 
-export interface TitanLayoutSidebarLinkProps extends Omit<NavigationItemData, 'submenu'> {
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-}
-export interface TitanLayoutSidebarTriggerProps
-    extends Omit<TitanLayoutSidebarLinkProps, 'to' | 'isActive'> {
-    isActive?: boolean;
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-    onClick?: () => void;
-    onMobileClick?: () => void;
-}
+export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
 
 export interface TitanLayoutState {
     navCollapsed: boolean;
     submenuExpanded?: string;
 }
+
+export type TitanLayoutLinkProps = Omit<NavigationItemData, 'submenu' | 'isHidden'> & {
+    tooltip?: string;
+    wrapper?: TitanLayoutLinkWrapper;
+} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;
+
+export type TitanLayoutTriggerProps = Omit<
+    NavigationItemData,
+    'to' | 'isActive' | 'isHidden' | 'submenu'
+> & {
+    isActive?: boolean;
+    tooltip?: string;
+    wrapper?: TitanLayoutLinkWrapper;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;

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

@@ -1,8 +1,5 @@
 import { FC } from 'react';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { useTitanLayoutContext } from './layout-context';
 import {
     InternalLayoutHeaderNavigationLink,
@@ -11,7 +8,7 @@ import {
 import { withTooltip } from './with-tooltip';
 
 /** Navigation extra item with link */
-export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tooltip, ...rest }) => {
+export const LayoutHeaderNavigationLink: FC<TitanLayoutLinkProps> = ({ tooltip, ...rest }) => {
     const { NavigationComponent } = useTitanLayoutContext();
 
     return withTooltip(
@@ -21,7 +18,7 @@ export const LayoutHeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({ tool
 };
 
 /** Navigation extra item with icon button */
-export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
+export const LayoutHeaderNavigationTrigger: FC<TitanLayoutTriggerProps> = ({
     tooltip,
     ...rest
 }) => {

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

@@ -1,6 +1,6 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
-import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';
 import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
@@ -22,7 +22,7 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     isMobile: boolean;
     variant: 'light' | 'dark';
     hasNotifications: boolean;
-    onBurgerClick?: (e: MouseEvent) => void;
+    onBurgerClick?: (e: MouseEvent<never>) => void;
 };
 
 export const LayoutHeader: FC<LayoutHeaderProps> = ({

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

@@ -2,7 +2,7 @@ import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
 
 import { FC, MouseEvent, useEffect, useState } from 'react';
-import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
 import {
     ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
@@ -38,13 +38,9 @@ const ExternalNavComponent: FC<NavLinkComponentProps> = ({
 );
 
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
-    const { isTitanLayout, breakpoint, NavigationComponent } = useTitanLayoutContext();
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
         <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
-    ) : isTitanLayout ? (
-        <NavigationComponentContext.Provider value={NavigationComponent}>
-            <DesktopProfileDropdown {...props} />
-        </NavigationComponentContext.Provider>
     ) : (
         <DesktopProfileDropdown {...props} />
     );

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

@@ -7,22 +7,22 @@ import { FC, Fragment, MouseEvent, ReactNode } from 'react';
 import { NavigationItemData, NavigationSubmenuItemData } from '../../utils/navigation';
 import { getCounterTag } from '../../utils/side-nav';
 import { BadgeTag, BadgeTagProps } from '../badge-tag';
-import { TitanLayoutSidebarTriggerProps } from './interface';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { NavigationComponentProps } from './interface-internal';
 import * as Styles from './layout-sidebar.module.less';
 
-export interface InternalSideNavigationItemContentProps
-    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
+export interface InternalSideNavigationItemContentProps {
+    icon: TitanLayoutLinkProps['icon'];
+    iconActive: TitanLayoutLinkProps['iconActive'];
+    title: TitanLayoutLinkProps['title'];
     submenuExpanded: boolean | undefined;
     tag: BadgeTagProps | undefined;
     onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
-export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
+const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
     icon,
     iconActive,
-    iconClassName,
-    iconComponent: IconComponent,
     tag,
     title,
     submenuExpanded,
@@ -30,33 +30,14 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
 }) => (
     <Fragment>
         <div className={Styles.navItemIconWrapper}>
-            {IconComponent ? (
-                <i className={classNames(Styles.navIcon, iconClassName)}>
-                    <IconComponent />
-                </i>
-            ) : (
-                <Fragment>
-                    {icon && (
-                        <Icon
-                            svg={icon}
-                            className={classNames(
-                                Styles.navIcon,
-                                Styles.navIconInactive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                    {iconActive && (
-                        <Icon
-                            svg={iconActive}
-                            className={classNames(
-                                Styles.navIcon,
-                                Styles.navIconActive,
-                                iconClassName
-                            )}
-                        />
-                    )}
-                </Fragment>
+            {icon && (
+                <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />
+            )}
+            {iconActive && (
+                <Icon
+                    svg={iconActive}
+                    className={classNames(Styles.navIcon, Styles.navIconActive)}
+                />
             )}
 
             <div className={Styles.navItemTextExpanded} data-cy="nav-item-label">
@@ -95,93 +76,98 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
         </div>
     </Fragment>
 );
-
-export interface InternalSideNavigationLinkProps
-    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
-        NavigationComponentProps {
+interface InternalLinkProps {
     submenuExpanded: boolean | undefined;
-    dataPrefix?: string;
     tag: BadgeTagProps | undefined;
     onExpandToggle?: (e: MouseEvent<never>) => void;
 }
 
-export const internalNavigationContentContainerProps = ({
-    className,
-    icon,
-    iconActive,
-    iconComponent,
-    id,
-    isActive,
-    prefix,
-    isLink,
-}: Omit<TitanLayoutSidebarTriggerProps, 'isActive' | 'tag'> & {
-    prefix: string;
-    isActive?: any;
-    isLink: boolean;
-}) => ({
-    'data-cy': `${prefix}-${id}`,
-    'data-pendo': `${prefix}-${id}`,
-    'className': classNames(Styles.navItem, className, {
-        [Styles.navLink]: isLink,
-        [Styles.navItemActive]: isActive === true,
-        [Styles.navItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
-    }),
-});
+export type InternalSideNavigationLinkProps = Omit<
+    TitanLayoutLinkProps,
+    'wrapper' | 'counter' | 'tag'
+> &
+    NavigationComponentProps &
+    InternalLinkProps;
 
 /** Side Navigation menu item (for internal usage) */
 export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({
+    id,
     to,
     className,
-    dataPrefix,
+    icon,
+    iconActive,
     isActive,
     navigationComponent: NavigationComponent,
+    tag,
+    title,
     submenuExpanded,
     onExpandToggle,
     ...props
 }) => {
     return (
         <NavigationComponent
-            {...internalNavigationContentContainerProps({
-                ...props,
-                prefix: dataPrefix ?? 'navigation-item',
-                className,
-                isActive,
-                isLink: true,
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...props}
+            className={classNames(Styles.navItem, Styles.navLink, className, {
+                [Styles.navItemActive]: isActive === true,
+                [Styles.navItemIconSwitch]: !!icon && !!iconActive,
             })}
             to={to}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navItemActive}
         >
             <InternalSideNavigationItemContent
+                icon={icon}
+                iconActive={iconActive}
                 submenuExpanded={submenuExpanded}
                 onExpandToggle={onExpandToggle}
-                {...props}
+                title={title}
+                tag={tag}
             />
         </NavigationComponent>
     );
 };
 
+export type InternalSideNavigationTriggerProps = Omit<
+    TitanLayoutTriggerProps,
+    'wrapper' | 'counter' | 'tag'
+> &
+    InternalLinkProps;
+
 /** Side Navigation menu trigger (for internal usage) */
-export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
-        onClick?: (e: MouseEvent<never>) => void;
-    }
-> = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
+export const InternalSideNavigationTrigger: FC<InternalSideNavigationTriggerProps> = ({
+    className,
+    icon,
+    iconActive,
+    id,
+    isActive,
+    submenuExpanded,
+    onExpandToggle,
+    onClick,
+    title,
+    tag,
+    ...props
+}) => {
     return (
         <div
-            {...internalNavigationContentContainerProps({
-                ...props,
-                prefix: dataPrefix ?? 'navigation-item',
-                className,
-                isActive,
-                isLink: !!onClick,
+            data-cy={`navigation-item-${id}`}
+            data-pendo={`navigation-item-${id}`}
+            {...props}
+            className={classNames(Styles.navItem, className, {
+                [Styles.navLink]: !!onClick,
+                [Styles.navItemActive]: isActive === true,
+                [Styles.navItemIconSwitch]: !!icon && !!iconActive,
             })}
             onClick={onClick}
         >
             <InternalSideNavigationItemContent
                 submenuExpanded={submenuExpanded}
                 onExpandToggle={onExpandToggle}
-                {...props}
+                icon={icon}
+                iconActive={iconActive}
+                title={title}
+                tag={tag}
             />
         </div>
     );
@@ -254,13 +240,14 @@ export const InternalSideNavigationGroup: FC<
             to: NavigationItemData['to'] | undefined;
             onClick?: (e: MouseEvent<never>) => void;
         }
-> = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
+> = ({ children, submenuExpanded, to, onExpandToggle, onClick, isActive, ...props }) => {
     return (
         <div className={classNames(Styles.navGroupWrapper)}>
             <div className={Styles.navGroupItem}>
                 {to ? (
                     <InternalSideNavigationLink
                         {...props}
+                        isActive={isActive}
                         to={to}
                         submenuExpanded={submenuExpanded}
                         onExpandToggle={onExpandToggle}
@@ -268,6 +255,7 @@ export const InternalSideNavigationGroup: FC<
                 ) : (
                     <InternalSideNavigationTrigger
                         {...props}
+                        isActive={isActive === true || undefined}
                         submenuExpanded={submenuExpanded}
                         onExpandToggle={onExpandToggle}
                         onClick={onClick}