diff --git a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js index 109029dcd..cb2958e10 100644 --- a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js +++ b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.js @@ -6,7 +6,7 @@ import GlobalSearchInput from './GlobalSearchInput'; import NavContext from '../../util/context/NavContext'; const GlobalSearch = () => { - const { searchIsOpen, toggleNav } = useContext(NavContext); + const { searchIsOpen, toggleNavState } = useContext(NavContext); if (searchIsOpen) { return ; @@ -17,8 +17,8 @@ const GlobalSearch = () => { className="bx--header__action--search" aria-label="Search Website" onClick={() => { - toggleNav('search', 'open'); - toggleNav('switcher', 'close'); + toggleNavState('searchIsOpen', 'open'); + toggleNavState('switcherIsOpen', 'close'); }} > diff --git a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js index 24afc7d28..297ff8e1c 100644 --- a/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js +++ b/packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearchInput.js @@ -8,7 +8,7 @@ import NavContext from '../../util/context/NavContext'; const GlobalSearchInput = () => { const inputRef = useRef(null); const [input, setInput] = useState(''); - const { toggleNav } = useContext(NavContext); + const { toggleNavState } = useContext(NavContext); useEffect(() => { if (inputRef.current) inputRef.current.focus(); @@ -40,7 +40,7 @@ const GlobalSearchInput = () => { aria-label="Clear search input" onClick={() => { setInput(''); - toggleNav('search', 'close'); + toggleNavState('searchIsOpen', 'close'); }} > diff --git a/packages/gatsby-theme-carbon/src/components/Header.js b/packages/gatsby-theme-carbon/src/components/Header.js index 026ae3993..3387a6271 100644 --- a/packages/gatsby-theme-carbon/src/components/Header.js +++ b/packages/gatsby-theme-carbon/src/components/Header.js @@ -14,14 +14,16 @@ import GlobalSearch from './GlobalSearch'; import NavContext from '../util/context/NavContext'; const Header = ({ children }) => { - const { leftNavIsOpen, toggleNav, switcherIsOpen } = useContext(NavContext); + const { leftNavIsOpen, toggleNavState, switcherIsOpen } = useContext( + NavContext + ); return ( toggleNav('leftNav')} + onClick={() => toggleNavState('leftNavIsOpen')} isActive={leftNavIsOpen} /> @@ -33,8 +35,8 @@ const Header = ({ children }) => { className="bx--header__action--switcher" aria-label="Switch" onClick={() => { - toggleNav('switcher'); - toggleNav('search', 'close'); + toggleNavState('switcherIsOpen'); + toggleNavState('searchIsOpen', 'close'); }} > {switcherIsOpen ? : } diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js index d30af2fbb..36bbcf2b4 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js @@ -17,11 +17,11 @@ import LeftNavWrapper from './LeftNavWrapper'; import resourceLinks from './resourceLinks'; const LeftNav = props => { - const { leftNavIsOpen, toggleNav } = useContext(NavContext); + const { leftNavIsOpen, toggleNavState } = useContext(NavContext); const windowSize = useWindowSize(); if (windowSize.innerWidth > 1056 && !leftNavIsOpen) { - toggleNav('leftNav', 'open'); + toggleNavState('leftNavIsOpen', 'open'); } const data = useStaticQuery(graphql` @@ -44,7 +44,7 @@ const LeftNav = props => { } `); const sideNavRef = useRef(null); - useOnClickOutside(sideNavRef, () => toggleNav('leftNav', 'close')); + useOnClickOutside(sideNavRef, () => toggleNavState('leftNavIsOpen', 'close')); const nodes = data.allFile.edges.map(edge => edge.node); const topLevelNavItems = Array.from( diff --git a/packages/gatsby-theme-carbon/src/util/context/NavContext.js b/packages/gatsby-theme-carbon/src/util/context/NavContext.js index 79a4934d6..0ac65a935 100644 --- a/packages/gatsby-theme-carbon/src/util/context/NavContext.js +++ b/packages/gatsby-theme-carbon/src/util/context/NavContext.js @@ -1,10 +1,9 @@ -import React, { useState, useReducer } from 'react'; +import React, { useReducer } from 'react'; const NavContext = React.createContext({ - leftNav: false, - search: false, - switcher: false, - expandedCategories: [], + leftNavIsOpen: true, + searchIsOpen: false, + switcherIsOpen: false, }); const reducer = (state, action) => { @@ -18,30 +17,16 @@ const reducer = (state, action) => { } }; export const NavContextProvider = ({ children }) => { - const { leftNavIsOpen, searchIsOpen, switcherIsOpen, dispatch } = useReducer( - reducer, - { - leftNav: false, - search: false, - switcher: false, - } - ); - - const [expandedCategories, setExpandedCategories] = useState([]); - - const toggleCategory = category => { - if (expandedCategories.includes(category)) { - setExpandedCategories( - expandedCategories.filter( - expandedCategory => expandedCategory === category - ) - ); - } else { - setExpandedCategories([...expandedCategories, category]); - } - }; + const [ + { leftNavIsOpen, searchIsOpen, switcherIsOpen }, + dispatch, + ] = useReducer(reducer, { + leftNav: false, + search: false, + switcher: false, + }); - const toggleNav = (nav, type) => { + const toggleNavState = (nav, type) => { dispatch({ nav, type }); }; @@ -51,9 +36,7 @@ export const NavContextProvider = ({ children }) => { leftNavIsOpen, searchIsOpen, switcherIsOpen, - toggleNav, - expandedCategories, - toggleCategory, + toggleNavState, }} > {children}