fix minor sidenav bugs (#50249)

gravitational · Dec 16, 2024 · 3155da7 · 3155da7
1 parent 186db7a
commit 3155da7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 29 deletions.
diff --git a/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx b/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx
@@ -350,31 +350,30 @@ export function Navigation() {
 
     // If the page is not part of the sidenav, such as Account Settings, curentPageSection will be undefined, and the drawer should be collapsed.
     if (currentPageSection) {
+      // If there is already an expanded section set, don't change it.
+      if (debouncedSection) {
+        return;
+      }
       handleSetExpandedSection(currentPageSection);
     } else {
       collapseDrawer(false);
     }
   }, [currentPageSection]);
 
-  // Handler for navigation actions
-  const handleNavigation = useCallback(
-    (route: string) => {
-      history.push(route);
-
-      // Clear any existing timeout
-      if (navigationTimeoutRef.current) {
-        clearTimeout(navigationTimeoutRef.current);
-      }
+  // Handler for clicking nav items.
+  const onNavigationItemClick = useCallback(() => {
+    // Clear any existing timeout
+    if (navigationTimeoutRef.current) {
+      clearTimeout(navigationTimeoutRef.current);
+    }
 
-      if (!stickyMode) {
-        // Add a small delay to the close to allow the user to see some feedback (see the section they clicked become active).
-        navigationTimeoutRef.current = setTimeout(() => {
-          collapseDrawer(false);
-        }, 150);
-      }
-    },
-    [collapseDrawer, history]
-  );
+    if (!stickyMode) {
+      // Add a small delay to the close to allow the user to see some feedback (see the section they clicked become active).
+      navigationTimeoutRef.current = setTimeout(() => {
+        collapseDrawer(false);
+      }, 150);
+    }
+  }, [collapseDrawer]);
 
   // Hide the nav if the current feature has hideNavigation set to true.
   const hideNav = features.find(
@@ -449,7 +448,7 @@ export function Navigation() {
                 toggleStickyMode={toggleStickyMode}
                 $active={section.category === currentView?.category}
                 aria-controls={`panel-${debouncedSection?.category}`}
-                handleNavigation={handleNavigation}
+                onNavigationItemClick={onNavigationItemClick}
                 isExpanded={isExpanded}
               />
             </React.Fragment>

diff --git a/web/packages/teleport/src/Navigation/SideNavigation/Section.tsx b/web/packages/teleport/src/Navigation/SideNavigation/Section.tsx
@@ -46,7 +46,7 @@ export function DefaultSection({
   $active,
   section,
   isExpanded,
-  handleNavigation,
+  onNavigationItemClick,
   previousExpandedSection,
   stickyMode,
   toggleStickyMode,
@@ -55,7 +55,7 @@ export function DefaultSection({
   onExpandSection,
 }: SharedSectionProps & {
   currentView?: NavigationSubsection;
-  handleNavigation?: (route: string) => void;
+  onNavigationItemClick?: () => void;
   currentPageSection?: NavigationSection;
   stickyMode: boolean;
   toggleStickyMode: () => void;
@@ -67,11 +67,6 @@ export function DefaultSection({
         $active={$active}
         onMouseEnter={onExpandSection}
         onFocus={onExpandSection}
-        onClick={() => {
-          if (section.standalone) {
-            handleNavigation(section.subsections[0].route);
-          }
-        }}
         isExpanded={isExpanded}
         tabIndex={section.standalone ? 0 : -1}
       >
@@ -109,9 +104,8 @@ export function DefaultSection({
                   to={subsection.route}
                   exact={subsection.exact}
                   key={subsection.title}
-                  onClick={(e: React.MouseEvent) => {
-                    e.preventDefault();
-                    handleNavigation(subsection.route);
+                  onClick={() => {
+                    onNavigationItemClick();
                   }}
                 >
                   <subsection.icon size={16} />