@servicetitan/navigation 12.0.2 → 12.0.4-canary.267.266c960.0

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

@@ -41,7 +41,7 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
                 onBurgerClick: onBurgerClick,
                 "data-cy": "header-navigation-top"
             }),
-            !isMobile && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
+            !isMobile && !!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
                 className: Styles.headerStackedNav,
                 mainItems: navigationMainItems,
                 overflowItems: navigationOverflowItems

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    onBurgerClick,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <InternalLayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        {...item}\n                        label={item.title}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","length","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","navigationComponent","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n    const [, setTick] = useState(0);\n    return useCallback(() => {\n        setTick(tick => tick + 1);\n    }, []);\n}\n\nenum MinimizedState {\n    Calculating,\n    Minimized,\n    Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n    navigationMainItems?: NavigationItemData[];\n    navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n    className,\n    isMobile,\n    navigationMainItems,\n    navigationOverflowItems,\n    hasNotifications,\n    onBurgerClick,\n    logo,\n    profile,\n    right,\n    rightText,\n    rightClassName,\n    center,\n    centerClassName,\n    ...rest\n}) => {\n    return center ? (\n        <div\n            className={classNames(Styles.headerStacked, className)}\n            data-cy=\"header-navigation\"\n            {...rest}\n        >\n            <LayoutHeader\n                variant=\"dark\"\n                right={right}\n                rightText={rightText}\n                rightClassName={rightClassName}\n                center={center}\n                centerClassName={centerClassName}\n                isMobile={isMobile}\n                hasNotifications={hasNotifications}\n                logo={logo}\n                profile={profile}\n                onBurgerClick={onBurgerClick}\n                data-cy=\"header-navigation-top\"\n            />\n\n            {!isMobile && !!navigationMainItems?.length && (\n                <LayoutHeaderNav\n                    className={Styles.headerStackedNav}\n                    mainItems={navigationMainItems}\n                    overflowItems={navigationOverflowItems}\n                />\n            )}\n        </div>\n    ) : (\n        <LayoutHeader\n            variant=\"dark\"\n            className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n            right={right}\n            rightText={rightText}\n            rightClassName={rightClassName}\n            center={\n                isMobile ? undefined : (\n                    <LayoutHeaderNav\n                        mainItems={navigationMainItems}\n                        overflowItems={navigationOverflowItems}\n                    />\n                )\n            }\n            centerClassName={centerClassName}\n            isMobile={isMobile}\n            hasNotifications={hasNotifications}\n            logo={logo}\n            profile={profile}\n            onBurgerClick={onBurgerClick}\n            {...rest}\n        />\n    );\n};\n\ninterface LayoutHeaderNavProps {\n    className?: string;\n    mainItems?: NavigationItemData[];\n    overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const navigationRef = useRef<HTMLDivElement>(null);\n    const forceUpdate = useForceUpdate();\n    const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n    const { NavigationComponent } = useTitanLayoutContext();\n\n    useEffect(() => {\n        const handleResize = () => {\n            setMinimized(MinimizedState.Calculating);\n            forceUpdate();\n        };\n\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, [forceUpdate]);\n\n    const updateIsMinimized = () => {\n        if (containerRef.current && navigationRef.current) {\n            const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n            if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n                setMinimized(MinimizedState.Minimized);\n            } else if (minimized === MinimizedState.Calculating) {\n                setMinimized(MinimizedState.Full);\n            }\n        }\n    };\n\n    useEffect(() => {\n        updateIsMinimized();\n    });\n\n    useEffect(() => {\n        setMinimized(MinimizedState.Calculating);\n        forceUpdate();\n    }, [forceUpdate]);\n\n    const isMinimized = minimized === MinimizedState.Minimized;\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(Styles.headerNavigationWrapper, className, {\n                [Styles.calculating]: minimized === MinimizedState.Calculating,\n            })}\n            data-cy=\"navigation-items\"\n        >\n            <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n                {mainItems?.map(item =>\n                    withTooltip(\n                        <InternalLayoutHeaderNavigationLink\n                            {...item}\n                            label={isMinimized ? undefined : item.title}\n                            key={item.id}\n                            navigationComponent={NavigationComponent}\n                        />,\n                        isMinimized ? item.title : undefined,\n                        { key: item.id }\n                    )\n                )}\n            </div>\n            {!!overflowItems?.length && (\n                <LayoutHeaderNavOverflow\n                    items={overflowItems}\n                    navigationComponent={NavigationComponent}\n                />\n            )}\n        </div>\n    );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n    <ButtonCompound\n        {...props}\n        className={Styles.headerNavigationOverflowTrigger}\n        data-cy=\"navigation-overflow-trigger\"\n    >\n        <Icon svg={SvgMoreVert} size=\"medium\" />\n    </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n    {\n        items: NavigationItemData[];\n    } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n    return (\n        <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n            <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n                {items.map(item => (\n                    <InternalLayoutHeaderNavigationLink\n                        {...item}\n                        label={item.title}\n                        key={item.id}\n                        navigationComponent={navigationComponent}\n                        isOverflow\n                    />\n                ))}\n            </div>\n        </Menu>\n    );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","label","title","key","id","navigationComponent","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}

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

@@ -225,6 +225,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }

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

@@ -17,13 +17,12 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
-    height: 100vh;
+    height: 100%;
     top: 0;
-    left: -100vh;
+    left: -100vw;
     z-index: 991;
 
     -webkit-transition: width 200ms ease-in-out;

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,EAEF,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;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,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,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyXF,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,EAEF,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;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,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,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA4WF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}

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

