@servicetitan/navigation 13.0.0-canary.256.b43c6d7.0 → 13.0.0

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

@@ -11,32 +11,45 @@ const WrappedLink = ({ children, isMobile, wrapper: WrapperComponent })=>{
         children: children
     });
 };
-/** Side Navigation menu link */ export function LayoutSidebarLink({ counter, tag, tooltip, wrapper, ...props }) {
+/** Side Navigation menu link */ export function LayoutSidebarLink({ id, to, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tagData = getCounterTag(counter, tag);
-    onNotificationsUpdate(props.id, !!tagData);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-        ...props,
-        navigationComponent: NavigationComponent,
-        submenuExpanded: undefined,
-        tag: tagData
+        id: id,
+        to: to,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest,
+        navigationComponent: NavigationComponent
     });
-    return wrapper && !isMobile ? /*#__PURE__*/ _jsx(WrappedLink, {
+    return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
         isMobile: isMobile,
         wrapper: wrapper,
         children: element
     }) : element;
 }
-/** Side Navigation menu trigger */ export function LayoutSidebarTrigger({ counter, tag, tooltip, wrapper, onClick, ...props }) {
+/** Side Navigation menu trigger */ export function LayoutSidebarTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tagData = getCounterTag(counter, tag);
-    onNotificationsUpdate(props.id, !!tagData);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
-        ...props,
-        submenuExpanded: undefined,
-        tag: tagData
+        id: id,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest
     });
     return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
         isMobile: isMobile,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;\n    isMobile: boolean;\n}> = ({ children, isMobile, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return (\n        <WrapperComponent isMobile={isMobile} context={sidebar}>\n            {children}\n        </WrapperComponent>\n    );\n};\n\n/** Side Navigation menu link */\nexport function LayoutSidebarLink({\n    counter,\n    tag,\n    tooltip,\n    wrapper,\n    ...props\n}: TitanLayoutLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(counter, tag);\n\n    onNotificationsUpdate(props.id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationLink\n            {...props}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n            tag={tagData}\n        />\n    );\n\n    return wrapper && !isMobile ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n\n/** Side Navigation menu trigger */\nexport function LayoutSidebarTrigger({\n    counter,\n    tag,\n    tooltip,\n    wrapper,\n    onClick,\n    ...props\n}: TitanLayoutTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(counter, tag);\n\n    onNotificationsUpdate(props.id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationTrigger {...props} submenuExpanded={undefined} tag={tagData} />\n    );\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","isMobile","wrapper","WrapperComponent","sidebar","context","LayoutSidebarLink","counter","tag","tooltip","props","NavigationComponent","breakpoint","onNotificationsUpdate","tagData","id","element","navigationComponent","submenuExpanded","undefined","LayoutSidebarTrigger","onClick"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAID,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACnD,MAAM,EAAEC,OAAO,EAAE,GAAGT;IACpB,qBACI,KAACQ;QAAiBF,UAAUA;QAAUI,SAASD;kBAC1CJ;;AAGb;AAEA,8BAA8B,GAC9B,OAAO,SAASM,kBAAkB,EAC9BC,OAAO,EACPC,GAAG,EACHC,OAAO,EACPP,OAAO,EACP,GAAGQ,OACgB;IACnB,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEX,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAEkB,qBAAqB,EAAE,GAAGf;IAClC,MAAMgB,UAAUpB,cAAca,SAASC;IAEvCK,sBAAsBH,MAAMK,EAAE,EAAE,CAAC,CAACD;IAElC,MAAME,wBACF,KAACpB;QACI,GAAGc,KAAK;QACTO,qBAAqBN;QACrBO,iBAAiBC;QACjBX,KAAKM;;IAIb,OAAOZ,WAAW,CAACD,yBACf,KAACF;QAAYE,UAAUA;QAAUC,SAASA;kBACrCc;SAGLA;AAER;AAEA,iCAAiC,GACjC,OAAO,SAASI,qBAAqB,EACjCb,OAAO,EACPC,GAAG,EACHC,OAAO,EACPP,OAAO,EACPmB,OAAO,EACP,GAAGX,OACmB;IACtB,MAAM,EACFE,YAAY,EAAEX,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAEkB,qBAAqB,EAAE,GAAGf;IAClC,MAAMgB,UAAUpB,cAAca,SAASC;IAEvCK,sBAAsBH,MAAMK,EAAE,EAAE,CAAC,CAACD;IAElC,MAAME,wBACF,KAACnB;QAA+B,GAAGa,KAAK;QAAEQ,iBAAiBC;QAAWX,KAAKM;;IAE/E,OAAOZ,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCc;SAGLA;AAER"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;\n    isMobile: boolean;\n}> = ({ children, isMobile, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return (\n        <WrapperComponent isMobile={isMobile} context={sidebar}>\n            {children}\n        </WrapperComponent>\n    );\n};\n\n/** Side Navigation menu link */\nexport function LayoutSidebarLink({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationLink\n            id={id}\n            to={to}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n            navigationComponent={NavigationComponent}\n        />\n    );\n\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n\n/** Side Navigation menu trigger */\nexport function LayoutSidebarTrigger({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            id={id}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n        />\n    );\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","isMobile","wrapper","WrapperComponent","sidebar","context","LayoutSidebarLink","id","to","title","isActive","icon","iconActive","counter","tag","className","tooltip","extra","side","rest","NavigationComponent","breakpoint","onNotificationsUpdate","tagData","element","navigationComponent","LayoutSidebarTrigger"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAID,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACnD,MAAM,EAAEC,OAAO,EAAE,GAAGT;IACpB,qBACI,KAACQ;QAAiBF,UAAUA;QAAUI,SAASD;kBAC1CJ;;AAGb;AAEA,8BAA8B,GAC9B,OAAO,SAASM,kBAAkB,EAC9BC,EAAE,EACFC,EAAE,EACFC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACgB;IACnB,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC5B;QACGW,IAAIA;QACJC,IAAIA;QACJC,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;QACRM,qBAAqBL;;IAI7B,OAAOlB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER;AAEA,iCAAiC,GACjC,OAAO,SAASE,qBAAqB,EACjCnB,EAAE,EACFE,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACmB;IACtB,MAAM,EACFE,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC3B;QACGU,IAAIA;QACJE,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;;IAGhB,OAAOjB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER"}

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

@@ -7,7 +7,7 @@ export interface LayoutSidebarProps {
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
-    submenuExpanded: string | undefined;
+    submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4FhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuFhD,CAAC"}

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

@@ -1,17 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
 import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
-import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
-import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
 import classNames from 'classnames';
 import { Children, Fragment, isValidElement, useCallback } from 'react';
 import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
 import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
 import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
-import { withTooltip } from './with-tooltip';
-export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
+export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
     const closeDrawer = ()=>{
         if (mobile) {
             onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
@@ -24,120 +20,90 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded,
                 className: Styles.navDrawerBackdrop,
                 onClick: closeDrawer
             }),
-            /*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsx("div", {
                 className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && drawerOpened && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim), className),
                 "data-cy": "side-navigation",
                 onClick: closeDrawer,
-                children: [
-                    /*#__PURE__*/ _jsxs(ThemeProvider, {
-                        mode: "dark",
-                        className: Styles.navMain,
-                        children: [
-                            mobile && /*#__PURE__*/ _jsx("div", {
-                                className: Styles.navCloseWrapper,
-                                children: /*#__PURE__*/ _jsx("div", {
-                                    className: Styles.navClose,
-                                    onClick: ()=>onBarExpandChange(false),
-                                    children: /*#__PURE__*/ _jsx(Icon, {
-                                        svg: SvgClose,
-                                        size: "large"
-                                    })
-                                })
-                            }),
-                            !!(top === null || top === void 0 ? void 0 : top.length) && /*#__PURE__*/ _jsx(SidebarTop, {
-                                children: top
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                "data-cy": "navigation-items",
-                                children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
-                                        barExpanded: mobile ? drawerOpened : barExpanded,
-                                        submenuExpanded: !!item.id && submenuExpanded === item.id,
-                                        onSubmenuExpand: onSubmenuExpandChange,
-                                        navigationComponent: navigationComponent,
-                                        ...item
-                                    }, item.id) : /*#__PURE__*/ _createElement(InternalSideNavigationLink, {
-                                        ...item,
-                                        key: item.id,
-                                        submenuExpanded: undefined,
-                                        navigationComponent: navigationComponent,
-                                        tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag))
-                                    }))
-                            }),
-                            !!bottom && /*#__PURE__*/ _jsx(SidebarBottom, {
-                                children: bottom
-                            })
-                        ]
-                    }),
-                    !mobile && /*#__PURE__*/ _jsxs("div", {
-                        className: Styles.navFooter,
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: Styles.divider
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: Styles.toggleWrapper,
-                                children: /*#__PURE__*/ _jsx(SideNavigationOptionsToggle, {
-                                    appearance: barExpanded ? 'collapse-button' : 'expand',
-                                    onExpandedChange: ()=>onBarExpandChange(!barExpanded)
+                children: /*#__PURE__*/ _jsxs(ThemeProvider, {
+                    mode: "dark",
+                    className: Styles.navMain,
+                    children: [
+                        mobile && /*#__PURE__*/ _jsx("div", {
+                            className: Styles.navCloseWrapper,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: Styles.navClose,
+                                onClick: ()=>onBarExpandChange(false),
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    svg: SvgClose,
+                                    size: "large"
                                 })
                             })
-                        ]
-                    })
-                ]
+                        }),
+                        !!(top === null || top === void 0 ? void 0 : top.length) && /*#__PURE__*/ _jsx(SidebarTop, {
+                            children: top
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            "data-cy": "navigation-items",
+                            children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
+                                    item: item,
+                                    barExpanded: mobile ? drawerOpened : barExpanded,
+                                    submenuExpanded: !!item.id && !!(submenusExpanded === null || submenusExpanded === void 0 ? void 0 : submenusExpanded.includes(item.id)),
+                                    onSubmenuExpand: onSubmenuExpandChange,
+                                    navigationComponent: navigationComponent
+                                }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
+                                    id: item.id,
+                                    to: item.to,
+                                    title: item.title,
+                                    isActive: item.isActive,
+                                    icon: item.icon,
+                                    iconActive: item.iconActive,
+                                    className: item.className,
+                                    tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)),
+                                    navigationComponent: navigationComponent
+                                }, item.id))
+                        }),
+                        !!bottom && /*#__PURE__*/ _jsx(SidebarBottom, {
+                            children: bottom
+                        })
+                    ]
+                })
             })
         ]
     });
 };
 LayoutSidebar.displayName = 'LayoutSidebar';
