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

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

@@ -1,7 +1,5 @@
 import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
-import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
-import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
 import classNames from 'classnames';
 import {
     Children,
@@ -24,15 +22,13 @@ import {
 } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
 
-import { withTooltip } from './with-tooltip';
-
 export interface LayoutSidebarProps {
     className?: string;
     top?: ReactElement[];
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
-    submenuExpanded: string | undefined;
+    submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
@@ -45,7 +41,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
     mobile,
     barExpanded,
-    submenuExpanded,
+    submenusExpanded,
     drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
@@ -95,22 +91,29 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
+                                    item={item}
                                     barExpanded={mobile ? drawerOpened : barExpanded}
-                                    submenuExpanded={!!item.id && submenuExpanded === item.id}
+                                    submenuExpanded={
+                                        !!item.id && !!submenusExpanded?.includes(item.id)
+                                    }
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}
-                                    {...item}
                                 />
                             ) : (
                                 <InternalSideNavigationLink
-                                    {...item}
                                     key={item.id}
-                                    submenuExpanded={undefined}
-                                    navigationComponent={navigationComponent}
+                                    id={item.id}
+                                    to={item.to}
+                                    title={item.title}
+                                    isActive={item.isActive}
+                                    icon={item.icon}
+                                    iconActive={item.iconActive}
+                                    className={item.className}
                                     tag={getSubmenuGroupTag(
                                         item.submenu,
                                         getCounterTag(item.counter, item.tag)
                                     )}
+                                    navigationComponent={navigationComponent}
                                 />
                             )
                         )}
@@ -118,76 +121,30 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
 
                     {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}
                 </ThemeProvider>
-
-                {!mobile && (
-                    <div className={Styles.navFooter}>
-                        <div className={Styles.divider} />
-                        <div className={Styles.toggleWrapper}>
-                            <SideNavigationOptionsToggle
-                                appearance={barExpanded ? 'collapse-button' : 'expand'}
-                                onExpandedChange={() => onBarExpandChange(!barExpanded)}
-                            />
-                        </div>
-                    </div>
-                )}
             </div>
         </LayoutPlacementContext.Provider>
     );
 };
 LayoutSidebar.displayName = 'LayoutSidebar';
 
-/** Side Navigation options toggle */
-const SideNavigationOptionsToggle: FC<{
-    appearance: 'expand' | 'collapse' | 'collapse-button';
-    onExpandedChange?(expanded: boolean): void;
-}> = ({ appearance, onExpandedChange }) =>
-    withTooltip(
-        <div
-            data-cy="navigation-left-options"
-            data-pendo="navigation-left-options"
-            className={classNames(Styles.toggle)}
-            onClick={() => onExpandedChange?.(appearance === 'expand')}
-        >
-            <div className={Styles.toggleContent}>
-                <div className={Styles.toggleIconWrapper}>
-                    <Icon
-                        className={Styles.toggleIcon}
-                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
-                    />
-                </div>
-
-                {appearance === 'collapse-button' && (
-                    <span className={Styles.toggleText}>Collapse Menu</span>
-                )}
-            </div>
-        </div>,
-        appearance === 'expand'
-            ? 'Expand Menu'
-            : appearance === 'collapse'
-              ? 'Collapse Menu'
-              : undefined,
-        { placement: 'right' }
-    );
-
 /** Side Navigation menu item */
