@servicetitan/navigation 13.1.4 → 13.2.0-canary.270.41c771f.0

package/dist/components/titan-layout/layout-header.module.less

@@ -24,7 +24,7 @@
 .header {
     --nav-top-content-height: 32px;
 
-    height: var(--nav-offset-top);
+    height: var(--nav-top-height);
     display: flex;
     justify-content: space-between;
 

package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAgSF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,iBAAiB,4CAcvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}
+{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAmSF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,iBAAiB,4CAcvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}

package/dist/components/titan-layout/titan-layout.d.ts

@@ -26,6 +26,8 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     onStateChange?: (state: TitanLayoutState) => void;
     /** content header content */
     header?: ReactElement;
+    /** content header fixed (stocky to top) content */
+    headerFixed?: ReactElement;
     /** layout header content (center) */
     top?: ReactElement;
     /** top links for side navigation */
@@ -56,7 +58,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
      */
     minContentWidth?: number;
 };
-declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, headerFixed, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayout: typeof TitanLayoutComponent & {
     Link: FC<import("./interface").TitanLayoutLinkProps>;
     Trigger: FC<import("./interface").TitanLayoutTriggerProps>;

package/dist/components/titan-layout/titan-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyBF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CAgRlB;AAyFD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA8DF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,WAAW,EACX,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CAqRlB;AA2FD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

package/dist/components/titan-layout/titan-layout.js

@@ -32,7 +32,34 @@ const useAppearance = (appearance)=>useMemo(()=>{
     }, [
         appearance
     ]);
-function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop }) {
+var TopNavVariant = /*#__PURE__*/ function(TopNavVariant) {
+    TopNavVariant["None"] = "none";
+    TopNavVariant["Tiny"] = "tiny";
+    TopNavVariant["Dark"] = "dark";
+    TopNavVariant["DarkStacked"] = "stacked";
+    TopNavVariant["Mobile"] = "mobile";
+    return TopNavVariant;
+}(TopNavVariant || {});
+const topBarHeights = {
+    ["none"]: 0,
+    ["tiny"]: 48,
+    ["dark"]: 48,
+    ["stacked"]: 80,
+    ["mobile"]: 72
+};
+const useTopNavVariant = (hasTopBar, isMobile, isLeftNav, hasTopCenterContent)=>{
+    if (!hasTopBar) {
+        return "none";
+    }
+    if (isMobile) {
+        return "mobile";
+    }
+    if (isLeftNav) {
+        return "tiny";
+    }
+    return hasTopCenterContent ? "stacked" : "dark";
+};
+function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, headerFixed, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop }) {
     const breakpoint = useTitanBreakpoint();
     const context = useMemo(()=>({
             NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
@@ -46,15 +73,11 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
     const view = useAppearance(appearance);
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [offsetTopStyles, setOffsetTopStyles] = useState({});
-    const updateIndicatorsHeight = useCallback((offset)=>{
-        setOffsetTopStyles({
-            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`
-        });
-    }, []);
+    const [headerHeight] = useState(0);
+    const [headerFixedHeight, setHeaderFixedHeight] = useState(0);
     const isMobile = breakpoint.isMobile;
     const hasSideBar = !contentOnly && (navVariant === 'left' || navVariant === 'top' && isMobile) && (!!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) || !!(sideTop === null || sideTop === void 0 ? void 0 : sideTop.length));
-    const hasTopBar = !contentOnly;
+    const topBarVariant = useTopNavVariant(!contentOnly, isMobile, navVariant === 'left', !!top);
     useEffect(()=>{
         if (view.isAnvil1) {
             const bodyClassName = 'of-hidden-i';
@@ -155,17 +178,22 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
         minContentWidth,
         breakpoint.width
     ]);
-    const contentStyles = useMemo(()=>{
-        if (view.isAnvil2 || view.isLegacy) {
-            return offsetTopStyles;
-        }
+    const layoutStyles = useMemo(()=>{
+        var _topBarHeights_topBarVariant;
+        const topHeight = (_topBarHeights_topBarVariant = topBarHeights[topBarVariant]) !== null && _topBarHeights_topBarVariant !== void 0 ? _topBarHeights_topBarVariant : 0;
+        return {
+            '--nav-top-height': `${topHeight}px`,
+            '--nav-offset-top': `${topHeight + headerFixedHeight}px`,
+            '--content-offset-top': `${topHeight + headerFixedHeight + headerHeight}px`
+        };
     }, [
-        view,
-        offsetTopStyles
+        topBarVariant,
+        headerFixedHeight,
+        headerHeight
     ]);
     const layoutClass = view.isLegacy ? Styles.layoutLegacy : view.isAnvil1 ? Styles.layoutAnvil1 : Styles.layoutAnvil2;
     const burgerProps = useMemo(()=>{
-        if (!hasTopBar) {
+        if (topBarVariant === "none") {
             return undefined;
         }
         if (isMobile) {
@@ -187,7 +215,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
         return undefined;
     }, [
         isMobile,
-        hasTopBar,
+        topBarVariant,
         navVariant,
         state === null || state === void 0 ? void 0 : state.navCollapsed,
         onBurgerClick,
@@ -200,16 +228,16 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
             value: "unset",
             children: /*#__PURE__*/ _jsxs("div", {
                 id: id,
-                className: classNames(Styles.layout, isMobile ? Styles.layoutMobile : Styles.layoutDesktop, hasTopBar && (navVariant === 'left' || !top ? Styles.layoutTopLight : Styles.layoutTopNav), {
+                className: classNames(Styles.layout, !isMobile && Styles.layoutDesktop, {
                     [Styles.layoutNavSlim]: !isMobile && hasSideBar && (state === null || state === void 0 ? void 0 : state.navCollapsed),
                     [Styles.layoutNavWide]: !isMobile && hasSideBar && !(state === null || state === void 0 ? void 0 : state.navCollapsed)
                 }, layoutClass),
-                style: contentStyles,
+                style: layoutStyles,
                 children: [
-                    view.isSequent && /*#__PURE__*/ _jsx("div", {
+                    /*#__PURE__*/ _jsx("div", {
                         className: Styles.topPlaceholder
                     }),
-                    hasTopBar && (navVariant === 'left' ? /*#__PURE__*/ _jsx(LayoutHeader, {
+                    topBarVariant === "tiny" ? /*#__PURE__*/ _jsx(LayoutHeader, {
                         className: Styles.top,
                         variant: "light",
                         logo: logo,
@@ -224,7 +252,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                         }),
                         isMobile: isMobile,
                         burger: burgerProps
-                    }) : /*#__PURE__*/ _jsx(LayoutHeaderDark, {
+                    }) : topBarVariant !== "none" ? /*#__PURE__*/ _jsx(LayoutHeaderDark, {
                         className: Styles.top,
                         logo: logo,
                         profile: isMobile ? undefined : profile,
@@ -240,7 +268,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                         burger: burgerProps,
                         navigationMainItems: navigationMainItems,
                         navigationOverflowItems: navigationOverflowItems
-                    })),
+                    }) : null,
                     hasSideBar && /*#__PURE__*/ _jsx(NotificationsContextProvider, {
                         children: /*#__PURE__*/ _jsx(LayoutSidebar, {
                             className: Styles.side,
@@ -271,8 +299,15 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
                             }) : undefined
                         })
                     }),
-                    view.isSequent && /*#__PURE__*/ _jsx(TitanLayoutHeaderObserved, {
-                        heightChange: updateIndicatorsHeight,
+                    !!headerFixed && /*#__PURE__*/ _jsx(TitanLayoutHeaderObserved, {
+                        heightChange: setHeaderFixedHeight,
+                        className: Styles.contentFixedHeader,
+                        "data-cy": "layout-content-fixed-header",
+                        children: headerFixed
+                    }),
+                    !!header && view.isSequent && /*#__PURE__*/ _jsx("div", {
+                        className: Styles.contentHeader,
+                        "data-cy": "layout-content-header",
                         children: header
                     }),
                     view.isAnvil1 ? /*#__PURE__*/ _jsx(LayoutContentAnvil1, {
@@ -288,7 +323,7 @@ function TitanLayoutComponent({ appearance = 'anvil2', navVariant = 'left', id,
         })
     });
 }
-const TitanLayoutHeaderObserved = ({ children, heightChange })=>{
+const TitanLayoutHeaderObserved = ({ children, heightChange, ...rest })=>{
     const ref = useRef(null);
     useEffect(()=>{
         if (ref.current) {
@@ -314,9 +349,8 @@ const TitanLayoutHeaderObserved = ({ children, heightChange })=>{
         heightChange
     ]);
     return /*#__PURE__*/ _jsx("div", {
+        ...rest,
         ref: ref,
-        className: Styles.contentHeader,
-        "data-cy": "layout-content-header",
         children: children
     });
 };

package/dist/components/titan-layout/titan-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nfunction TitanLayoutComponent({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n    const updateIndicatorsHeight = useCallback((offset: number) => {\n        setOffsetTopStyles({\n            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n        });\n    }, []);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const hasTopBar = !contentOnly;\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const contentStyles = useMemo(() => {\n        if (view.isAnvil2 || view.isLegacy) {\n            return offsetTopStyles;\n        }\n    }, [view, offsetTopStyles]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\n\n    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {\n        if (!hasTopBar) {\n            return undefined;\n        }\n\n        if (isMobile) {\n            return {\n                onClick: onBurgerClick,\n                tag: { value: hasNotifications || hasMenuNotifications },\n            };\n        }\n\n        if (navVariant === 'left') {\n            return {\n                'onClick': onBurgerClick,\n                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',\n                'data-pendo': 'navigation-left-options',\n                'data-cy': 'navigation-left-options',\n            };\n        }\n\n        return undefined;\n    }, [\n        isMobile,\n        hasTopBar,\n        navVariant,\n        state?.navCollapsed,\n        onBurgerClick,\n        hasNotifications,\n        hasMenuNotifications,\n    ]);\n\n    return (\n        <LayoutContext.Provider value={context}>\n            <LayoutPlacementContext.Provider value=\"unset\">\n                <div\n                    id={id}\n                    className={classNames(\n                        Styles.layout,\n                        isMobile ? Styles.layoutMobile : Styles.layoutDesktop,\n                        hasTopBar &&\n                            (navVariant === 'left' || !top\n                                ? Styles.layoutTopLight\n                                : Styles.layoutTopNav),\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={contentStyles}\n                >\n                    {view.isSequent && <div className={Styles.topPlaceholder} />}\n                    {hasTopBar &&\n                        (navVariant === 'left' ? (\n                            <LayoutHeader\n                                className={Styles.top}\n                                variant=\"light\"\n                                logo={logo}\n                                profile={isMobile ? undefined : profile}\n                                center={top}\n                                rightText={isMobile ? undefined : extraText}\n                                right={\n                                    <Fragment>\n                                        {extraLinksTop}\n                                        {!isMobile && extraLinks}\n                                    </Fragment>\n                                }\n                                isMobile={isMobile}\n                                burger={burgerProps}\n                            />\n                        ) : (\n                            <LayoutHeaderDark\n                                className={Styles.top}\n                                logo={logo}\n                                profile={isMobile ? undefined : profile}\n                                center={top}\n                                rightText={isMobile ? undefined : extraText}\n                                right={\n                                    <Fragment>\n                                        {extraLinksTop}\n                                        {!isMobile && extraLinks}\n                                    </Fragment>\n                                }\n                                isMobile={isMobile}\n                                burger={burgerProps}\n                                navigationMainItems={navigationMainItems}\n                                navigationOverflowItems={navigationOverflowItems}\n                            />\n                        ))}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {view.isSequent && (\n                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n                            {header}\n                        </TitanLayoutHeaderObserved>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    children: ReactNode;\n    heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (ref.current) {\n            const updatePosition = () => {\n                if (ref.current && heightChange) {\n                    const pos = ref.current.getBoundingClientRect();\n                    heightChange(pos.height);\n                }\n            };\n\n            const observer = new ResizeObserver(updatePosition);\n            observer.observe(ref.current);\n\n            updatePosition();\n            return () => observer.disconnect();\n        }\n    }, [heightChange]);\n\n    useEffect(() => {\n        return () => {\n            heightChange?.(0);\n        };\n    }, [heightChange]);\n    return (\n        <div ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\n            {children}\n        </div>\n    );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n    return (\n        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n            {children}\n        </div>\n    );\n};\n\nconst LayoutContentAnvil1: FC<{\n    children: ReactNode;\n    header?: ReactNode;\n    minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n        }),\n        [minWidth]\n    );\n\n    return (\n        <Fragment>\n            <TitanLayoutHeader>{header}</TitanLayoutHeader>\n            <div\n                className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n                data-cy=\"layout-content\"\n            >\n                <div\n                    className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n                    style={innerContentStyles}\n                >\n                    {children}\n                </div>\n            </div>\n        </Fragment>\n    );\n};\n\nconst LayoutContentLegacy: FC<{\n    children: ReactNode;\n    minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            position: 'relative',\n            minWidth: `${minWidth}px`,\n        }),\n        [minWidth]\n    );\n\n    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","burgerProps","onClick","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","burger","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n    CSSProperties,\n    ComponentPropsWithoutRef,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n    LayoutContext,\n    LayoutPlacementContext,\n    TitanLayoutContextType,\n    TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n    /** layout appearance */\n    appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n    /** layout navigation variant (left by default) */\n    navVariant?: 'left' | 'top';\n\n    /** layout's content */\n    children?: ReactNode;\n\n    /** show only content without side and top bars */\n    contentOnly?: boolean;\n\n    /** component used for navigation */\n    navigationComponent?: FC<NavLinkComponentProps>;\n\n    /** data for main navigation links */\n    navigationMainItems?: NavigationItemData[];\n\n    /** data for overflow navigation links (used only with top variant) */\n    navigationOverflowItems?: NavigationItemData[];\n\n    /** logo props */\n    logo?: TitanLayoutLogoProps;\n\n    /** layout state */\n    state?: TitanLayoutState;\n    /** layout state change handler */\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    /** content header content */\n    header?: ReactElement;\n\n    /** content header fixed (stocky to top) content */\n    headerFixed?: ReactElement;\n\n    /** layout header content (center) */\n    top?: ReactElement;\n\n    /** top links for side navigation */\n    sideTop?: ReactElement[];\n\n    /**\n     * profile element for layout\n     * @see ProfileDropdown\n     */\n    profile?: ReactElement;\n\n    /**\n     * extra links for layout header\n     * shown in side nav footer on mobile\n     */\n    extraLinks?: ReactElement;\n\n    /**\n     * fixed extra links for layout header\n     * shown in header on mobile as well\n     */\n    extraLinksTop?: ReactElement;\n\n    /**\n     * text shown in layout's header\n     * shown in side nav footer on mobile\n     */\n    extraText?: string;\n\n    /**\n     * minimal width set for content area\n     * used for pages that aren't adopted to mobile\n     */\n    minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n    styles: {\n        popoverContent: {\n            '--background-color-strong': '#24323C',\n            'color': 'var(--color-white)',\n        } as CSSProperties,\n    },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n    useMemo(() => {\n        const isLegacy = appearance === 'legacy';\n        const isAnvil1 = appearance === 'anvil1';\n        const isAnvil2 = appearance === 'anvil2';\n\n        return {\n            isLegacy,\n            isAnvil1,\n            isAnvil2,\n            isSequent: isLegacy || isAnvil2,\n        };\n    }, [appearance]);\n\nenum TopNavVariant {\n    None = 'none',\n    Tiny = 'tiny',\n    Dark = 'dark',\n    DarkStacked = 'stacked',\n    Mobile = 'mobile',\n}\n\nconst topBarHeights: Record<TopNavVariant, number> = {\n    [TopNavVariant.None]: 0,\n    [TopNavVariant.Tiny]: 48,\n    [TopNavVariant.Dark]: 48,\n    [TopNavVariant.DarkStacked]: 80,\n    [TopNavVariant.Mobile]: 72,\n};\n\nconst useTopNavVariant = (\n    hasTopBar: boolean,\n    isMobile: boolean,\n    isLeftNav: boolean,\n    hasTopCenterContent: boolean\n) => {\n    if (!hasTopBar) {\n        return TopNavVariant.None;\n    }\n\n    if (isMobile) {\n        return TopNavVariant.Mobile;\n    }\n\n    if (isLeftNav) {\n        return TopNavVariant.Tiny;\n    }\n\n    return hasTopCenterContent ? TopNavVariant.DarkStacked : TopNavVariant.Dark;\n};\n\nfunction TitanLayoutComponent({\n    appearance = 'anvil2',\n    navVariant = 'left',\n    id,\n    children,\n    contentOnly,\n    navigationComponent,\n    header,\n    headerFixed,\n    top,\n    profile,\n    state,\n    logo,\n    onStateChange,\n    navigationMainItems,\n    navigationOverflowItems,\n    extraLinks,\n    extraLinksTop,\n    extraText,\n    minContentWidth,\n    sideTop,\n}: TitanLayoutProps) {\n    const breakpoint = useTitanBreakpoint();\n    const context: TitanLayoutContextType = useMemo(\n        () => ({\n            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n            breakpoint,\n            isTitanLayout: true,\n            sidebar: defaultSidebarContext,\n        }),\n        [navigationComponent, breakpoint]\n    );\n    const view = useAppearance(appearance);\n    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n    const [headerHeight] = useState(0);\n    const [headerFixedHeight, setHeaderFixedHeight] = useState(0);\n\n    const isMobile = breakpoint.isMobile;\n    const hasSideBar =\n        !contentOnly &&\n        (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n        (!!navigationMainItems?.length || !!sideTop?.length);\n    const topBarVariant = useTopNavVariant(!contentOnly, isMobile, navVariant === 'left', !!top);\n\n    useEffect(() => {\n        if (view.isAnvil1) {\n            const bodyClassName = 'of-hidden-i';\n            document.body.classList.add(bodyClassName);\n            return () => document.body.classList.remove(bodyClassName);\n        }\n    }, [view.isAnvil1]);\n\n    const onBurgerClick = useCallback(\n        (e: MouseEvent<never>) => {\n            if (isMobile) {\n                setMobileDrawerOpened(true);\n            } else {\n                onStateChange?.({ navCollapsed: !state?.navCollapsed });\n            }\n\n            e.stopPropagation();\n        },\n        [isMobile, state?.navCollapsed, onStateChange]\n    );\n\n    const onBarExpandChange = useCallback(\n        (expanded: boolean) => {\n            if (isMobile) {\n                setMobileDrawerOpened(false);\n            } else {\n                onStateChange?.({ navCollapsed: !expanded });\n            }\n        },\n        [onStateChange, isMobile]\n    );\n    const onSubmenuExpandChange = useCallback(\n        (id: string, expanded: boolean, force: boolean) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenusExpanded: [\n                    ...(force ? [] : (state?.submenusExpanded ?? []).filter(i => i !== id)),\n                    ...(expanded ? [id] : []),\n                ],\n            });\n        },\n        [state, onStateChange]\n    );\n    const sidebarNavItems = useMemo(() => {\n        if (!hasSideBar) {\n            return undefined;\n        }\n\n        if (navVariant === 'left') {\n            return navigationMainItems;\n        }\n\n        return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n    }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n    const hasMenuNotifications = useMemo(() => {\n        try {\n            return (\n                sidebarNavItems?.some(item => {\n                    if (item.counter || item.tag?.value) {\n                        return true;\n                    } else if (item.submenu) {\n                        return item.submenu.groups.some(group =>\n                            group.links.some(link => !!link.counter || !!link.tag?.value)\n                        );\n                    }\n                    return false;\n                }) ?? false\n            );\n        } catch {\n            return false;\n        }\n    }, [sidebarNavItems]);\n\n    const limitContentWidth = useMemo(() => {\n        if (view.isAnvil2 || !minContentWidth) {\n            return undefined;\n        }\n\n        if (breakpoint.width < minContentWidth) {\n            return minContentWidth;\n        }\n    }, [view, minContentWidth, breakpoint.width]);\n\n    const layoutStyles = useMemo(() => {\n        const topHeight = topBarHeights[topBarVariant] ?? 0;\n\n        return {\n            '--nav-top-height': `${topHeight}px`,\n            '--nav-offset-top': `${topHeight + headerFixedHeight}px`,\n            '--content-offset-top': `${topHeight + headerFixedHeight + headerHeight}px`,\n        } as CSSProperties;\n    }, [topBarVariant, headerFixedHeight, headerHeight]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\n\n    const burgerProps: LayoutHeaderProps['burger'] = useMemo(() => {\n        if (topBarVariant === TopNavVariant.None) {\n            return undefined;\n        }\n\n        if (isMobile) {\n            return {\n                onClick: onBurgerClick,\n                tag: { value: hasNotifications || hasMenuNotifications },\n            };\n        }\n\n        if (navVariant === 'left') {\n            return {\n                'onClick': onBurgerClick,\n                'tooltip': state?.navCollapsed ? 'Expand' : 'Collapse',\n                'data-pendo': 'navigation-left-options',\n                'data-cy': 'navigation-left-options',\n            };\n        }\n\n        return undefined;\n    }, [\n        isMobile,\n        topBarVariant,\n        navVariant,\n        state?.navCollapsed,\n        onBurgerClick,\n        hasNotifications,\n        hasMenuNotifications,\n    ]);\n\n    return (\n        <LayoutContext.Provider value={context}>\n            <LayoutPlacementContext.Provider value=\"unset\">\n                <div\n                    id={id}\n                    className={classNames(\n                        Styles.layout,\n                        !isMobile && Styles.layoutDesktop,\n                        {\n                            [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n                            [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n                        },\n                        layoutClass\n                    )}\n                    style={layoutStyles}\n                >\n                    <div className={Styles.topPlaceholder} />\n                    {topBarVariant === TopNavVariant.Tiny ? (\n                        <LayoutHeader\n                            className={Styles.top}\n                            variant=\"light\"\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                        />\n                    ) : topBarVariant !== TopNavVariant.None ? (\n                        <LayoutHeaderDark\n                            className={Styles.top}\n                            logo={logo}\n                            profile={isMobile ? undefined : profile}\n                            center={top}\n                            rightText={isMobile ? undefined : extraText}\n                            right={\n                                <Fragment>\n                                    {extraLinksTop}\n                                    {!isMobile && extraLinks}\n                                </Fragment>\n                            }\n                            isMobile={isMobile}\n                            burger={burgerProps}\n                            navigationMainItems={navigationMainItems}\n                            navigationOverflowItems={navigationOverflowItems}\n                        />\n                    ) : null}\n\n                    {hasSideBar && (\n                        <NotificationsContextProvider>\n                            <LayoutSidebar\n                                className={Styles.side}\n                                mobile={breakpoint.isMobile}\n                                barExpanded={!state?.navCollapsed}\n                                onBarExpandChange={onBarExpandChange}\n                                submenusExpanded={state?.submenusExpanded}\n                                onSubmenuExpandChange={onSubmenuExpandChange}\n                                drawerOpened={mobileDrawerOpened}\n                                onDrawerOpenChange={setMobileDrawerOpened}\n                                top={sideTop}\n                                mainItems={sidebarNavItems}\n                                navigationComponent={context.NavigationComponent}\n                                bottom={\n                                    isMobile ? (\n                                        <Fragment>\n                                            {profile}\n                                            {extraLinks}\n                                            {!!extraText && (\n                                                <InternalSideNavigationTrigger\n                                                    id=\"--extra-text\"\n                                                    title={extraText}\n                                                    isActive={undefined}\n                                                    icon={undefined}\n                                                    iconActive={undefined}\n                                                    tag={undefined}\n                                                    className={undefined}\n                                                />\n                                            )}\n                                        </Fragment>\n                                    ) : undefined\n                                }\n                            />\n                        </NotificationsContextProvider>\n                    )}\n\n                    {!!headerFixed && (\n                        <TitanLayoutHeaderObserved\n                            heightChange={setHeaderFixedHeight}\n                            className={Styles.contentFixedHeader}\n                            data-cy=\"layout-content-fixed-header\"\n                        >\n                            {headerFixed}\n                        </TitanLayoutHeaderObserved>\n                    )}\n\n                    {!!header && view.isSequent && (\n                        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n                            {header}\n                        </div>\n                    )}\n                    {view.isAnvil1 ? (\n                        <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentAnvil1>\n                    ) : view.isLegacy ? (\n                        <LayoutContentLegacy minWidth={limitContentWidth}>\n                            {children}\n                        </LayoutContentLegacy>\n                    ) : (\n                        children\n                    )}\n                </div>\n            </LayoutPlacementContext.Provider>\n        </LayoutContext.Provider>\n    );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n    'children': ReactNode;\n    'className'?: string;\n    'data-cy'?: string;\n    heightChange?(value: number): void;\n}> = ({ children, heightChange, ...rest }) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (ref.current) {\n            const updatePosition = () => {\n                if (ref.current && heightChange) {\n                    const pos = ref.current.getBoundingClientRect();\n                    heightChange(pos.height);\n                }\n            };\n\n            const observer = new ResizeObserver(updatePosition);\n            observer.observe(ref.current);\n\n            updatePosition();\n            return () => observer.disconnect();\n        }\n    }, [heightChange]);\n\n    useEffect(() => {\n        return () => {\n            heightChange?.(0);\n        };\n    }, [heightChange]);\n    return (\n        <div {...rest} ref={ref}>\n            {children}\n        </div>\n    );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n    return (\n        <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n            {children}\n        </div>\n    );\n};\n\nconst LayoutContentAnvil1: FC<{\n    children: ReactNode;\n    header?: ReactNode;\n    minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n        }),\n        [minWidth]\n    );\n\n    return (\n        <Fragment>\n            <TitanLayoutHeader>{header}</TitanLayoutHeader>\n            <div\n                className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n                data-cy=\"layout-content\"\n            >\n                <div\n                    className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n                    style={innerContentStyles}\n                >\n                    {children}\n                </div>\n            </div>\n        </Fragment>\n    );\n};\n\nconst LayoutContentLegacy: FC<{\n    children: ReactNode;\n    minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n    const innerContentStyles: CSSProperties = useMemo(\n        () => ({\n            position: 'relative',\n            minWidth: `${minWidth}px`,\n        }),\n        [minWidth]\n    );\n\n    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutLink,\n    Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TopNavVariant","topBarHeights","useTopNavVariant","hasTopBar","isMobile","isLeftNav","hasTopCenterContent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","headerFixed","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","headerHeight","headerFixedHeight","setHeaderFixedHeight","hasSideBar","length","topBarVariant","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","force","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","layoutStyles","topHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","burgerProps","onClick","Provider","div","className","layout","layoutDesktop","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","burger","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","contentFixedHeader","data-cy","contentHeader","LayoutContentAnvil1","minWidth","LayoutContentLegacy","rest","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}

package/dist/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,20 @@
         left: 0;
         right: 0;
     }
+
+    .content-fixed-header {
+        position: fixed;
+        top: var(--nav-top-height);
+        left: var(--nav-offset-left);
+        right: 0;
+        z-index: 801;
+    }
 }
 
 @media print {
     .layout {
+        --nav-top-height: 0px !important;
+        --nav-offset-top: 0px !important;
         --nav-offset-left: 0px !important;
         --nav-offset-right: 0px !important;
 

package/dist/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/dist/test/titan-layout.d.ts

@@ -1,6 +1,7 @@
 import { TitanLayoutProps } from '../components/titan-layout';
 export interface LayoutContentArgs {
     header: boolean;
+    headerFixed: boolean;
     sideTop: boolean;
     extraText: boolean;
     search: boolean;

package/dist/test/titan-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../src/test/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,QAAO,iBAUhC,CAAC;AAGH,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,CAAC,gBAAgB,CAAC,MAAM,OAAO,GAAG,4CAItF,CAAC;AACF,eAAO,MAAM,qBAAqB,iCAAwC,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../src/test/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,QAAO,iBAWhC,CAAC;AAGH,eAAO,MAAM,sBAAsB,GAAI,OAAO,OAAO,CAAC,gBAAgB,CAAC,MAAM,OAAO,GAAG,4CAItF,CAAC;AACF,eAAO,MAAM,qBAAqB,iCAAwC,CAAC"}

package/dist/test/titan-layout.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const getDefaultArgs = ()=>({
         header: true,
+        headerFixed: true,
         sideTop: true,
         extraText: true,
         search: true,

package/dist/test/titan-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/titan-layout.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { TitanLayoutProps } from '../components/titan-layout';\n\nexport interface LayoutContentArgs {\n    header: boolean;\n    sideTop: boolean;\n    extraText: boolean;\n    search: boolean;\n    longContent: boolean;\n    wideContent: boolean;\n    minWidth: boolean;\n    emptyNav: boolean;\n    overflowItems: boolean;\n}\n\nexport const getDefaultArgs = (): LayoutContentArgs => ({\n    header: true,\n    sideTop: true,\n    extraText: true,\n    search: true,\n    longContent: true,\n    wideContent: false,\n    minWidth: false,\n    emptyNav: false,\n    overflowItems: true,\n});\n\nconst DefaultPropsContext = createContext<Partial<TitanLayoutProps>>({});\nexport const withDefaultLayoutProps = (props: Partial<TitanLayoutProps>) => (Story: any) => (\n    <DefaultPropsContext.Provider value={props}>\n        <Story />\n    </DefaultPropsContext.Provider>\n);\nexport const useDefaultLayoutProps = () => useContext(DefaultPropsContext);\n"],"names":["createContext","useContext","getDefaultArgs","header","sideTop","extraText","search","longContent","wideContent","minWidth","emptyNav","overflowItems","DefaultPropsContext","withDefaultLayoutProps","props","Story","Provider","value","useDefaultLayoutProps"],"mappings":";AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAelD,OAAO,MAAMC,iBAAiB,IAA0B,CAAA;QACpDC,QAAQ;QACRC,SAAS;QACTC,WAAW;QACXC,QAAQ;QACRC,aAAa;QACbC,aAAa;QACbC,UAAU;QACVC,UAAU;QACVC,eAAe;IACnB,CAAA,EAAG;AAEH,MAAMC,oCAAsBZ,cAAyC,CAAC;AACtE,OAAO,MAAMa,yBAAyB,CAACC,QAAqC,CAACC,sBACzE,KAACH,oBAAoBI,QAAQ;YAACC,OAAOH;sBACjC,cAAA,KAACC;WAEP;AACF,OAAO,MAAMG,wBAAwB,IAAMjB,WAAWW,qBAAqB"}
+{"version":3,"sources":["../../src/test/titan-layout.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { TitanLayoutProps } from '../components/titan-layout';\n\nexport interface LayoutContentArgs {\n    header: boolean;\n    headerFixed: boolean;\n    sideTop: boolean;\n    extraText: boolean;\n    search: boolean;\n    longContent: boolean;\n    wideContent: boolean;\n    minWidth: boolean;\n    emptyNav: boolean;\n    overflowItems: boolean;\n}\n\nexport const getDefaultArgs = (): LayoutContentArgs => ({\n    header: true,\n    headerFixed: true,\n    sideTop: true,\n    extraText: true,\n    search: true,\n    longContent: true,\n    wideContent: false,\n    minWidth: false,\n    emptyNav: false,\n    overflowItems: true,\n});\n\nconst DefaultPropsContext = createContext<Partial<TitanLayoutProps>>({});\nexport const withDefaultLayoutProps = (props: Partial<TitanLayoutProps>) => (Story: any) => (\n    <DefaultPropsContext.Provider value={props}>\n        <Story />\n    </DefaultPropsContext.Provider>\n);\nexport const useDefaultLayoutProps = () => useContext(DefaultPropsContext);\n"],"names":["createContext","useContext","getDefaultArgs","header","headerFixed","sideTop","extraText","search","longContent","wideContent","minWidth","emptyNav","overflowItems","DefaultPropsContext","withDefaultLayoutProps","props","Story","Provider","value","useDefaultLayoutProps"],"mappings":";AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAgBlD,OAAO,MAAMC,iBAAiB,IAA0B,CAAA;QACpDC,QAAQ;QACRC,aAAa;QACbC,SAAS;QACTC,WAAW;QACXC,QAAQ;QACRC,aAAa;QACbC,aAAa;QACbC,UAAU;QACVC,UAAU;QACVC,eAAe;IACnB,CAAA,EAAG;AAEH,MAAMC,oCAAsBb,cAAyC,CAAC;AACtE,OAAO,MAAMc,yBAAyB,CAACC,QAAqC,CAACC,sBACzE,KAACH,oBAAoBI,QAAQ;YAACC,OAAOH;sBACjC,cAAA,KAACC;WAEP;AACF,OAAO,MAAMG,wBAAwB,IAAMlB,WAAWY,qBAAqB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "13.1.4",
+    "version": "13.2.0-canary.270.41c771f.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "34dcba243deb5c93ca126328ccd5d63fc9248403"
+    "gitHead": "41c771f48874df63f3b15dd35343ba2fc15d578f"
 }

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

@@ -24,7 +24,7 @@
 .header {
     --nav-top-content-height: 32px;
 
-    height: var(--nav-offset-top);
+    height: var(--nav-top-height);
     display: flex;
     justify-content: space-between;
 

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

@@ -176,7 +176,6 @@ const ContentHeader = () => {
 
     return (
         <Fragment>
-            <Announcement title="Some info" status="info" />
             <Announcement title="Some warning" status="warning" />
             <div
                 className="d-f justify-content-center align-items-center bg-purple-100-i"
@@ -192,6 +191,9 @@ const ContentHeader = () => {
         </Fragment>
     );
 };
+const ContentHeaderFixed = () => {
+    return <Announcement title="Some info" status="info" />;
+};
 const SearchBar = () => (
     <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
 );
@@ -210,6 +212,7 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
         profile,
         top: args.search ? <SearchBar /> : undefined,
         header: args.header ? <ContentHeader /> : undefined,
+        headerFixed: args.headerFixed ? <ContentHeaderFixed /> : undefined,
 
         logo: { title: true },
 

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,20 @@
         left: 0;
         right: 0;
     }
+
+    .content-fixed-header {
+        position: fixed;
+        top: var(--nav-top-height);
+        left: var(--nav-offset-left);
+        right: 0;
+        z-index: 801;
+    }
 }
 
 @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] = 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,57 +349,52 @@ 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>
@@ -397,11 +433,21 @@ 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} data-cy="layout-content-header">
+                            {header}
+                        </div>
+                    )}
                     {view.isAnvil1 ? (
                         <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
                             {children}
@@ -420,9 +466,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 +496,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/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,