@servicetitan/navigation 13.0.0-canary.256.5761ed1.0 → 13.0.0-canary.256.6f02f8b.0

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

@@ -17,7 +17,6 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
@@ -184,19 +183,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 +373,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 +395,52 @@
 .nav-group-wrapper {
     .nav-group-item {
         position: relative;
+
+        .nav-item {
+            margin-right: 36px;
+
+            &.nav-item-active {
+                margin-right: @spacing-0;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+
+            .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/src/components/titan-layout/layout-sidebar.tsx

@@ -32,7 +32,7 @@ export interface LayoutSidebarProps {
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
-    submenuExpanded: string | undefined;
+    submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;
@@ -45,7 +45,7 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
     className,
     mobile,
     barExpanded,
-    submenuExpanded,
+    submenusExpanded,
     drawerOpened,
     onBarExpandChange,
     onSubmenuExpandChange,
@@ -97,7 +97,9 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                     key={item.id}
                                     item={item}
                                     barExpanded={mobile ? drawerOpened : barExpanded}
-                                    submenuExpanded={!!item.id && submenuExpanded === item.id}
+                                    submenuExpanded={
+                                        !!item.id && !!submenusExpanded?.includes(item.id)
+                                    }
                                     onSubmenuExpand={onSubmenuExpandChange}
                                     navigationComponent={navigationComponent}
                                 />
@@ -115,7 +117,6 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                         item.submenu,
                                         getCounterTag(item.counter, item.tag)
                                     )}
-                                    submenuExpanded={undefined}
                                     navigationComponent={navigationComponent}
                                 />
                             )
@@ -236,7 +237,6 @@ const SideNavigationGroupItem: FC<{
                             iconActive={item.iconActive}
                             className={item.className}
                             tag={tag}
-                            submenuExpanded={undefined}
                             navigationComponent={navigationComponent}
                         />
                     </div>

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

@@ -6,7 +6,7 @@ import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inac
 import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
 import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
 import { Page as Anvil1Page } from '@servicetitan/design-system';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
     CallsNavigationTrigger,
     LocationInfo,
@@ -51,8 +51,8 @@ const mainNavItems = [
     navItems.dispatch,
 
     navItems.fleet,
-    navItems.followUps,
-    navItems.inventory,
+    navItems.followUpsWithSubmenu,
+    navItems.purchasingWithSubmenu,
 
     navItems.marketing,
     navItems.priceBook,
@@ -224,10 +224,15 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
 };
 
 const Content = (args: LayoutContentArgs) => {
+    const [info, setInfo] = useState('');
+    useEffect(() => {
+        setInfo(new Date().toLocaleTimeString());
+    }, []);
     return (
         <Fragment>
             <LocationInfo className="m-b-3" />
-            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
+            <div className="m-b-3">component rendered - {info}</div>
+            <div className="m-b-3">rerendered - {new Date().toLocaleTimeString()}</div>
             {args.wideContent && (
                 <div style={{ width: '1200px' }}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

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

@@ -168,7 +168,10 @@ function TitanLayoutComponent({
         (id: string, expanded: boolean) => {
             onStateChange?.({
                 navCollapsed: state?.navCollapsed ?? false,
-                submenuExpanded: expanded ? id : undefined,
+                submenusExpanded: [
+                    ...(state?.submenusExpanded ?? []).filter(i => i !== id),
+                    ...(expanded ? [id] : []),
+                ],
             });
         },
         [state, onStateChange]
@@ -303,7 +306,7 @@ function TitanLayoutComponent({
                                 mobile={breakpoint.isMobile}
                                 barExpanded={!state?.navCollapsed}
                                 onBarExpandChange={onBarExpandChange}
-                                submenuExpanded={state?.submenuExpanded}
+                                submenusExpanded={state?.submenusExpanded}
                                 onSubmenuExpandChange={onSubmenuExpandChange}
                                 drawerOpened={mobileDrawerOpened}
                                 onDrawerOpenChange={setMobileDrawerOpened}
@@ -324,7 +327,6 @@ function TitanLayoutComponent({
                                                     iconActive={undefined}
                                                     tag={undefined}
                                                     className={undefined}
-                                                    submenuExpanded={undefined}
                                                 />
                                             )}
                                         </Fragment>