@servicetitan/navigation 13.0.0-canary.256.5761ed1.0 → 13.0.0-canary.256.5bb5b0a.0

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}
                                 />
                             )
@@ -124,57 +125,12 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
 
                     {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}
                 </ThemeProvider>
-
-                {!mobile && (
-                    <div className={Styles.navFooter}>
-                        <div className={Styles.divider} />
-                        <div className={Styles.toggleWrapper}>
-                            <SideNavigationOptionsToggle
-                                appearance={barExpanded ? 'collapse-button' : 'expand'}
-                                onExpandedChange={() => onBarExpandChange(!barExpanded)}
-                            />
-                        </div>
-                    </div>
-                )}
             </div>
         </LayoutPlacementContext.Provider>
     );
 };
 LayoutSidebar.displayName = 'LayoutSidebar';
 
-/** Side Navigation options toggle */
-const SideNavigationOptionsToggle: FC<{
-    appearance: 'expand' | 'collapse' | 'collapse-button';
-    onExpandedChange?(expanded: boolean): void;
-}> = ({ appearance, onExpandedChange }) =>
-    withTooltip(
-        <div
-            data-cy="navigation-left-options"
-            data-pendo="navigation-left-options"
-            className={classNames(Styles.toggle)}
-            onClick={() => onExpandedChange?.(appearance === 'expand')}
-        >
-            <div className={Styles.toggleContent}>
-                <div className={Styles.toggleIconWrapper}>
-                    <Icon
-                        className={Styles.toggleIcon}
-                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
-                    />
-                </div>
-
-                {appearance === 'collapse-button' && (
-                    <span className={Styles.toggleText}>Collapse Menu</span>
-                )}
-            </div>
-        </div>,
-        appearance === 'expand'
-            ? 'Expand Menu'
-            : appearance === 'collapse'
-              ? 'Collapse Menu'
-              : undefined,
-        { placement: 'right' }
-    );
-
 /** Side Navigation menu item */
 const SideNavigationGroupItem: FC<{
     item: NavigationItemData;
@@ -236,7 +192,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

@@ -149,10 +149,18 @@ function TitanLayoutComponent({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent<never>) => {
-        setMobileDrawerOpened(true);
-        e.stopPropagation();
-    }, []);
+    const onBurgerClick = useCallback(
+        (e: MouseEvent<never>) => {
+            if (isMobile) {
+                setMobileDrawerOpened(true);
+            } else {
+                onStateChange?.({ navCollapsed: !state?.navCollapsed });
+            }
+
+            e.stopPropagation();
+        },
+        [isMobile, state?.navCollapsed, onStateChange]
+    );
 
     const onBarExpandChange = useCallback(
         (expanded: boolean) => {
@@ -168,7 +176,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]
@@ -272,7 +283,17 @@ function TitanLayoutComponent({
                                     </Fragment>
                                 }
                                 isMobile={isMobile}
-                                hasNotifications={hasNotifications || hasMenuNotifications}
+                                hasNotifications={
+                                    isMobile && (hasNotifications || hasMenuNotifications)
+                                }
+                                hasBurger={hasSideBar}
+                                burgerTooltip={
+                                    isMobile
+                                        ? undefined
+                                        : state?.navCollapsed
+                                          ? 'Expand'
+                                          : 'Collapse'
+                                }
                                 onBurgerClick={onBurgerClick}
                             />
                         ) : (
@@ -291,6 +312,7 @@ function TitanLayoutComponent({
                                 isMobile={isMobile}
                                 hasNotifications={hasNotifications || hasMenuNotifications}
                                 onBurgerClick={onBurgerClick}
+                                hasBurger={isMobile}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />
@@ -303,7 +325,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 +346,6 @@ function TitanLayoutComponent({
                                                     iconActive={undefined}
                                                     tag={undefined}
                                                     className={undefined}
-                                                    submenuExpanded={undefined}
                                                 />
                                             )}
                                         </Fragment>