@servicetitan/navigation 13.1.4 → 13.2.0-canary.270.b4a066f.0

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

@@ -9,8 +9,7 @@
 @bg-color-active: rgba(120, 187, 250, 0.2);
 
 .layout-anvil1 {
-    height: calc(100vh - var(--nav-offset-top));
-    margin-top: var(--nav-offset-top);
+    height: 100vh;
 
     display: flex;
     flex-direction: column;
@@ -30,20 +29,12 @@
     }
 }
 
-.layout-anvil2 {
-    .content-header {
-        position: sticky;
-        top: var(--nav-offset-top);
-        z-index: 989;
-    }
-}
-
 .layout-desktop {
     padding-left: var(--nav-offset-left);
 
     .side {
         position: fixed;
-        top: var(--nav-offset-top);
+        top: var(--nav-top-height);
         bottom: 0;
         left: 0;
         right: 0;
@@ -52,31 +43,20 @@
 }
 
 .layout-legacy,
-.layout-anvil2 {
+.layout-anvil2,
+.layout-anvil1 {
     .top-placeholder {
         height: var(--nav-offset-top);
     }
 }
 
 .layout {
+    --nav-top-height: 0px;
     --nav-offset-top: 0px;
     --nav-offset-left: 0px;
     --content-offset-top: var(--nav-offset-top);
     --offset: var(--content-offset-top);
 
-    &.layout-desktop.layout-top-light {
-        --nav-offset-top: 48px;
-    }
-
-    &.layout-desktop.layout-top-nav {
-        --nav-offset-top: 80px;
-    }
-
-    &.layout-mobile.layout-top-light,
-    &.layout-mobile.layout-top-nav {
-        --nav-offset-top: 72px;
-    }
-
     &.layout-desktop.layout-nav-slim {
         --nav-offset-left: 64px;
     }
@@ -98,10 +78,29 @@
         left: 0;
         right: 0;
     }
+
+    .content-fixed-header {
+        position: fixed;
+        top: var(--nav-top-height);
+        left: var(--nav-offset-left);
+        right: 0;
+        z-index: 801;
+    }
 }
 
+/* anvil2 doesn't support scrollable header s above the Page content */
+/* so making them sticky as well */
+.layout-anvil2 {
+    .content-header {
+        position: sticky;
+        top: var(--nav-offset-top);
+        z-index: 800;
+    }
+}
 @media print {
     .layout {
+        --nav-top-height: 0px !important;
+        --nav-offset-top: 0px !important;
         --nav-offset-left: 0px !important;
         --nav-offset-right: 0px !important;
 

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

@@ -1,16 +1,14 @@
 export const __esModule: true;
 export const content: string;
+export const contentFixedHeader: 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;
 export const layoutNavWide: string;
-export const layoutTopLight: string;
-export const layoutTopNav: string;
 export const side: string;
 export const top: string;
 export const topPlaceholder: string;

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

@@ -65,6 +65,9 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     /** content header content */
     header?: ReactElement;
 
+    /** content header fixed (stocky to top) content */
+    headerFixed?: ReactElement;
+
     /** layout header content (center) */
     top?: ReactElement;
 
@@ -125,6 +128,43 @@ const useAppearance = (appearance: TitanLayoutProps['appearance']) =>
         };
     }, [appearance]);
 
