use windowSize hook to determine if menu should be hidden

Author: Joseph Lozano

packages/react/src/SubdomainNavBar/NavigationVisbilityObserver.tsx

@@ -11,14 +11,13 @@ import styles from './SubdomainNavBar.module.css'
 import {useKeyboardEscape} from '../hooks/useKeyboardEscape'
 import {useWindowSize} from '../hooks/useWindowSize'
 
-export function NavigationVisbilityObserver({children, className, showOnlyOnNarrow = false, ...rest}) {
+export function NavigationVisbilityObserver({children, className, ...rest}) {
   const navRef = useRef<HTMLUListElement | null>(null)
   const [visibilityMap] = useVisibilityObserver(navRef, children)
   const {width} = useWindowSize()
 
   const showOverflow = Object.values(visibilityMap).includes(false)
 
-  if (showOnlyOnNarrow && width && width > 768) return null
   return (
     <ul className={clsx(styles['SubdomainNavBar-primary-nav-list'], className)} ref={navRef} {...rest}>
       {React.Children.map(children, child => {

packages/react/src/SubdomainNavBar/SubdomainNavBar.tsx

@@ -7,6 +7,7 @@ import {NavigationVisbilityObserver} from './NavigationVisbilityObserver'
 import {useOnClickOutside} from '../hooks/useOnClickOutside'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import {useKeyboardEscape} from '../hooks/useKeyboardEscape'
+import {useWindowSize} from '../hooks/useWindowSize'
 
 /**
  * Design tokens
@@ -79,10 +80,17 @@ function Root({
 }: SubdomainNavBarProps) {
   const [menuHidden, setMenuHidden] = useState(true)
   const [searchVisible, setSearchVisible] = useState(false)
+  const {width} = useWindowSize()
 
   const handleMobileMenuClick = () => setMenuHidden(!menuHidden)
   const handleSearchVisibility = () => setSearchVisible(!searchVisible)
 
+  useEffect(() => {
+    if (width && width >= 768) {
+      setMenuHidden(true)
+    }
+  }, [width, menuHidden])
+
   useEffect(() => {
     const newOverflowState = menuHidden ? 'auto' : 'hidden'
     document.body.style.overflow = newOverflowState