@servicetitan/navigation 3.3.0 → 4.1.0

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

@@ -1,157 +1,134 @@
 import { Button } from '@servicetitan/design-system';
-import { FC } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { withAnvil, withMemoryRouter } from '../../test/data.stories';
 import { HeaderNavigation } from '../header-navigation';
 import { ProfileDropdown } from './profile-dropdown';
 
+const withHeaderNavigation = (Story: any) => (
+    <HeaderNavigation>
+        <Story />
+    </HeaderNavigation>
+);
+
 export default {
     title: 'Navigation/ProfileDropdown',
     component: ProfileDropdown,
     parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
 };
 
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
-
-export const profileDropdownDefault = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown>
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                second link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Link id="third" to="https://google.com">
-                third link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownDefault = () => (
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+            second link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Link id="third" to="third">
+            third link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithLogo = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
-            }}
-        >
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first link
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
-                second link
-            </ProfileDropdown.Link>
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownWithLogo = () => (
+    <ProfileDropdown
+        trigger={{
+            imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
+        }}
+    >
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Link id="second" onClick={() => alert('second click')}>
+            second link
+        </ProfileDropdown.Link>
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithErrorLogo = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                imageSrc: 'https://some.incorrect.url/logo.png',
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithErrorLogo = () => (
+    <ProfileDropdown
+        trigger={{
+            imageSrc: 'https://some.incorrect.url/logo.png',
+        }}
+    />
 );
 
-export const profileDropdownWithInfo = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                info: { text: 'first', title: 'tenant user' },
-                avatarBadge: true,
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithInfo = () => (
+    <ProfileDropdown
+        trigger={{
+            info: { text: 'first', title: 'tenant user' },
+            avatarBadge: true,
+        }}
+    />
 );
 
-export const profileDropdownWithCounter = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                info: { text: 'first', title: 'tenant user' },
-                avatarBadge: true,
-                badge: { content: 3, className: 'bg-red-500' },
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithCounter = () => (
+    <ProfileDropdown
+        trigger={{
+            info: { text: 'first', title: 'tenant user' },
+            avatarBadge: true,
+            badge: { content: 3, className: 'bg-red-500' },
+        }}
+    />
 );
 
-export const profileDropdownWithBothBadges = () => (
-    <HeaderNavigation>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithBothBadges = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+        }}
+    />
 );
 
 // eslint-disable-next-line no-console
 const log = (text: string) => console.log(text);
 
-export const profileDropdownWithHintPopup = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-            }}
-            hintPopup={{
-                className: 'bg-blue-500-i c-white',
-                content: ({ openProfile }) => (
-                    <div>
-                        hello{' '}
-                        <Button onClick={openProfile} size="xsmall">
-                            show me
-                        </Button>
-                    </div>
-                ),
-                width: 's',
-                onClose: () => log('close profile dropdown hint'),
-            }}
-            onOpen={() => log('open profile dropdown')}
-            onClose={() => log('close profile dropdown')}
-        >
-            <ProfileDropdown.Link id="first" to="https://google.com">
-                first item
-            </ProfileDropdown.Link>
-            <ProfileDropdown.Divider />
-            <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
-        </ProfileDropdown>
-    </HeaderNavigation>
+export const ProfileDropdownWithHintPopup = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+        }}
+        hintPopup={{
+            className: 'bg-blue-500-i c-white',
+            content: ({ openProfile }) => (
+                <div>
+                    hello{' '}
+                    <Button onClick={openProfile} size="xsmall">
+                        show me
+                    </Button>
+                </div>
+            ),
+            width: 's',
+            onClose: () => log('close profile dropdown hint'),
+        }}
+        onOpen={() => log('open profile dropdown')}
+        onClose={() => log('close profile dropdown')}
+    >
+        <ProfileDropdown.Link id="first" to="https://google.com">
+            first item
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
+    </ProfileDropdown>
 );
 