-/** Side Navigation options toggle */ const SideNavigationOptionsToggle = ({ appearance, onExpandedChange })=>withTooltip(/*#__PURE__*/ _jsx("div", {
-        "data-cy": "navigation-left-options",
-        "data-pendo": "navigation-left-options",
-        className: classNames(Styles.toggle),
-        onClick: ()=>onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(appearance === 'expand'),
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: Styles.toggleContent,
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: Styles.toggleIconWrapper,
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        className: Styles.toggleIcon,
-                        svg: appearance === 'expand' ? SvgExpand : SvgCollapse
-                    })
-                }),
-                appearance === 'collapse-button' && /*#__PURE__*/ _jsx("span", {
-                    className: Styles.toggleText,
-                    children: "Collapse Menu"
-                })
-            ]
-        })
-    }), appearance === 'expand' ? 'Expand Menu' : appearance === 'collapse' ? 'Collapse Menu' : undefined, {
-        placement: 'right'
-    });
-/** Side Navigation menu item */ const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props })=>{
-    var _props_submenu, _props_submenu1;
+/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
+    var _item_submenu, _item_submenu1;
     const onExpandToggle = useCallback((e)=>{
         e.preventDefault();
         e.stopPropagation();
-        if (props.id) {
-            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(props.id, !submenuExpanded);
+        if (item.id) {
+            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(item.id, !submenuExpanded);
         }
     }, [
-        props.id,
+        item.id,
         submenuExpanded,
         onSubmenuExpand
     ]);
     const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
-    var _props_submenu_groups, _props_submenu_groups1;
+    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
+    var _item_submenu_groups, _item_submenu_groups1;
     return barExpanded ? /*#__PURE__*/ _jsx(InternalSideNavigationGroup, {
-        ...props,
+        id: item.id,
+        to: item.to,
+        title: item.title,
+        isActive: item.isActive,
+        icon: item.icon,
+        iconActive: item.iconActive,
+        className: item.className,
+        tag: tag,
         submenuExpanded: submenuExpanded,
         onExpandToggle: onExpandToggle,
-        tag: tag,
+        navigationComponent: navigationComponent,
         children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-            parentId: props.id,
-            groups: (_props_submenu_groups = (_props_submenu = props.submenu) === null || _props_submenu === void 0 ? void 0 : _props_submenu.groups) !== null && _props_submenu_groups !== void 0 ? _props_submenu_groups : [],
-            navigationComponent: props.navigationComponent
+            parentId: item.id,
+            groups: (_item_submenu_groups = (_item_submenu = item.submenu) === null || _item_submenu === void 0 ? void 0 : _item_submenu.groups) !== null && _item_submenu_groups !== void 0 ? _item_submenu_groups : [],
+            navigationComponent: navigationComponent
         })
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
@@ -148,9 +114,15 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                 children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {
                         ...triggerProps,
                         children: /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-                            ...props,
-                            submenuExpanded: undefined,
-                            tag: tag
+                            id: item.id,
+                            to: item.to,
+                            title: item.title,
+                            isActive: item.isActive,
+                            icon: item.icon,
+                            iconActive: item.iconActive,
+                            className: item.className,
+                            tag: tag,
+                            navigationComponent: navigationComponent
                         })
                     })
             }),