@@ -141,23 +141,12 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
         breakpoint.width
     ]);
     const contentStyles = useMemo(()=>{
-        if (view.isAnvil2) {
+        if (view.isAnvil2 || view.isLegacy) {
             return offsetTopStyles;
         }
-        if (view.isLegacy) {
-            return {
-                ...limitContentWidth ? {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: '100vh'
-                } : {},
-                ...offsetTopStyles
-            };
-        }
     }, [
         view,
-        offsetTopStyles,
-        limitContentWidth
+        offsetTopStyles
     ]);
     const layoutClass = view.isLegacy ? Styles.layoutLegacy : view.isAnvil1 ? Styles.layoutAnvil1 : Styles.layoutAnvil2;
     return /*#__PURE__*/ _jsx(LayoutContext.Provider, {
@@ -330,11 +319,8 @@ const LayoutContentLegacy = ({ children, minWidth })=>{
         minWidth
     ]);
     return /*#__PURE__*/ _jsx("div", {
-        className: minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined,
-        children: /*#__PURE__*/ _jsx("div", {
-            style: minWidth ? innerContentStyles : undefined,
-            children: children
-        })
+        style: minWidth ? innerContentStyles : undefined,
+        children: children
     });
 };
 export const TitanLayout = Object.assign(TitanLayoutComponent, {

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    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 } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\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    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\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\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\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}) => {\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((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\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) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\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) {\n            return offsetTopStyles;\n        }\n\n        if (view.isLegacy) {\n            return {\n                ...(limitContentWidth\n                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }\n                    : {}),\n                ...offsetTopStyles,\n            };\n        }\n    }, [view, offsetTopStyles, limitContentWidth]);\n\n    const layoutClass = view.isLegacy\n        ? Styles.layoutLegacy\n        : view.isAnvil1\n          ? Styles.layoutAnvil1\n          : Styles.layoutAnvil2;\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\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                                submenuExpanded={state?.submenuExpanded}\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                                                    submenuExpanded={undefined}\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={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 (\n        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>\n            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>\n        </div>\n    );\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n    Link: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","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","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","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    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 } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\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    state?: TitanLayoutState;\n    onStateChange?: (state: TitanLayoutState) => void;\n\n    header?: ReactElement;\n    top?: ReactElement;\n    sideTop?: ReactElement[];\n    profile?: ReactElement;\n    extraLinks?: ReactElement;\n    extraLinksTop?: ReactElement;\n    extraText?: string;\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\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\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}) => {\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((e: MouseEvent) => {\n        setMobileDrawerOpened(true);\n        e.stopPropagation();\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) => {\n            onStateChange?.({\n                navCollapsed: state?.navCollapsed ?? false,\n                submenuExpanded: expanded ? id : undefined,\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    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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\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                                hasNotifications={hasNotifications || hasMenuNotifications}\n                                onBurgerClick={onBurgerClick}\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                                submenuExpanded={state?.submenuExpanded}\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                                                    submenuExpanded={undefined}\n                                                    tag={undefined}\n                                                    icon={undefined}\n                                                    iconActive={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: TitanLayoutSidebarLink,\n    Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","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","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,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;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}
+{"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,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;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AAqRF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.2",
+    "version": "12.0.4-canary.267.266c960.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "037d391733c6dd61d96503860e6090881cface0b"
+    "gitHead": "266c960641ef0d45608c1f274a20cf2f52c37173"
 }

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

@@ -65,7 +65,7 @@ export const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({
                 data-cy="header-navigation-top"
             />
 
-            {!isMobile && (
+            {!isMobile && !!navigationMainItems?.length && (
                 <LayoutHeaderNav
                     className={Styles.headerStackedNav}
                     mainItems={navigationMainItems}

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

@@ -225,6 +225,11 @@
 }
 
 .header-dark.header-logo-custom {
+    &.header-desktop .logo-short-wrapper {
+        background-color: @color-white;
+        color: @c-light;
+    }
+
     .burger .navigation-link {
         color: inherit !important;
     }

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

@@ -17,13 +17,12 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
-    height: 100vh;
+    height: 100%;
     top: 0;
-    left: -100vh;
+    left: -100vw;
     z-index: 991;
 
     -webkit-transition: width 200ms ease-in-out;

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

@@ -222,9 +222,17 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
     };
 };
 
-const Content = (args: LayoutContentArgs) => {
+const Content = (args: LayoutContentArgs & { stickyHeader?: boolean }) => {
     return (
         <Fragment>
+            {!!args.stickyHeader && (
+                <div
+                    className="w-100 p-4 bg-white m-l--3 m-t--3"
+                    style={{ position: 'sticky', top: 'var(--nav-offset-top)' }}
+                >
+                    sticky header
+                </div>
+            )}
             <LocationInfo className="m-b-3" />
             <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
@@ -332,7 +340,7 @@ export const TitanLayoutLegacyTopNav = (args: LayoutContentArgs) => (
             className="p-3"
             style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
         >
-            <Content {...args} />
+            <Content {...args} stickyHeader />
         </div>
     </TitanLayout>
 );
@@ -343,7 +351,7 @@ export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
             className="p-3"
             style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
         >
-            <Content {...args} />
+            <Content {...args} stickyHeader />
         </div>
     </TitanLayout>
 );

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

@@ -214,19 +214,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     }, [view, minContentWidth, breakpoint.width]);
 
     const contentStyles = useMemo(() => {
-        if (view.isAnvil2) {
+        if (view.isAnvil2 || view.isLegacy) {
             return offsetTopStyles;
         }
-
-        if (view.isLegacy) {
-            return {
-                ...(limitContentWidth
-                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }
-                    : {}),
-                ...offsetTopStyles,
-            };
-        }
-    }, [view, offsetTopStyles, limitContentWidth]);
+    }, [view, offsetTopStyles]);
 
     const layoutClass = view.isLegacy
         ? Styles.layoutLegacy
@@ -437,11 +428,7 @@ const LayoutContentLegacy: FC<{
         [minWidth]
     );
 
-    return (
-        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>
-            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>
-        </div>
-    );
+    return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {