From fb4fd01f0b431cc4e92a736fb172b5990ddf9a10 Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Mon, 22 Jan 2024 20:43:51 -0500
Subject: [PATCH] fix docs nav dependency array (#20645)

---
 .../Navigation/NavigationMenu/NavigationMenu.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index a7220d1875d..984db7537a1 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -260,21 +260,21 @@ function getMenuElement(menu: Menu) {
 const NavigationMenu = () => {
   const router = useRouter()
 
-  function handleRouteChange(url: string) {
-    const menu = getMenuByUrl(router.basePath, url)
-    if (menu) {
-      menuState.setMenuLevelId(menu.id)
-    }
-  }
-
   useEffect(() => {
+    function handleRouteChange(url: string) {
+      const menu = getMenuByUrl(router.basePath, url)
+      if (menu) {
+        menuState.setMenuLevelId(menu.id)
+      }
+    }
+
     handleRouteChange(router.basePath + router.asPath)
     // Listen for page changes after a navigation or when the query changes
     router.events.on('routeChangeComplete', handleRouteChange)
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [router.events])
+  }, [router.asPath, router.basePath, router.events])
 
   const level = useMenuLevelId()
   const menu = getMenuById(level)