feat: add option to remove site switcher from header (#1132)

* feat: add option to disable switcher

* docs: add documentation for switcher disabling

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 `<title>` element for your
   site. Here are the four options using this page as an example:
 

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.',

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>
   );

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}

packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js

@@ -9,6 +9,7 @@ const useMetadata = () => {
           description
           keywords
           isSearchEnabled
+          isSwitcherEnabled
           homepageTheme
           interiorTheme
           navigationStyle