feat(ui): close the nav when the user navigates away on small screens (#10932)

packages/ui/src/elements/Nav/context.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useWindowInfo } from '@faceless-ui/window-info'
+import { usePathname } from 'next/navigation.js'
 import React, { useEffect, useRef } from 'react'
 
 import { usePreferences } from '../../providers/Preferences/index.js'
@@ -40,6 +41,8 @@ export const NavProvider: React.FC<{
     breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },
   } = useWindowInfo()
 
+  const pathname = usePathname()
+
   const { getPreference } = usePreferences()
   const navRef = useRef(null)
 
@@ -64,8 +67,13 @@ export const NavProvider: React.FC<{
     }
   }, [largeBreak, getPreference, setNavOpen])
 
-  // TODO: on smaller screens where the nav is a modal
+  // on smaller screens where the nav is a modal
   // close the nav when the user navigates away
+  useEffect(() => {
+    if (smallBreak === true) {
+      setNavOpen(false)
+    }
+  }, [pathname])
 
   // on open and close, lock the body scroll
   // do not do this on desktop, the sidebar is not a modal