@servicetitan/navigation 11.0.0-canary.237.f2d512b.0 → 11.0.0-canary.237.f92c882.0

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

@@ -1,8 +1,8 @@
 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 { FC, useState } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
+import { FC, MouseEvent, useEffect, useState } from 'react';
+import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
 import {
     ProfileDropdown as DesktopProfileDropdown,
     ProfileDropdownLinkProps,
@@ -17,6 +17,7 @@ import {
     InternalSideNavigationGroupLink,
     InternalSideNavigationGroupTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext, useNotificationsState } from './notifications-context';
 
 export type {
     ProfileDropdownProps,
@@ -24,6 +25,10 @@ export type {
     ProfileDropdownLinkProps,
 } from '../profile-dropdown/profile-dropdown';
 
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({ children, isActive, ...props }) => (
+    <a {...props}>{children}</a>
+);
+
 const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
     const { breakpoint, NavigationComponent } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -40,24 +45,37 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     children,
     ...props
 }) => {
+    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
-    const onExpandToggle = () => setExpanded(!expanded);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const onExpandToggle = (e: MouseEvent<never>) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+    };
+
+    useEffect(() => {
+        onNotificationsUpdate(id, hasNotifications);
+    }, [hasNotifications, onNotificationsUpdate]);
+
     return (
-        <InternalSideNavigationGroup
-            id="__profile"
-            to={undefined}
-            title="Profile"
-            icon={SvgAccountInactive}
-            iconActive={SvgAccountActive}
-            isActive={expanded}
-            {...props}
-            submenuExpanded={expanded}
-            onExpandToggle={onExpandToggle}
-            onClick={onExpandToggle}
-            tag={undefined}
-        >
-            {children}
-        </InternalSideNavigationGroup>
+        <NotificationsContextProvider>
+            <InternalSideNavigationGroup
+                id={id}
+                to={undefined}
+                title="Profile"
+                icon={SvgAccountInactive}
+                iconActive={SvgAccountActive}
+                isActive={expanded}
+                {...props}
+                submenuExpanded={expanded}
+                onExpandToggle={onExpandToggle}
+                onClick={onExpandToggle}
+                tag={{ value: hasNotifications }}
+            >
+                {children}
+            </InternalSideNavigationGroup>
+        </NotificationsContextProvider>
     );
 };
 
@@ -70,6 +88,18 @@ const ProfileDropdownDivider: FC = () => {
     );
 };
 
+const getText = (props: any): string | undefined => {
+    if (typeof props.children === 'string') {
+        return props.children;
+    }
+
+    if (typeof props.text === 'string') {
+        return props.text;
+    }
+
+    return undefined;
+};
+
 const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     const { breakpoint } = useTitanLayoutContext();
     return breakpoint.isMobile ? (
@@ -79,9 +109,9 @@ const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
     );
 };
 const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
-        <InternalSideNavigationGroupTrigger id={props.id} title={title} onClick={props.onClick} />
+    const text = getText(props);
+    return text ? (
+        <InternalSideNavigationGroupTrigger id={props.id} title={text} onClick={props.onClick} />
     ) : null;
 };
 
