window Dimension hook & mobile improvements to HeaderNavigation

src/components/theme/Header/HeaderNavigation.jsx

@@ -3,10 +3,18 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Link } from 'react-router-dom';
+import useWindowSize from '../../../helpers/useWindowSize';
+import downIcon from '@plone/volto/icons/down-key.svg';
+import closeIcon from '@plone/volto/icons/clear.svg';
+import { Icon } from '@plone/volto/components';
 
 const MobileNav = ({ items, activeItem }) => {
   const [expanded, setExpanded] = React.useState(false);
 
+  React.useEffect(() => {
+    setExpanded(false);
+  }, [activeItem]);
+
   return (
     <div className="lead-mobile-nav">
       {expanded ? (
@@ -21,6 +29,14 @@ const MobileNav = ({ items, activeItem }) => {
                   }`}
                 >
                   {item.title}
+                  {item.url === activeItem.url && (
+                    <Icon
+                      className="lead-nav-icon"
+                      name={closeIcon}
+                      size="35px"
+                      onClick={() => setExpanded(false)}
+                    />
+                  )}
                 </p>
               </Link>
             ))}
@@ -32,6 +48,12 @@ const MobileNav = ({ items, activeItem }) => {
             className="lead-nav-item active-mobile-nav"
           >
             {activeItem.title}
+            <Icon
+              className="lead-nav-icon"
+              name={downIcon}
+              size="35px"
+              onClick={() => setExpanded(true)}
+            />
           </p>
         </div>
       )}
@@ -43,23 +65,24 @@ const HeaderNavigation = ({ items }) => {
   const [activeItem, setActiveItem] = React.useState('');
   const [isMobile, setIsMobile] = React.useState(false);
   const history = useHistory();
+  const size = useWindowSize();
 
   React.useEffect(() => {
+    const { width } = size;
     const activeRouteDetected = items.filter(
       (item) => item.url === history.location.pathname,
     );
     if (activeRouteDetected && activeRouteDetected.length > 0) {
       setActiveItem(activeRouteDetected[0]);
     }
-    const width = window && window.innerWidth ? window.innerWidth : '';
-    if (width && width <= 600) {
+    if (width && width <= 768) {
       setIsMobile(true);
     }
-    if (width && width > 600) {
+    if (width && width > 768) {
       setIsMobile(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [items, size]);
 
   return (
     <React.Fragment>

src/helpers/useWindowSize.jsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      if (typeof window !== 'undefined') {
+        setWindowSize({
+          width: window.innerWidth,
+          height: window.innerHeight,
+        });
+      }
+    }
+    // Add event listener
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize);
+      handleResize();
+    }
+    // Call handler right away so state gets updated with initial window size
+    // Remove event listener on cleanup
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', handleResize);
+      }
+    };
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

theme/site/globals/site.overrides

@@ -123,6 +123,8 @@ body.has-toolbar {
   height: 600px !important;
 }
 
+
+
 .lead-mobile-nav {
   position: absolute;
   z-index: 1;
@@ -142,6 +144,7 @@ body.has-toolbar {
   }
 
   .lead-nav-item {
+    position: relative;
     padding: 12px 20px;
     margin: 2px 0;
     background-color: #f7f7f5;
@@ -153,6 +156,17 @@ body.has-toolbar {
     font-weight: bold;
     text-align: center;
     text-decoration: none;
+
+    .lead-nav-icon {
+      fill: #554535 !important;
+      position: absolute;
+      right: 10px;
+      top: 6px;
+    }
+
+    .lead-nav-icon::hover{
+      fill: #cd4200 !important;
+    }
   }
 
   .lead-nav-item:hover {