+enum TopNavVariant {
+    None = 'none',
+    Tiny = 'tiny',
+    Dark = 'dark',
+    DarkStacked = 'stacked',
+    Mobile = 'mobile',
+}
+
+const topBarHeights: Record<TopNavVariant, number> = {
+    [TopNavVariant.None]: 0,
+    [TopNavVariant.Tiny]: 48,
+    [TopNavVariant.Dark]: 48,
+    [TopNavVariant.DarkStacked]: 80,
+    [TopNavVariant.Mobile]: 72,
+};
+
+const useTopNavVariant = (
+    hasTopBar: boolean,
+    isMobile: boolean,
+    isLeftNav: boolean,
+    hasTopCenterContent: boolean
+) => {
+    if (!hasTopBar) {
+        return TopNavVariant.None;
+    }
+
+    if (isMobile) {
+        return TopNavVariant.Mobile;
+    }
+
+    if (isLeftNav) {
+        return TopNavVariant.Tiny;
+    }
+
+    return hasTopCenterContent ? TopNavVariant.DarkStacked : TopNavVariant.Dark;
+};
+
 function TitanLayoutComponent({
     appearance = 'anvil2',
     navVariant = 'left',
@@ -133,6 +173,7 @@ function TitanLayoutComponent({
     contentOnly,
     navigationComponent,
     header,
+    headerFixed,
     top,
     profile,
     state,
@@ -159,19 +200,15 @@ function TitanLayoutComponent({
     const view = useAppearance(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});
-    const updateIndicatorsHeight = useCallback((offset: number) => {
-        setOffsetTopStyles({
-            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,
-        });
-    }, []);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const [headerFixedHeight, setHeaderFixedHeight] = useState(0);
 
     const isMobile = breakpoint.isMobile;
     const hasSideBar =
         !contentOnly &&
         (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&
         (!!navigationMainItems?.length || !!sideTop?.length);
-    const hasTopBar = !contentOnly;
+    const topBarVariant = useTopNavVariant(!contentOnly, isMobile, navVariant === 'left', !!top);
 
     useEffect(() => {
         if (view.isAnvil1) {
@@ -257,11 +294,15 @@ function TitanLayoutComponent({
         }
     }, [view, minContentWidth, breakpoint.width]);
 
-    const contentStyles = useMemo(() => {
-        if (view.isAnvil2 || view.isLegacy) {
-            return offsetTopStyles;
-        }
-    }, [view, offsetTopStyles]);
+    const layoutStyles = useMemo(() => {
+        const topHeight = topBarHeights[topBarVariant] ?? 0;
+
+        return {
+            '--nav-top-height': `${topHeight}px`,
+            '--nav-offset-top': `${topHeight + headerFixedHeight}px`,
+            '--content-offset-top': `${topHeight + headerFixedHeight + headerHeight}px`,
+        } as CSSProperties;
+    }, [topBarVariant, headerFixedHeight, headerHeight]);
 
     const layoutClass = view.isLegacy
         ? Styles.layoutLegacy
@@ -270,7 +311,7 @@ function TitanLayoutComponent({
           : Styles.layoutAnvil2;
 
     const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {
-        if (!hasTopBar) {
+        if (topBarVariant === TopNavVariant.None) {
             return undefined;
         }
 
@@ -293,7 +334,7 @@ function TitanLayoutComponent({
         return undefined;
     }, [
         isMobile,
-        hasTopBar,
+        topBarVariant,
         navVariant,
         state?.navCollapsed,
         onBurgerClick,
@@ -308,63 +349,59 @@ function TitanLayoutComponent({
                     id={id}
                     className={classNames(
                         Styles.layout,
-                        isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
-                        hasTopBar &&
-                            (navVariant === 'left' || !top
-                                ? Styles.layoutTopLight
-                                : Styles.layoutTopNav),
+                        !isMobile && Styles.layoutDesktop,
                         {
                             [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,
                             [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,
                         },
                         layoutClass
                     )}
-                    style={contentStyles}
+                    style={layoutStyles}
                 >
-                    {view.isSequent && <div className={Styles.topPlaceholder} />}
-                    {hasTopBar &&
-                        (navVariant === 'left' ? (
-                            <LayoutHeader
-                                className={Styles.top}
-                                variant="light"
-                                logo={logo}
-                                profile={isMobile ? undefined : profile}
-                                center={top}
-                                rightText={isMobile ? undefined : extraText}
-                                right={
-                                    <Fragment>
-                                        {extraLinksTop}
-                                        {!isMobile && extraLinks}
-                                    </Fragment>
-                                }
-                                isMobile={isMobile}
-                                burger={burgerProps}
-                            />
-                        ) : (
-                            <LayoutHeaderDark
-                                className={Styles.top}
-                                logo={logo}
-                                profile={isMobile ? undefined : profile}
-                                center={top}
-                                rightText={isMobile ? undefined : extraText}
-                                right={
-                                    <Fragment>
-                                        {extraLinksTop}
-                                        {!isMobile && extraLinks}
-                                    </Fragment>
-                                }
-                                isMobile={isMobile}
-                                burger={burgerProps}
-                                navigationMainItems={navigationMainItems}
-                                navigationOverflowItems={navigationOverflowItems}
-                            />
-                        ))}
+                    <div className={Styles.topPlaceholder} />
+                    {topBarVariant === TopNavVariant.Tiny ? (
+                        <LayoutHeader
+                            className={Styles.top}
+                            variant="light"
+                            logo={logo}
+                            profile={isMobile ? undefined : profile}
+                            center={top}
+                            rightText={isMobile ? undefined : extraText}
+                            right={
+                                <Fragment>
+                                    {extraLinksTop}
+                                    {!isMobile && extraLinks}
+                                </Fragment>
+                            }
+                            isMobile={isMobile}
+                            burger={burgerProps}
+                        />
+                    ) : topBarVariant !== TopNavVariant.None ? (
+                        <LayoutHeaderDark
+                            className={Styles.top}
+                            logo={logo}
+                            profile={isMobile ? undefined : profile}
+                            center={top}
+                            rightText={isMobile ? undefined : extraText}
+                            right={
+                                <Fragment>
+                                    {extraLinksTop}
+                                    {!isMobile && extraLinks}
+                                </Fragment>
+                            }
+                            isMobile={isMobile}
+                            burger={burgerProps}
+                            navigationMainItems={navigationMainItems}
+                            navigationOverflowItems={navigationOverflowItems}
+                        />
+                    ) : null}
 
                     {hasSideBar && (
                         <NotificationsContextProvider>
                             <LayoutSidebar
                                 className={Styles.side}
                                 mobile={breakpoint.isMobile}
+                                touchDevice={breakpoint.isTouchDevice}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
                                 submenusExpanded={state?.submenusExpanded}
@@ -397,11 +434,26 @@ function TitanLayoutComponent({
                         </NotificationsContextProvider>
                     )}
 
-                    {view.isSequent && (
-                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
-                            {header}
+                    {!!headerFixed && (
+                        <TitanLayoutHeaderObserved
+                            heightChange={setHeaderFixedHeight}
+                            className={Styles.contentFixedHeader}
+                            data-cy="layout-content-fixed-header"
+                        >
+                            {headerFixed}
                         </TitanLayoutHeaderObserved>
                     )}
+
+                    {!!header && view.isSequent && (
+                        <div className={Styles.contentHeader}>
+                            <TitanLayoutHeaderObserved
+                                heightChange={setHeaderHeight}
+                                data-cy="layout-content-header"
+                            >
+                                {header}
+                            </TitanLayoutHeaderObserved>
+                        </div>
+                    )}
                     {view.isAnvil1 ? (
                         <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
                             {children}
@@ -420,9 +472,11 @@ function TitanLayoutComponent({
 }
 
 const TitanLayoutHeaderObserved: FC<{
-    children: ReactNode;
+    'children': ReactNode;
+    'className'?: string;
+    'data-cy'?: string;
     heightChange?(value: number): void;
-}> = ({ children, heightChange }) => {
+}> = ({ children, heightChange, ...rest }) => {
     const ref = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -448,7 +502,7 @@ const TitanLayoutHeaderObserved: FC<{
         };
     }, [heightChange]);
     return (
-        <div ref={ref} className={Styles.contentHeader} data-cy="layout-content-header">
+        <div {...rest} ref={ref}>
             {children}
         </div>
     );

package/src/test/data.tsx

@@ -33,7 +33,7 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { FC, Fragment, forwardRef, useState } from 'react';
+import { FC, Fragment, forwardRef, useLayoutEffect, useRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
@@ -78,6 +78,42 @@ export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
+export const CssInfo: FC<{ className?: string }> = ({ className }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [info, setInfo] = useState({ 'offset': '', 'nav-offset-top': '' });
+
+    useLayoutEffect(() => {
+        const interval = setInterval(() => {
+            const el = ref.current;
+
+            if (!el) {
+                return;
+            }
+
+            // eslint-disable-next-line no-restricted-globals
+            const st = getComputedStyle(el);
+
+            setInfo({
+                'offset': st.getPropertyValue('--offset'),
+                'nav-offset-top': st.getPropertyValue('--nav-offset-top'),
+            });
+        }, 100);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className={className} ref={ref}>
+            <p>CSS variables:</p>
+            {Object.entries(info).map(([key, value]) => (
+                <p key={key}>
+                    --{key} - {value}
+                </p>
+            ))}
+        </div>
+    );
+};
+
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
         <Story />

package/src/test/titan-layout.tsx

@@ -3,6 +3,7 @@ import { TitanLayoutProps } from '../components/titan-layout';
 
 export interface LayoutContentArgs {
     header: boolean;
+    headerFixed: boolean;
     sideTop: boolean;
     extraText: boolean;
     search: boolean;
@@ -15,6 +16,7 @@ export interface LayoutContentArgs {
 
 export const getDefaultArgs = (): LayoutContentArgs => ({
     header: true,
+    headerFixed: true,
     sideTop: true,
     extraText: true,
     search: true,

package/src/utils/use-breakpoint.ts

@@ -4,9 +4,12 @@ import { useMemo } from 'react';
 export interface TitanBreakpoint {
     name: BreakpointReturnProps['name'];
     isMobile: boolean;
+    isTouchDevice: boolean;
     width: number;
 }
 
+const isTouchDevice = () => window.matchMedia('(any-pointer: coarse)').matches;
+
 export const useTitanBreakpoint = (): TitanBreakpoint => {
     const breakpoint = useBreakpoint();
 
@@ -14,6 +17,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
         () => ({
             name: breakpoint?.name ?? 'xl',
             isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
+            isTouchDevice: isTouchDevice(),
             width: breakpoint?.innerWidth ?? 0,
         }),
         [breakpoint]