-const SideNavigationGroupItem: FC<
-    NavigationItemData & {
-        navigationComponent: FC<NavLinkComponentProps>;
-        barExpanded: boolean;
-        submenuExpanded: boolean;
-        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
-    }
-> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+const SideNavigationGroupItem: FC<{
+    item: NavigationItemData;
+    navigationComponent: FC<NavLinkComponentProps>;
+    barExpanded: boolean;
+    submenuExpanded: boolean;
+    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {
     const onExpandToggle = useCallback(
         (e: MouseEvent<never>) => {
             e.preventDefault();
             e.stopPropagation();
 
-            if (props.id) {
-                onSubmenuExpand?.(props.id, !submenuExpanded);
+            if (item.id) {
+                onSubmenuExpand?.(item.id, !submenuExpanded);
             }
         },
-        [props.id, submenuExpanded, onSubmenuExpand]
+        [item.id, submenuExpanded, onSubmenuExpand]
     );
     const {
         sidebar: {
@@ -195,19 +152,26 @@ const SideNavigationGroupItem: FC<
         },
     } = useTitanLayoutContext();
 
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
+    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
 
     return barExpanded ? (
         <InternalSideNavigationGroup
-            {...props}
+            id={item.id}
+            to={item.to}
+            title={item.title}
+            isActive={item.isActive}
+            icon={item.icon}
+            iconActive={item.iconActive}
+            className={item.className}
+            tag={tag}
             submenuExpanded={submenuExpanded}
             onExpandToggle={onExpandToggle}
-            tag={tag}
+            navigationComponent={navigationComponent}
         >
             <SideNavigationGroupContent
-                parentId={props.id}
-                groups={props.submenu?.groups ?? []}
-                navigationComponent={props.navigationComponent}
+                parentId={item.id}
+                groups={item.submenu?.groups ?? []}
+                navigationComponent={navigationComponent}
             />
         </InternalSideNavigationGroup>
     ) : (
@@ -216,9 +180,15 @@ const SideNavigationGroupItem: FC<
                 {(triggerProps: any) => (
                     <div {...triggerProps}>
                         <InternalSideNavigationLink
-                            {...props}
-                            submenuExpanded={undefined}
+                            id={item.id}
+                            to={item.to}
+                            title={item.title}
+                            isActive={item.isActive}
+                            icon={item.icon}
+                            iconActive={item.iconActive}
+                            className={item.className}
                             tag={tag}
+                            navigationComponent={navigationComponent}
                         />
                     </div>
                 )}
@@ -231,12 +201,12 @@ const SideNavigationGroupItem: FC<
                         size="small"
                         className="c-white m-b-half-i m-t-1"
                     >
-                        {props.title}
+                        {item.title}
                     </Text>
                     <SideNavigationGroupContent
-                        parentId={props.id}
-                        groups={props.submenu?.groups ?? []}
-                        navigationComponent={props.navigationComponent}
+                        parentId={item.id}
+                        groups={item.submenu?.groups ?? []}
+                        navigationComponent={navigationComponent}
                     />
                 </div>
             </Popover.Content>
@@ -270,7 +240,12 @@ const SideNavigationGroupContent: FC<
                     ...group.links.map((link, index) => (
                         <InternalSideNavigationGroupLink
                             key={`:${parentId}:${link.id}:${index}`}
-                            {...link}
+                            id={link.id}
+                            to={link.to}
+                            title={link.title}
+                            isActive={link.isActive}
+                            className={undefined}
+                            tag={getCounterTag(link.counter, link.tag)}
                             parentId={parentId}
                             navigationComponent={navigationComponent}
                         />

package/src/components/titan-layout/{titan-layout.stories.tsx → titan-layout-default.stories.tsx}

@@ -6,7 +6,7 @@ import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inac
 import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
 import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
 import { Page as Anvil1Page } from '@servicetitan/design-system';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
     CallsNavigationTrigger,
     LocationInfo,
@@ -16,6 +16,12 @@ import {
     withDefaultRedirects,
     withMemoryRouter,
 } from '../../test/data';
+import {
+    LayoutContentArgs,
+    getDefaultArgs,
+    useDefaultLayoutProps,
+    withDefaultLayoutProps,
+} from '../../test/titan-layout';
 import {
     ProfileDropdown,
     TitanLayout,
@@ -24,32 +30,17 @@ import {
     TitanLayoutState,
 } from './';
 
-interface LayoutContentArgs {
-    header: boolean;
-    sideTop: boolean;
-    extraText: boolean;
-    search: boolean;
-    longContent: boolean;
-    wideContent: boolean;
-    minWidth: boolean;
-    emptyNav: boolean;
-}
-
 export default {
-    title: 'Navigation/TitanLayout',
-    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    title: 'Navigation/TitanLayout/Default',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'left' }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
     parameters: {},
     argTypes: {},
-    args: {
-        header: true,
-        sideTop: true,
-        extraText: true,
-        search: true,
-        longContent: true,
-        wideContent: false,
-        minWidth: false,
-        emptyNav: false,
-    } as LayoutContentArgs,
+    args: getDefaultArgs(),
 };
 
 const mainNavItems = [
@@ -60,8 +51,8 @@ const mainNavItems = [
     navItems.dispatch,
 
     navItems.fleet,
-    navItems.followUps,
-    navItems.inventory,
+    navItems.followUpsWithSubmenu,
+    navItems.purchasingWithSubmenu,
 
     navItems.marketing,
     navItems.priceBook,
@@ -105,6 +96,15 @@ const profile = (
     </ProfileDropdown>
 );
 
+const profileEmpty = (
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="sign-out" to="/sign-out">
+            sign out
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);
+
 const extraLinks = (
     <Fragment>
         <TitanLayout.Link
@@ -205,7 +205,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 
         navigationComponent: NavLinkMock,
         navigationMainItems: args.emptyNav ? [] : mainNavItems,
-        navigationOverflowItems: args.emptyNav ? [] : overflowNavItems,
+        navigationOverflowItems: args.emptyNav || !args.overflowItems ? [] : overflowNavItems,
 
         profile,
         top: args.search ? <SearchBar /> : undefined,
@@ -224,10 +224,15 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 };
 
 const Content = (args: LayoutContentArgs) => {
+    const [info, setInfo] = useState('');
+    useEffect(() => {
+        setInfo(new Date().toLocaleTimeString());
+    }, []);
     return (
         <Fragment>
             <LocationInfo className="m-b-3" />
-            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
+            <div className="m-b-3">component rendered - {info}</div>
+            <div className="m-b-3">rerendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -316,30 +321,8 @@ const Content = (args: LayoutContentArgs) => {
     );
 };
 
-export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
-        <div
-            className="p-3"
-            style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
-        >
-            <Content {...args} />
-        </div>
-    </TitanLayout>
-);
-
-export const TitanLayoutLegacyTopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy" navVariant="top">
-        <div
-            className="p-3"
-            style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
-        >
-            <Content {...args} />
-        </div>
-    </TitanLayout>
-);
-
-export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="legacy" navVariant="top" top={undefined}>
+export const ContentLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy" {...useDefaultLayoutProps()}>
         <div
             className="p-3"
             style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
@@ -349,46 +332,43 @@ export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
+export const ContentAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" {...useDefaultLayoutProps()}>
         <Anvil1Page>
             <Content {...args} />
         </Anvil1Page>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top">
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
+export const ContentAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" {...useDefaultLayoutProps()}>
+        <Anvil2Page>
+            <Anvil2Page.Content>
+                <Content {...args} />
+            </Anvil2Page.Content>
+        </Anvil2Page>
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil1Top = (args: LayoutContentArgs) => (
+export const ExtraWithTitle = (args: LayoutContentArgs) => (
     <TitanLayout
         {...useLayoutProps(args)}
-        appearance="anvil1"
-        navVariant="top"
-        top={undefined}
-        navigationOverflowItems={undefined}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ showTitle: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
     >
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
-    </TitanLayout>
-);
-
-export const TitanLayoutAnvil1TopOverflow = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top" top={undefined}>
-        <Anvil1Page>
-            <Content {...args} />
-        </Anvil1Page>
-    </TitanLayout>
-);
-
-export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />
@@ -397,8 +377,26 @@ export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2TopNav = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top">
+export const ExtraWithFlashing = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ flashing: true }}
+                side={{ counter: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
+    >
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />
@@ -407,8 +405,26 @@ export const TitanLayoutAnvil2TopNav = (args: LayoutContentArgs) => (
     </TitanLayout>
 );
 
-export const TitanLayoutAnvil2Top = (args: LayoutContentArgs) => (
-    <TitanLayout {...useLayoutProps(args)} appearance="anvil2" navVariant="top" top={undefined}>
+export const ExtraWithTitleFlashing = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil2"
+        profile={profileEmpty}
+        sideTop={undefined}
+        navigationMainItems={[navItems.projects]}
+        extraLinks={
+            <TitanLayout.Link
+                id="search"
+                to="/search"
+                title="Search"
+                icon={SvgSearch}
+                iconActive={SvgSearch}
+                extra={{ showTitle: true, flashing: true }}
+                side={{ counter: true }}
+            />
+        }
+        {...useDefaultLayoutProps()}
+    >
         <Anvil2Page>
             <Anvil2Page.Content>
                 <Content {...args} />

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

@@ -0,0 +1,24 @@
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { getDefaultArgs, withDefaultLayoutProps } from '../../test/titan-layout';
+
+export default {
+    title: 'Navigation/TitanLayout/Legacy',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'top', top: undefined }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
+    parameters: {},
+    argTypes: {},
+    args: getDefaultArgs(),
+};
+
+export {
+    ContentLegacy,
+    ContentAnvil1,
+    ContentAnvil2,
+    ExtraWithTitle,
+    ExtraWithFlashing,
+    ExtraWithTitleFlashing,
+} from './titan-layout-default.stories';

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

@@ -0,0 +1,30 @@
+import { TextField } from '@servicetitan/anvil2';
+
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { getDefaultArgs, withDefaultLayoutProps } from '../../test/titan-layout';
+
+const SearchBar = () => (
+    <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
+);
+
+export default {
+    title: 'Navigation/TitanLayout/Stacked',
+    decorators: [
+        withDefaultLayoutProps({ navVariant: 'top', top: <SearchBar /> }),
+        withDefaultRedirects,
+        withMemoryRouter,
+        withAnvil,
+    ],
+    parameters: {},
+    argTypes: {},
+    args: getDefaultArgs(),
+};
+
+export {
+    ContentLegacy,
+    ContentAnvil1,
+    ContentAnvil2,
+    ExtraWithTitle,
+    ExtraWithFlashing,
+    ExtraWithTitleFlashing,
+} from './titan-layout-default.stories';

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

@@ -93,7 +93,7 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
-const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+function TitanLayoutComponent({
     appearance = 'anvil2',
     navVariant = 'left',
     id,
@@ -113,7 +113,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     extraText,
     minContentWidth,
     sideTop,
-}) => {
+}: TitanLayoutProps) {
     const breakpoint = useTitanBreakpoint();
     const context: TitanLayoutContextType = useMemo(
         () => ({
@@ -149,10 +149,18 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent<never>) => {
-        setMobileDrawerOpened(true);
-        e.stopPropagation();
-    }, []);
+    const onBurgerClick = useCallback(
+        (e: MouseEvent<never>) => {
+            if (isMobile) {
+                setMobileDrawerOpened(true);
+            } else {
+                onStateChange?.({ navCollapsed: !state?.navCollapsed });
+            }
+
+            e.stopPropagation();
+        },
+        [isMobile, state?.navCollapsed, onStateChange]
+    );
 
     const onBarExpandChange = useCallback(
         (expanded: boolean) => {
@@ -168,7 +176,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         (id: string, expanded: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
-                submenuExpanded: expanded ? id : undefined,
+                submenusExpanded: [
+                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(expanded ? [id] : []),
+                ],
             });
         },
         [state, onStateChange]
@@ -272,7 +283,17 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                hasNotifications={
+                                    isMobile && (hasNotifications || hasMenuNotifications)
+                                }
+                                hasBurger={hasSideBar}
+                                burgerTooltip={
+                                    isMobile
+                                        ? undefined
+                                        : state?.navCollapsed
+                                          ? 'Expand'
+                                          : 'Collapse'
+                                }
                                 onBurgerClick={onBurgerClick}
                             />
                         ) : (
@@ -291,6 +312,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 isMobile={isMobile}
                                 hasNotifications={hasNotifications || hasMenuNotifications}
                                 onBurgerClick={onBurgerClick}
+                                hasBurger={isMobile}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />
@@ -303,7 +325,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                 mobile={breakpoint.isMobile}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
-                                submenuExpanded={state?.submenuExpanded}
+                                submenusExpanded={state?.submenusExpanded}
                                 onSubmenuExpandChange={onSubmenuExpandChange}
                                 drawerOpened={mobileDrawerOpened}
                                 onDrawerOpenChange={setMobileDrawerOpened}
@@ -319,10 +341,11 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                                 <InternalSideNavigationTrigger
                                                     id="--extra-text"
                                                     title={extraText}
-                                                    submenuExpanded={undefined}
-                                                    tag={undefined}
+                                                    isActive={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}
+                                                    tag={undefined}
+                                                    className={undefined}
                                                 />
                                             )}
                                         </Fragment>
@@ -352,7 +375,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
             </LayoutPlacementContext.Provider>
         </LayoutContext.Provider>
     );
-};
+}
 
 const TitanLayoutHeaderObserved: FC<{
     children: ReactNode;

package/src/index.ts

@@ -5,5 +5,4 @@ export * from './components/counter-tag';
 export * from './components/titan-layout';
 export type * from './utils/navigation';
 export type { NavLinkComponentProps } from './utils/navigation-context';
-export type * from './utils/navigation-legacy';
 export * from './utils/use-breakpoint';