@@ -94,17 +124,22 @@ const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
     );
 };
 const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
     to,
     navigationComponent,
     ...props
 }) => {
-    const title = typeof props.children === 'string' ? props.children : undefined;
-    return title ? (
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const text = getText(props);
+    const isExternalLink = external ?? to?.startsWith('http');
+    onNotificationsUpdate(props.id, !!props.tag?.value);
+
+    return text ? (
         <InternalSideNavigationGroupLink
             {...props}
             to={to}
-            title={title}
-            navigationComponent={navigationComponent}
+            title={text}
+            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;
 };

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

@@ -156,7 +156,9 @@ export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = (
 
 /** Side Navigation menu trigger (for internal usage) */
 export const InternalSideNavigationTrigger: FC<
-    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & { onClick?: () => void }
+    Omit<InternalSideNavigationLinkProps, 'to' | 'navigationComponent'> & {
+        onClick?: (e: MouseEvent<never>) => void;
+    }
 > = ({ className, dataPrefix, isActive, submenuExpanded, onExpandToggle, onClick, ...props }) => {
     return (
         <div
@@ -180,12 +182,22 @@ export const InternalSideNavigationTrigger: FC<
 
 export const InternalSideNavigationGroupLink: FC<
     NavigationSubmenuItemData & NavigationComponentProps
-> = ({ id, counter, tag, title, to, isActive, navigationComponent: NavigationComponent }) => {
+> = ({
+    id,
+    counter,
+    tag,
+    title,
+    to,
+    isActive,
+    navigationComponent: NavigationComponent,
+    ...rest
+}) => {
     return (
         <NavigationComponent
+            key={id}
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
-            key={id}
+            {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
                 [Styles.submenuLinkActive]: isActive === true,
@@ -201,12 +213,13 @@ export const InternalSideNavigationGroupLink: FC<
 
 export const InternalSideNavigationGroupTrigger: FC<
     Omit<NavigationSubmenuItemData, 'to'> & { onClick?: (e: MouseEvent<any>) => void }
-> = ({ id, counter, onClick, tag, title, isActive }) => {
+> = ({ id, counter, onClick, tag, title, isActive, ...rest }) => {
     return (
         <div
             data-cy={`navigation-item-${id}`}
             data-pendo={`navigation-item-${id}`}
             key={id}
+            {...rest}
             className={classNames(Styles.submenuItem, {
                 [Styles.submenuLink]: !!onClick,
                 [Styles.submenuLinkActive]: isActive === true,
@@ -231,7 +244,7 @@ export const InternalSideNavigationGroup: FC<
             onExpandToggle?: (e: MouseEvent<never>) => void;
             tag: BadgeTagProps | undefined;
             to: NavigationItemData['to'] | undefined;
-            onClick?: () => void;
+            onClick?: (e: MouseEvent<never>) => void;
         }
 > = ({ children, submenuExpanded, to, onExpandToggle, onClick, ...props }) => {
     return (

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

@@ -6,6 +6,7 @@ import {
     InternalSideNavigationLink,
     InternalSideNavigationTrigger,
 } from './layout-sidebar-links-internal';
+import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
@@ -17,7 +18,14 @@ const WrappedLink: FC<{
 
 /** Side Navigation menu link */
 export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
-    const { NavigationComponent } = useTitanLayoutContext();
+    const {
+        NavigationComponent,
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationLink
@@ -25,11 +33,11 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
         />
     );
 
-    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
 }
 
 /** Side Navigation menu trigger */
@@ -42,13 +50,17 @@ export function TitanLayoutSidebarTrigger({
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const tag = getCounterTag(props.counter, props.tag);
+
+    onNotificationsUpdate(props.id, !!tag);
 
     const element = (
         <InternalSideNavigationTrigger
             {...props}
             submenuExpanded={undefined}
             dataPrefix="navigation-trigger"
-            tag={getCounterTag(props.counter, props.tag)}
+            tag={tag}
             onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
         />
     );

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

@@ -21,8 +21,8 @@
     position: fixed;
     max-width: 400px;
     width: 0;
+    height: 100vh;
     top: 0;
-    bottom: 0;
     left: 0;
     z-index: 991;
 
@@ -61,6 +61,16 @@
     }
 }
 
+.nav-drawer-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 991;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 // mobile version opened
 .nav-drawer-opened {
     display: flex;
@@ -141,7 +151,11 @@
 // desktop version expanded
 .nav-wide {
     width: var(--nav-offset-left);
-    padding-top: @spacing-2;
+
+    .nav-item {
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+    }
 
     .toggle {
         .toggle-content {
@@ -162,14 +176,16 @@
         margin-top: @spacing-1;
         margin-bottom: @spacing-1;
     }
+
+    .nav-main {
+        padding-top: @spacing-1;
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
-        margin-left: @spacing-1;
-        margin-right: @spacing-1;
 
         .nav-item-icon-wrapper {
             flex: 1;

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

@@ -5,6 +5,7 @@ export const navBottom: string;
 export const navClose: string;
 export const navCloseWrapper: string;
 export const navDrawer: string;
+export const navDrawerBackdrop: string;
 export const navDrawerOpened: string;
 export const navFooter: string;
 export const navGroupItem: string;

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

@@ -33,9 +33,11 @@ export interface LayoutSidebarProps {
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
     submenuExpanded: string | undefined;
+    drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
     onBarExpandChange(expanded: boolean): void;
+    onDrawerOpenChange(expanded: boolean): void;
     onSubmenuExpandChange(id: string, expanded: boolean): void;
 }
 
@@ -44,29 +46,36 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     mobile,
     barExpanded,
     submenuExpanded,
+    drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
+    onDrawerOpenChange,
     mainItems,
     top,
     bottom,
     navigationComponent,
 }) => {
-    const handleClick = (e: MouseEvent<never>) => {
-        e.stopPropagation();
+    const closeDrawer = () => {
+        if (mobile) {
+            onDrawerOpenChange?.(false);
+        }
     };
 
     return (
         <LayoutPlacementContext.Provider value="side">
+            {mobile && drawerOpened && (
+                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />
+            )}
             <div
                 className={classNames(
                     Styles.nav,
                     mobile && Styles.navDrawer,
-                    mobile && barExpanded && Styles.navDrawerOpened,
+                    mobile && drawerOpened && Styles.navDrawerOpened,
                     !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
                     className
                 )}
                 data-cy="side-navigation"
-                onClick={handleClick}
+                onClick={closeDrawer}
             >
                 <ThemeProvider mode="dark" className={Styles.navMain}>
                     {mobile && (
@@ -86,7 +95,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                             item.submenu ? (
                                 <SideNavigationGroupItem
                                     key={item.id}
-                                    barExpanded={barExpanded}
+                                    barExpanded={mobile ? barExpanded : drawerOpened}
                                     submenuExpanded={!!item.id && submenuExpanded === item.id}
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}

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

@@ -0,0 +1,44 @@
+import {
+    FC,
+    PropsWithChildren,
+    createContext,
+    useCallback,
+    useContext,
+    useRef,
+    useState,
+} from 'react';
+
+interface NotificationsContextType {
+    onNotificationsUpdate: (id: string, hasNotifications: boolean) => void;
+}
+
+const NotificationsContext = createContext<NotificationsContextType>({
+    onNotificationsUpdate: () => {},
+});
+
+export const useNotificationsContext = () => useContext(NotificationsContext);
+
+export const useNotificationsState = () => {
+    const [hasNotifications, setHasNotifications] = useState(false);
+    const items = useRef(new Set<string>());
+    const onNotificationsUpdate = useCallback((id: string, hasNotifications: boolean) => {
+        if (hasNotifications && !items.current.has(id)) {
+            items.current.add(id);
+            setHasNotifications(!!items.current.size);
+        } else if (!hasNotifications && items.current.has(id)) {
+            items.current.delete(id);
+            setHasNotifications(!!items.current.size);
+        }
+    }, []);
+
+    const NotificationsContextProvider: FC<PropsWithChildren> = useCallback(
+        ({ children }) => (
+            <NotificationsContext.Provider value={{ onNotificationsUpdate }}>
+                {children}
+            </NotificationsContext.Provider>
+        ),
+        [onNotificationsUpdate]
+    );
+
+    return { NotificationsContextProvider, hasNotifications };
+};

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

@@ -13,7 +13,7 @@
     margin-top: var(--nav-offset-top);
 
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 
     .side {
         flex-basis: var(--nav-offset-left);
@@ -30,23 +30,32 @@
     }
 }
 
-.layout-legacy,
 .layout-anvil2 {
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 989;
+    }
+}
+
+.layout-desktop {
     padding-left: var(--nav-offset-left);
 
-    .top-placeholder {
-        height: var(--nav-offset-top);
+    .side {
+        position: fixed;
+        top: var(--nav-offset-top);
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: @z-index-global-nav;
     }
+}
 
-    &:not(.layout-mobile) {
-        .side {
-            position: fixed;
-            top: var(--nav-offset-top);
-            bottom: 0;
-            left: 0;
-            right: 0;
-            z-index: @z-index-global-nav;
-        }
+.layout-legacy,
+.layout-anvil2 {
+    overflow-x: auto;
+    .top-placeholder {
+        height: var(--nav-offset-top);
     }
 }
 
@@ -58,19 +67,37 @@
         --nav-offset-left: 0;
     }
 
-    &.layout-nav-slim {
+    &.layout-desktop.layout-nav-slim {
         --nav-offset-left: 64px;
     }
 
-    &.layout-nav-wide {
+    &.layout-desktop.layout-nav-wide {
         --nav-offset-left: 212px;
     }
 
     .top {
         position: fixed;
+        width: 100vw;
         top: 0;
         left: 0;
-        right: 0;
         z-index: 991;
     }
+
+    .content-header {
+        position: sticky;
+        left: 0;
+        right: 0;
+    }
+}
+
+@media print {
+    .layout {
+        --nav-offset-left: 0px !important;
+        --nav-offset-right: 0px !important;
+
+        .side,
+        .top {
+            display: none !important;
+        }
+    }
 }

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

@@ -1,8 +1,10 @@
 export const __esModule: true;
 export const content: string;
+export const contentHeader: string;
 export const layout: string;
 export const layoutAnvil1: string;
 export const layoutAnvil2: string;
+export const layoutDesktop: string;
 export const layoutLegacy: string;
 export const layoutMobile: string;
 export const layoutNavSlim: string;