Merge pull request #4191 from omnivore-app/feat/web-home-resizing

Improve responsive reflow on the home view

packages/web/components/nav-containers/HomeContainer.tsx

@@ -423,8 +423,11 @@ export function HomeContainer(): JSX.Element {
             width: '680px',
             gap: '50px',
             minHeight: '100vh',
-            '@mdDown': {
+            '@lgDown': {
               gap: '40px',
+              width: '80%',
+            },
+            '@mdDown': {
               width: '100%',
             },
           }}

packages/web/components/templates/NavigationLayout.tsx

@@ -24,6 +24,7 @@ import {
   showErrorToast,
   showSuccessToastWithAction,
 } from '../../lib/toastHelpers'
+import useWindowDimensions from '../../lib/hooks/useGetWindowDimensions'
 
 export type NavigationSection =
   | 'home'
@@ -73,6 +74,14 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     setShowLogoutConfirmation(true)
   }, [setShowLogoutConfirmation])
 
+  const { width, previous } = useWindowDimensions()
+
+  useEffect(() => {
+    if (width < previous.width && width <= 768) {
+      props.setShowNavigationMenu(false)
+    }
+  }, [width, previous])
+
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
 
   const handleLinkAdded = useCallback(
@@ -152,7 +161,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
               '@mdDown': {
                 display: 'flex',
                 top: '0px',
-                left: LIBRARY_LEFT_MENU_WIDTH,
+                left: '0px',
                 width: '100vw',
                 height: '100vh',
                 pointerEvents: 'auto',

packages/web/components/templates/navMenu/NavigationMenu.tsx

@@ -94,14 +94,14 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
             visibility: props.showMenu && !dismissed ? 'visible' : 'hidden',
             boxShadow:
               props.showMenu && !dismissed
-                ? 'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px'
+                ? `0px 4px 4px 0px rgba(0, 0, 0, 0.15)`
                 : 'unset',
           },
           zIndex: 5,
         }}
         onClick={(event) => {
           // on small screens we want to dismiss the menu after click
-          if (window.innerWidth < 400) {
+          if (window.innerWidth <= 768) {
             setDismissed(true)
             setTimeout(() => {
               props.setShowMenu(false)

packages/web/lib/hooks/useGetWindowDimensions.tsx

@@ -1,6 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 function getWindowDimensions() {
+  if (typeof window === 'undefined') {
+    return {
+      width: 0,
+      height: 0,
+    }
+  }
   const { innerWidth: width, innerHeight: height } = window
   return {
     width,
@@ -8,21 +14,28 @@ function getWindowDimensions() {
   }
 }
 export default function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState({
-    width: 0,
-    height: 0,
-  })
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  )
+  const prevDimensionsRef = useRef(windowDimensions)
 
   useEffect(() => {
-    setWindowDimensions(getWindowDimensions())
-
     function handleResize() {
-      setWindowDimensions(getWindowDimensions())
+      const currentDimensions = getWindowDimensions()
+      setWindowDimensions((prev) => {
+        prevDimensionsRef.current = prev
+        return currentDimensions
+      })
     }
 
     window.addEventListener('resize', handleResize)
+    handleResize()
+
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  return windowDimensions
+  return {
+    ...windowDimensions,
+    previous: prevDimensionsRef.current,
+  }
 }