-export const profileDropdownWithHintAndInfoPopup = () => (
-    <HeaderNavigation navigationComponent={NavLinkMock}>
-        <ProfileDropdown
-            trigger={{
-                avatarBadge: 'yellow-500',
-                badge: { className: 'bg-red-400' },
-                info: { title: 'some text', text: 'qq' },
-            }}
-            hintPopup={{
-                content: () => <div>hello</div>,
-            }}
-        />
-    </HeaderNavigation>
+export const ProfileDropdownWithHintAndInfoPopup = () => (
+    <ProfileDropdown
+        trigger={{
+            avatarBadge: 'yellow-500',
+            badge: { className: 'bg-red-400' },
+            info: { title: 'some text', text: 'qq' },
+        }}
+        hintPopup={{
+            content: () => <div>hello</div>,
+        }}
+    />
 );

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

@@ -1,4 +1,9 @@
-import { BodyText, Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import { Icon } from '@servicetitan/anvil2';
+import SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
+import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
+import { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
     FC,
@@ -7,12 +12,16 @@ import {
     MouseEventHandler,
     ReactNode,
     useCallback,
+    useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 
-import { useNavLink } from '../../utils/navigation-context';
+import {
+    NavigationComponentContext,
+    NavigationLegacyContext,
+} from '../../utils/navigation-context';
 import { CounterTag, CounterTagPropsType } from '../counter-tag';
 import * as Styles from './profile-dropdown.module.less';
 import { ProfileLogo } from './profile-icon';
@@ -24,6 +33,7 @@ export interface ProfileDropdownTriggerProps {
     avatarBadge?: boolean | string;
     badge?: { content?: number | string; className: string };
     hintArrow?: boolean;
+    open: boolean;
     onClick?(e: MouseEvent): void;
 }
 
@@ -35,9 +45,11 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     imageSrc,
     info,
     onClick,
+    open,
 }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
+    const isLegacy = useContext(NavigationLegacyContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -60,7 +72,10 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',
                 'profile-dropdown-trigger',
                 Styles.triggerContainer,
-                { [Styles.triggerContainerHintArrow]: hintArrow },
+                {
+                    [Styles.triggerContainerHintArrow]: hintArrow,
+                    [Styles.triggerContainerLegacy]: isLegacy,
+                },
                 className
             )}
             onClick={onClick}
@@ -74,13 +89,20 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
-            ) : (
+            ) : isLegacy ? (
                 <ProfileLogo />
+            ) : (
+                <Icon size="large" svg={open ? SvgAccountActive : SvgAccountInactive} />
             )}
 
             {!!info && (
                 <div className={Styles.info}>
-                    <BodyText bold title={info.title} className="t-truncate c-white" size="xsmall">
+                    <BodyText
+                        bold
+                        title={info.title}
+                        className="t-truncate c-inherit"
+                        size="xsmall"
+                    >
                         {info.title}
                     </BodyText>
                     <BodyText
@@ -93,7 +115,11 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                 </div>
             )}
 
