feat: SideNav improvements & fixes for X migration (#2523)

* feat: remove overflowY if L1 sidenav is collapsed

* Create itchy-pans-hunt.md

* fix: onLevelChange callback not firing when clicking nested nav

* Create proud-squids-clean.md

* chore: update

Author: anuraghazra

.changeset/itchy-pans-hunt.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat: remove overflowY if L1 sidenav is collapsed

.changeset/proud-squids-clean.md

@@ -0,0 +1,8 @@
+---
+"@razorpay/blade": patch
+---
+
+feat: SideNav improvements & fixes for X migration
+
+1. Removed overflowY if L1 sidenav is collapsed
+2. Fixed onVisibleLevelChange not getting called when clicking on a nested submenu

packages/blade/src/components/SideNav/SideNav.web.tsx

@@ -223,6 +223,7 @@ const _SideNav = (
       closeMobileNav,
       isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,
       setIsL1Collapsed,
+      isL1Hovered,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isL1Collapsed, isMobile, isMobileL2Open, isL1Hovered],
@@ -354,6 +355,11 @@ const _SideNav = (
                     onVisibleLevelChange?.({ visibleLevel: 2 });
                   }, L1_EXIT_HOVER_DELAY);
                 }
+                // If L1 is collapsed and not hovered we want to change visible level to 2
+                // This state/edgecase happens when user clicks on a nested nav and it collapses the L1 causing isL1Hovered to be false
+                if (isL1Collapsed && !isL1Hovered) {
+                  onVisibleLevelChange?.({ visibleLevel: 2 });
+                }
               }}
             >
               <SkipNavLink id={SKIP_NAV_ID} _hasBackground={true} />

packages/blade/src/components/SideNav/SideNavBody.web.tsx

@@ -1,10 +1,17 @@
 import { classes } from './tokens';
 import type { SideNavBodyProps } from './types';
+import { useSideNav } from './SideNavContext';
 import BaseBox from '~components/Box/BaseBox';
 
 const SideNavBody = ({ children }: SideNavBodyProps): React.ReactElement => {
+  const { isL1Collapsed, isL1Hovered } = useSideNav();
+
   return (
-    <BaseBox className={classes.L1_ITEM_WRAPPER} overflowY="auto" overflowX="hidden">
+    <BaseBox
+      className={classes.L1_ITEM_WRAPPER}
+      overflowY={isL1Collapsed && !isL1Hovered ? 'hidden' : 'auto'}
+      overflowX="hidden"
+    >
       {children}
     </BaseBox>
   );

packages/blade/src/components/SideNav/docs/SideNav.stories.tsx

@@ -373,7 +373,7 @@ const SideNavExample = ({
         {...args}
         isOpen={isMobileOpen}
         onDismiss={() => setIsMobileOpen(false)}
-        onVisibleLevelChange={({ visibleLevel }) => console.log({ visibleLevel })}
+        onVisibleLevelChange={({ visibleLevel }) => console.log(visibleLevel)}
       >
         <SideNavBody>
           {navItemsJSON.map((l1Sections) => {

packages/blade/src/components/SideNav/types.ts

@@ -174,6 +174,7 @@ type OnLinkActiveChangeArgs = {
 };
 
 type SideNavContextType = {
+  isL1Hovered?: boolean;
   isL1Collapsed?: boolean;
   setIsL1Collapsed?: (isL1Collapsed: boolean) => void;
   l2PortalContainerRef?: React.RefObject<HTMLDivElement>;