diff --git a/packages/example/src/pages/guides/configuration.mdx b/packages/example/src/pages/guides/configuration.mdx index 2cc52be5a..25c4b8292 100644 --- a/packages/example/src/pages/guides/configuration.mdx +++ b/packages/example/src/pages/guides/configuration.mdx @@ -259,9 +259,8 @@ plugins: [ - `mdxExtensions` – change the file extensions processed by `gatsby-mdx` (default ['.mdx', '.md']). -- `pngCompressionSpeed` - a speed/quality trade-off from 1 (brute-force) to 10 - (fastest). Speed 10 has 5% lower quality, but is 8 times faster than the - default (4). +- `isSwitcherEnabled` - pass `false` to remove the Site switcher from the header + navigation. - `titleType` – pick between four formats for the `` element for your site. Here are the four options using this page as an example: diff --git a/packages/gatsby-theme-carbon/gatsby-config.js b/packages/gatsby-theme-carbon/gatsby-config.js index 42b022ce0..0884e51ae 100644 --- a/packages/gatsby-theme-carbon/gatsby-config.js +++ b/packages/gatsby-theme-carbon/gatsby-config.js @@ -33,6 +33,7 @@ module.exports = (themeOptions) => { remarkPlugins = [], gatsbyPluginSharpOptions = {}, isServiceWorkerEnabled = false, + isSwitcherEnabled = true, } = themeOptions; const theme = { ...defaultTheme, ...themeOption }; @@ -78,6 +79,7 @@ module.exports = (themeOptions) => { homepageTheme: theme.homepage, interiorTheme: theme.interior, isServiceWorkerEnabled, + isSwitcherEnabled, title: 'Gatsby Theme Carbon', description: 'Add a description by supplying it to siteMetadata in your gatsby-config.js file.', diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js index cc314b7c9..37188b584 100644 --- a/packages/gatsby-theme-carbon/src/components/Header/Header.js +++ b/packages/gatsby-theme-carbon/src/components/Header/Header.js @@ -25,7 +25,7 @@ const Header = ({ children }) => { searchIsOpen, switcherTooltipText = 'Switch sites', } = useContext(NavContext); - const { isSearchEnabled, navigationStyle } = useMetadata(); + const { isSearchEnabled, navigationStyle, isSwitcherEnabled } = useMetadata(); return ( <ShellHeader @@ -55,19 +55,21 @@ const Header = ({ children }) => { <HeaderGlobalBar className={cx({ [styles.searchIsOpenOnBar]: searchIsOpen })}> {isSearchEnabled && <GlobalSearch />} - <HeaderGlobalAction - className={cx(styles.headerButton, styles.switcherButton, { - [styles.switcherButtonOpen]: switcherIsOpen, - })} - aria-label={switcherTooltipText} - tooltipAlignment="end" - onClick={() => { - toggleNavState('switcherIsOpen'); - toggleNavState('searchIsOpen', 'close'); - toggleNavState('leftNavIsOpen', 'close'); - }}> - {switcherIsOpen ? <Close20 /> : <Switcher20 />} - </HeaderGlobalAction> + {isSwitcherEnabled && ( + <HeaderGlobalAction + className={cx(styles.headerButton, styles.switcherButton, { + [styles.switcherButtonOpen]: switcherIsOpen, + })} + aria-label={switcherTooltipText} + tooltipAlignment="end" + onClick={() => { + toggleNavState('switcherIsOpen'); + toggleNavState('searchIsOpen', 'close'); + toggleNavState('leftNavIsOpen', 'close'); + }}> + {switcherIsOpen ? <Close20 /> : <Switcher20 />} + </HeaderGlobalAction> + )} </HeaderGlobalBar> </ShellHeader> ); diff --git a/packages/gatsby-theme-carbon/src/components/Layout.js b/packages/gatsby-theme-carbon/src/components/Layout.js index 1adaa75bc..628d1c516 100644 --- a/packages/gatsby-theme-carbon/src/components/Layout.js +++ b/packages/gatsby-theme-carbon/src/components/Layout.js @@ -7,6 +7,7 @@ import Header from './Header'; import Switcher from './Switcher'; import Footer from './Footer'; import Container from './Container'; +import useMetadata from '../util/hooks/useMetadata'; import '../styles/index.scss'; @@ -21,6 +22,7 @@ const Layout = ({ tabs, }) => { const is404 = children.key === null; + const { isSwitcherEnabled } = useMetadata(); useLayoutEffect(() => { // eslint-disable-next-line global-require @@ -43,8 +45,8 @@ const Layout = ({ pageDescription={pageDescription} pageKeywords={pageKeywords} /> - <Header /> - <Switcher /> + <Header isSwitcherEnabled={isSwitcherEnabled} /> + {isSwitcherEnabled && <Switcher />} <LeftNav homepage={homepage} is404Page={is404} theme={theme} /> <Container homepage={homepage} theme={theme}> {children} diff --git a/packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js b/packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js index 9c1955bdc..5c667f5f7 100644 --- a/packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js +++ b/packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js @@ -9,6 +9,7 @@ const useMetadata = () => { description keywords isSearchEnabled + isSwitcherEnabled homepageTheme interiorTheme navigationStyle