@@ -165,12 +137,12 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                             el: "h4",
                             size: "small",
                             className: "c-white m-b-half-i m-t-1",
-                            children: props.title
+                            children: item.title
                         }),
                         /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-                            parentId: props.id,
-                            groups: (_props_submenu_groups1 = (_props_submenu1 = props.submenu) === null || _props_submenu1 === void 0 ? void 0 : _props_submenu1.groups) !== null && _props_submenu_groups1 !== void 0 ? _props_submenu_groups1 : [],
-                            navigationComponent: props.navigationComponent
+                            parentId: item.id,
+                            groups: (_item_submenu_groups1 = (_item_submenu1 = item.submenu) === null || _item_submenu1 === void 0 ? void 0 : _item_submenu1.groups) !== null && _item_submenu_groups1 !== void 0 ? _item_submenu_groups1 : [],
+                            navigationComponent: navigationComponent
                         })
                     ]
                 })
@@ -195,7 +167,12 @@ const SideNavigationGroupContent = ({ groups, parentId, navigationComponent })=>
                 children: title
             }, `:group:${parentId}:${index}:title`));
             out.push(...group.links.map((link, index)=>/*#__PURE__*/ _jsx(InternalSideNavigationGroupLink, {
-                    ...link,
+                    id: link.id,
+                    to: link.to,
+                    title: link.title,
+                    isActive: link.isActive,
+                    className: undefined,
+                    tag: getCounterTag(link.counter, link.tag),
                     parentId: parentId,
                     navigationComponent: navigationComponent
                 }, `:${parentId}:${link.id}:${index}`)));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    {...item}\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            {...link}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","key","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenusExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (item.id) {\n                onSubmenuExpand?.(item.id, !submenuExpanded);\n            }\n        },\n        [item.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}

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