-            <Icon className="m-l-half d-f align-items-center" name="expand_more" size={12} />
+            <Icon
+                svg={open ? SvgExpandLess : SvgExpandMore}
+                className={classNames('d-f align-items-center c-inherit', { 'm-l-half': isLegacy })}
+                size="small"
+            />
 
             {!!avatarBadge && (
                 <div
@@ -185,7 +211,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     onClick,
     ...rest
 }: ProfileDropdownLinkProps) => {
-    const NavigationComponent = useNavLink();
+    const NavigationComponent = useContext(NavigationComponentContext);
 
     const clickHandler = (e: MouseEvent<any>) => {
         e.preventDefault();
@@ -241,7 +267,7 @@ export interface ProfileDropdownPropsStrict {
     children?: ReactNode;
     className?: string;
     direction?: PopoverPropsStrict['direction'];
-    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'hintArrow'>;
+    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
     hintPopup?: {
         className?: string;
         content: FC<{ openProfile(): void }>;
@@ -305,6 +331,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
             {...trigger}
             onClick={children ? onTriggerClick : undefined}
             hintArrow={hintShown}
+            open={open}
         />
     );
 

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/side-navigation';
+export * from './components/left-navigation';
+export * from './components/links';
 export * from './utils/navigation';
 export * from './utils/with-tooltip';

package/src/test/data-stories.module.less

@@ -0,0 +1,8 @@
+// emulate temp anvil2 hotfix from monolith
+.fix-icons {
+    [data-anv][data-anv] {
+        all: revert-layer;
+        line-height: revert-layer;
+        -webkit-font-smoothing: auto;
+    }
+}

package/src/test/data-stories.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const fixIcons: string;
+

package/src/test/data.stories.tsx

@@ -0,0 +1,223 @@
+import { AnvilProvider } from '@servicetitan/anvil2';
+import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone_disabled.svg';
+import SvgPhoneActive from '@servicetitan/anvil2/assets/icons/material/round/phone_enabled.svg';
+import SvgAccountingActive from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_active.svg';
+import SvgAccounting from '@servicetitan/anvil2/assets/icons/st/gnav_accounting_inactive.svg';
+import SvgCallsActive from '@servicetitan/anvil2/assets/icons/st/gnav_calls_active.svg';
+import SvgCalls from '@servicetitan/anvil2/assets/icons/st/gnav_calls_inactive.svg';
+import SvgDashboardActive from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_active.svg';
+import SvgDashboard from '@servicetitan/anvil2/assets/icons/st/gnav_dashboard_inactive.svg';
+import SvgDispatchActive from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_active.svg';
+import SvgDispatch from '@servicetitan/anvil2/assets/icons/st/gnav_dispatch_inactive.svg';
+import SvgFleetProActive from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_active.svg';
+import SvgFleetPro from '@servicetitan/anvil2/assets/icons/st/gnav_fleet_pro_inactive.svg';
+import SvgFollowUpActive from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_active.svg';
+import SvgFollowUp from '@servicetitan/anvil2/assets/icons/st/gnav_follow_up_inactive.svg';
+import SvgInventoryActive from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_active.svg';
+import SvgInventory from '@servicetitan/anvil2/assets/icons/st/gnav_inventory_inactive.svg';
+import SvgMarketingActive from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_active.svg';
+import SvgMarketing from '@servicetitan/anvil2/assets/icons/st/gnav_marketing_inactive.svg';
+import SvgPosActive from '@servicetitan/anvil2/assets/icons/st/gnav_pos_active.svg';
+import SvgPos from '@servicetitan/anvil2/assets/icons/st/gnav_pos_inactive.svg';
+import SvgPriceBookActive from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_active.svg';
+import SvgPriceBook from '@servicetitan/anvil2/assets/icons/st/gnav_pricebook_inactive.svg';
+import SvgProjectsActive from '@servicetitan/anvil2/assets/icons/st/gnav_projects_active.svg';
+import SvgProjects from '@servicetitan/anvil2/assets/icons/st/gnav_projects_inactive.svg';
+import SvgReportsActive from '@servicetitan/anvil2/assets/icons/st/gnav_reports_active.svg';
+import SvgReports from '@servicetitan/anvil2/assets/icons/st/gnav_reports_inactive.svg';
+import SvgScheduleActive from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_active.svg';
+import SvgSchedule from '@servicetitan/anvil2/assets/icons/st/gnav_schedule_inactive.svg';
+import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_active.svg';
+import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
+
+import { Popover } from '@servicetitan/design-system';
+
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+// needed only for storybook and added in root dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
+import { HeaderNavigationTrigger } from '../components/links';
+import { HeaderNavigationItemData, NavLinkComponentProps } from '../utils/navigation';
+import { NavigationComponentContext } from '../utils/navigation-context';
+import * as Styles from './data-stories.module.less';
+
+export const NavLinkMock = forwardRef<any, NavLinkComponentProps>(
+    ({ to, children, activeClassName, className, isActive, ...rest }, ref) => {
+        const history = useHistory();
+        const location = useLocation();
+        const linkActive = location.pathname.replace('/', '') === to;
+
+        return (
+            <a
+                {...rest}
+                className={classNames(className, linkActive ? activeClassName : '')}
+                href={to}
+                onClick={e => {
+                    e.preventDefault();
+
+                    if (!to.startsWith('http')) {
+                        history.push(to);
+                    }
+                }}
+                ref={ref}
+            >
+                {children}
+            </a>
+        );
+    }
+);
+
+export const withMemoryRouter = (Story: any) => (
+    <MemoryRouter>
+        <NavigationComponentContext.Provider value={NavLinkMock}>
+            <Story />
+        </NavigationComponentContext.Provider>
+    </MemoryRouter>
+);
+
+export const withAnvil = (Story: any) => (
+    <AnvilProvider className={Styles.fixIcons}>
+        <Story />
+    </AnvilProvider>
+);
+
+export const InventoryIcon = () => (
+    <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="-293 385 24 24" fill="currentColor">
+        <polyline points="-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " />
+        <path d="M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" />
+    </svg>
+);
+
+export const SearchIcon = () => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <g transform="translate(0,4)">
+            <path
+                d="M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z"
+                fill="white"
+            />
+        </g>
+    </svg>
+);
+
+const getItem = (
+    id: string,
+    data: Partial<HeaderNavigationItemData>
+): HeaderNavigationItemData => ({
+    id,
+    to: id,
+    title: id[0].toUpperCase() + id.substring(1),
+    hint: id,
+    icon: undefined,
+    iconActive: undefined,
+    ...(data ?? {}),
+});
+
+export const items = {
+    calendar: getItem('calendar', {
+        iconName: 'event',
+        icon: SvgSchedule,
+        iconActive: SvgScheduleActive,
+    }),
+    calls: getItem('calls', {
+        iconName: 'local_phone',
+        icon: SvgCalls,
+        iconActive: SvgCallsActive,
+        counter: 12,
+    }),
+    dashboard: getItem('dashboard', {
+        iconName: 'odometer',
+        icon: SvgDashboard,
+        iconActive: SvgDashboardActive,
+    }),
+    dispatch: getItem('dispatch', {
+        iconName: 'location_disabled',
+        icon: SvgDispatch,
+        iconActive: SvgDispatchActive,
+        counter: 1,
+    }),
+    fleet: getItem('fleet', {
+        iconName: 'fleet-pro',
+        icon: SvgFleetPro,
+        iconActive: SvgFleetProActive,
+        title: 'Fleet Pro',
+    }),
+    followUps: getItem('followUps', {
+        iconName: 'flag',
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Ups',
+    }),
+    inventory: getItem('inventory', {
+        iconName: 'toys',
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+    }),
+    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
+    accounting: getItem('accounting', {
+        iconName: 'assignment',
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+    }),
+    marketing: getItem('marketing', {
+        iconName: 'bullhorn',
+        icon: SvgMarketing,
+        iconActive: SvgMarketingActive,
+    }),
+    priceBook: getItem('priceBook', {
+        iconName: 'book',
+        icon: SvgPriceBook,
+        iconActive: SvgPriceBookActive,
+    }),
+    pointOfSale: getItem('pointOfSale', {
+        iconName: 'cash-register',
+        icon: SvgPos,
+        iconActive: SvgPosActive,
+    }),
+    projects: getItem('projects', {
+        iconName: 'folder_special',
+        icon: SvgProjects,
+        iconActive: SvgProjectsActive,
+    }),
+    reports: getItem('reports', {
+        iconName: 'folder_special',
+        icon: SvgReports,
+        iconActive: SvgReportsActive,
+    }),
+    tasks: getItem('tasks', {
+        iconName: 'format_list_bulleted',
+        icon: SvgTasks,
+        iconActive: SvgTasksActive,
+    }),
+};
+
+export const CallsNavigationTrigger = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Popover
+            open={open}
+            onClickOutside={() => setOpen(false)}
+            direction="bl"
+            trigger={
+                <HeaderNavigationTrigger
+                    id="dialpad"
+                    iconName="phone"
+                    counter={2}
+                    icon={SvgPhone}
+                    iconActive={SvgPhoneActive}
+                    onClick={() => setOpen(!open)}
+                    isActive={open}
+                />
+            }
+        >
+            calls content
+        </Popover>
+    );
+};

package/src/utils/navigation-context.tsx

@@ -1,13 +1,13 @@
-import { FC, createContext, useContext } from 'react';
-import { NavLink } from 'react-router-dom';
+import { FC, createContext } from 'react';
 import { NavLinkComponentProps } from './navigation';
 
-export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = props => (
-    <NavLink
-        {...props}
-        isActive={props.isActive && ((_, { pathname }) => props.isActive!(pathname))}
-    />
-);
+export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({
+    children,
+    activeClassName,
+    isActive,
+    ...props
+}) => <a {...props}>{children}</a>;
 
-export const NavLinkContext = createContext(DefaultNavLinkComponent);
-export const useNavLink = () => useContext(NavLinkContext);
+export const NavigationComponentContext =
+    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);
+export const NavigationLegacyContext = createContext(false);