diff --git a/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx b/web/packages/teleport/src/Navigation/SideNavigation/Navigation.tsx index 8be5438ee2c4e..74817bd51e66d 100644 --- 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} /> diff --git a/web/packages/teleport/src/Navigation/SideNavigation/Section.tsx b/web/packages/teleport/src/Navigation/SideNavigation/Section.tsx index eb9d10c111b82..35a74b3af8378 100644 --- 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(); }} >