@@ -17,7 +17,6 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
@@ -65,6 +64,24 @@
             margin-bottom: @spacing-half;
         }
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 36px;
+
+            &.nav-item-active {
+                margin-right: @spacing-0;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-0;
+        }
+    }
 }
 
 .nav-drawer-backdrop {
@@ -184,19 +201,38 @@
     }
 
     .nav-top .divider {
-        margin-top: @spacing-1;
+        margin-top: @spacing-half;
         margin-bottom: @spacing-1;
     }
 
     .nav-main {
         padding-top: @spacing-1;
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 44px;
+
+            &.nav-item-active {
+                margin-right: @spacing-1;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-1;
+        }
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
+        margin-bottom: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;
@@ -355,26 +391,6 @@
         min-height: 12px !important;
     }
 
-    .nav-item-group-toggle-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .nav-item-group-toggle[data-anv][data-anv] {
-            color: inherit;
-            font-weight: @font-weight-semibold;
-        }
-
-        .nav-item-group-toggle-click {
-            position: absolute;
-            left: -@spacing-2;
-            right: -@spacing-half;
-            top: -@spacing-1;
-            bottom: -@spacing-1;
-        }
-    }
-
     .nav-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -397,6 +413,42 @@
 .nav-group-wrapper {
     .nav-group-item {
         position: relative;
+
+        .nav-item {
+            .nav-item-counter[data-anv][data-anv] {
+                margin-right: @spacing-0;
+            }
+        }
+
+        &:has(.nav-item-active) {
+            .nav-item-group-toggle-wrapper {
+                color: @text-color-active;
+            }
+        }
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: @spacing-0;
+        color: @text-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
     }
 
     .submenu-wrapper:not(.submenu-wrapper-collapsed) {

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

@@ -0,0 +1,16 @@
+import { LayoutContentArgs } from '../../test/titan-layout';
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: LayoutContentArgs;
+};
+export default _default;
+export declare const ContentLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitle: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitleFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=titan-layout-default.stories.d.ts.map

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

@@ -0,0 +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;AAwRF,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,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-legacy.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: import("../../test/titan-layout").LayoutContentArgs;
+};
+export default _default;
+export { ContentLegacy, ContentAnvil1, ContentAnvil2, ExtraWithTitle, ExtraWithFlashing, ExtraWithTitleFlashing, } from './titan-layout-default.stories';
+//# sourceMappingURL=titan-layout-legacy.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-legacy.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-legacy.stories.tsx"],"names":[],"mappings":";;;;;;;AAGA,wBAWE;AAEF,OAAO,EACH,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,gCAAgC,CAAC"}