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}