diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js index c61ac5fb0..480121660 100644 --- a/packages/gatsby-theme-carbon/src/components/Header/Header.js +++ b/packages/gatsby-theme-carbon/src/components/Header/Header.js @@ -40,7 +40,10 @@ const Header = ({ children, shouldHideHeader }) => { toggleNavState('leftNavIsOpen')} + onClick={() => { + toggleNavState('leftNavIsOpen'); + toggleNavState('switcherIsOpen', 'close'); + }} isActive={leftNavIsOpen} /> @@ -54,6 +57,7 @@ const Header = ({ children, shouldHideHeader }) => { onClick={() => { toggleNavState('switcherIsOpen'); toggleNavState('searchIsOpen', 'close'); + toggleNavState('leftNavIsOpen', 'close'); }} > {switcherIsOpen ? : } diff --git a/packages/gatsby-theme-carbon/src/components/shared/responsiveStyles.js b/packages/gatsby-theme-carbon/src/components/shared/responsiveStyles.js index 8d5d596f0..1f6873638 100644 --- a/packages/gatsby-theme-carbon/src/components/shared/responsiveStyles.js +++ b/packages/gatsby-theme-carbon/src/components/shared/responsiveStyles.js @@ -2,7 +2,6 @@ import mediaqueries from '../../util/media-queries'; const responsiveStyles = { width: '100%', - //padding: '0 1rem', [mediaqueries.md]: { width: '75%', }, diff --git a/packages/gatsby-theme-carbon/src/util/hooks/useWindowSize.js b/packages/gatsby-theme-carbon/src/util/hooks/useWindowSize.js index 83f13de2e..85428bae1 100644 --- a/packages/gatsby-theme-carbon/src/util/hooks/useWindowSize.js +++ b/packages/gatsby-theme-carbon/src/util/hooks/useWindowSize.js @@ -1,4 +1,5 @@ import { useState, useEffect } from 'react'; +import { throttle as _throttle } from 'lodash'; const initialValue = { innerWidth: null, @@ -10,20 +11,20 @@ const initialValue = { function useWindowSize() { const [windowSize, setWindowSize] = useState(initialValue); - function fetchWindowDimensionsAndSave() { + const fetchWindowDimensionsAndSave = _throttle(() => { setWindowSize({ innerHeight: window.innerHeight, innerWidth: window.innerWidth, outerHeight: window.outerHeight, outerWidth: window.outerWidth, }); - } + }, 100); // run on mount useEffect(() => { // run only once fetchWindowDimensionsAndSave(); - }, []); + }, [fetchWindowDimensionsAndSave]); // set resize handler once on mount and clean before unmount useEffect(() => { @@ -31,7 +32,7 @@ function useWindowSize() { return () => { window.removeEventListener('resize', fetchWindowDimensionsAndSave); }; - }, []); + }, [fetchWindowDimensionsAndSave]); return windowSize; }