@servicetitan/navigation 13.0.0-canary.256.6f02f8b.0 → 13.0.0-canary.256.b93dc10.0

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

@@ -1,7 +1,5 @@
 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,
@@ -24,8 +22,6 @@ import {
 } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
 
-import { withTooltip } from './with-tooltip';
-
 export interface LayoutSidebarProps {
     className?: string;
     top?: ReactElement[];
@@ -125,57 +121,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;

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) => {
@@ -275,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}
                             />
                         ) : (
@@ -294,6 +312,7 @@ function TitanLayoutComponent({
                                 isMobile={isMobile}
                                 hasNotifications={hasNotifications || hasMenuNotifications}
                                 onBurgerClick={onBurgerClick}
+                                hasBurger={isMobile}
                                 navigationMainItems={navigationMainItems}
                                 navigationOverflowItems={navigationOverflowItems}
                             />