fix: navigation closes when window size shrinks, add overlay fade

packages/gatsby-theme-carbon/src/components/Container.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import NavContext from '../util/context/NavContext';
 import useWindowSize from '../util/hooks/useWindowSize';
@@ -10,27 +10,45 @@ const Overlay = styled.div`
   position: fixed;
   background: rgba(0, 0, 0, 0.25);
   transition: all 0.15s ease;
+  pointer-events: ${({ visible }) => (visible ? 'auto' : 'none')};
+  opacity: ${({ visible }) => (visible ? 1 : 0)};
+  transition: opacity 150ms ease;
 `;
 
 const Container = ({ children, homepage }) => {
   const { leftNavIsOpen, switcherIsOpen, toggleNavState } = useContext(
     NavContext
   );
   const windowSize = useWindowSize();
-  const closeNavs = () => {
+  const lastWindowSize = useRef(windowSize);
+
+  const closeNavs = useCallback(() => {
     toggleNavState('leftNavIsOpen', 'close');
     toggleNavState('switcherIsOpen', 'close');
-  };
+  }, [toggleNavState]);
+
+  useEffect(() => {
+    const windowShrinking =
+      lastWindowSize.current &&
+      lastWindowSize.current.innerWidth > windowSize.innerWidth;
+    if (windowShrinking && windowSize.innerWidth < 1056) {
+      closeNavs();
+    }
+    lastWindowSize.current = windowSize;
+  }, [closeNavs, windowSize, windowSize.innerWidth]);
 
-  const shouldShowOverlay = () => {
+  const overlayVisible = (() => {
     const navOpen = leftNavIsOpen || switcherIsOpen;
     return navOpen && windowSize.innerWidth && windowSize.innerWidth < 1056;
-  };
+  })();
 
   return (
     <>
-      {shouldShowOverlay() ? <Overlay onClick={closeNavs} /> : null}
-      <div className={`${homepage ? 'container--homepage' : 'container'}`}>
+      <Overlay visible={overlayVisible} onClick={closeNavs} />
+      <div
+        aria-hidden={overlayVisible}
+        className={`${homepage ? 'container--homepage' : 'container'}`}
+      >
         {children}
       </div>
     </>