diff --git a/apps/docs/hooks/useMenuState.ts b/apps/docs/hooks/useMenuState.ts
index ed1818bd4d8..760796e1244 100644
--- a/apps/docs/hooks/useMenuState.ts
+++ b/apps/docs/hooks/useMenuState.ts
@@ -9,6 +9,7 @@ export const menuState = proxy({
   },
   menuLevelId: '',
   setMenuLevelId: (value) => {
+    menuState.menuMobileOpen = false
     menuState.menuLevelId = value
   },
   menuMobileOpen: false,
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index c4f01f01efd..c6ef90060d3 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -7,7 +7,7 @@ import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
 
 import FooterHelpCallout from '~/components/FooterHelpCallout'
 
-import { menuState } from '~/hooks/useMenuState'
+import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
 import { useEffect } from 'react'
 
 const SiteRefLayout = ({ children }) => {
@@ -23,9 +23,8 @@ const SiteRefLayout = ({ children }) => {
     }
   }, [])
 
-  const menuLevel = 'home'
-  // useMenuLevelId()
-  const mobileMenuOpen = false
+  const menuLevel = useMenuLevelId()
+  const mobileMenuOpen = useMenuMobileOpen()
 
   const levelsData = {
     home: {