feat(): Switch navbar-sidebar and sidebar toggles

Author: jaredcbaum

docusaurus-theme/src/theme/SidebarToggle/index.tsx

@@ -9,10 +9,10 @@ import React, { useState } from 'react';
 
 import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
 import UserPreferencesContext from '@theme/UserPreferencesContext';
-import type {Props} from '@theme/UserPreferencesProvider';
+import type { Props } from '@theme/UserPreferencesProvider';
 
 function UserPreferencesProvider(props: Props): JSX.Element {
- const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
+ const { tabGroupChoices, setTabGroupChoices } = useTabGroupChoice();
  const [sidebarOpen, setSidebarOpen] = useState(false);
 
  return (
@@ -21,8 +21,9 @@ function UserPreferencesProvider(props: Props): JSX.Element {
  tabGroupChoices,
  setTabGroupChoices,
  sidebarOpen,
- setSidebarOpen
- }}>
+ setSidebarOpen,
+ }}
+ >
  {props.children}
  </UserPreferencesContext.Provider>
  );

docusaurus-theme/src/theme/SidebarToggle/styles.module.scss

@@ -14,10 +14,12 @@ import useThemeContext from '@theme/hooks/useThemeContext';
 import { useThemeConfig } from '@docusaurus/theme-common';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
+import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import useWindowSize, { windowSizes } from '@theme/hooks/useWindowSize';
 import NavbarItem from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
+import { translate } from '@docusaurus/Translate';
 
 import styles from './styles.module.scss';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -54,18 +56,27 @@ function Navbar(): JSX.Element {
  },
  },
  } = useDocusaurusContext();
- const [sidebarShown, setSidebarShown] = useState(false);
+ const [navbarSidebarOpen, setNavbarSidebarOpen] = useState(false);
+ const { sidebarOpen, setSidebarOpen } = useUserPreferencesContext();
  const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
 
- useLockBodyScroll(sidebarShown);
+ useLockBodyScroll(sidebarOpen);
+ useLockBodyScroll(navbarSidebarOpen);
 
  const showSidebar = useCallback(() => {
- setSidebarShown(true);
- }, [setSidebarShown]);
+ setSidebarOpen(true);
+ }, []);
  const hideSidebar = useCallback(() => {
- setSidebarShown(false);
- }, [setSidebarShown]);
+ setSidebarOpen(false);
+ }, []);
+
+ const showNavbarSidebar = useCallback(() => {
+ setNavbarSidebarOpen(true);
+ }, []);
+ const hideNavbarSidebar = useCallback(() => {
+ setNavbarSidebarOpen(false);
+ }, []);
 
  const onToggleChange = useCallback(
  e => (e.target.checked ? setDarkTheme() : setLightTheme()),
@@ -76,7 +87,8 @@ function Navbar(): JSX.Element {
 
  useEffect(() => {
  if (windowSize === windowSizes.desktop) {
- setSidebarShown(false);
+ hideSidebar();
+ hideNavbarSidebar();
  }
  }, [windowSize]);
 
@@ -89,7 +101,7 @@ function Navbar(): JSX.Element {
  className={clsx('navbar', 'navbar--fixed-top', {
  'navbar--dark': style === 'dark',
  'navbar--primary': style === 'primary',
- 'navbar-sidebar--show': sidebarShown,
+ 'navbar-sidebar--show': navbarSidebarOpen,
  [styles.navbarHideable]: hideOnScroll,
  [styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
  })}
@@ -135,9 +147,35 @@ function Navbar(): JSX.Element {
  <NavbarItem {...item} key={i} />
  ))}
  </div>
- {windowSize === windowSizes.mobile && <SidebarToggle />}
+ {windowSize === windowSizes.mobile && (
+ <button
+ aria-label={
+ sidebarOpen
+ ? translate({
+ id: 'theme.docs.sidebar.responsiveCloseButtonLabel',
+ message: 'Close menu',
+ description:
+ 'The ARIA label for close button of mobile doc sidebar',
+ })
+ : translate({
+ id: 'theme.docs.sidebar.responsiveOpenButtonLabel',
+ message: 'Open menu',
+ description:
+ 'The ARIA label for open button of mobile doc sidebar',
+ })
+ }
+ aria-haspopup="true"
+ className={clsx('sidebar-toggle--mobile', styles.sidebarToggle)}
+ onClick={showNavbarSidebar}
+ >
+ ⋮
+ </button>
+ )}
  </div>
- <Backdrop onClick={hideSidebar} visible={sidebarShown} />
+ <Backdrop
+ onClick={hideSidebar && hideNavbarSidebar}
+ visible={sidebarOpen || navbarSidebarOpen}
+ />
  <div className="navbar-sidebar">
  <div className="navbar-sidebar__brand">
  <Logo
@@ -146,7 +184,7 @@ function Navbar(): JSX.Element {
  titleClassName="navbar__title"
  onClick={hideSidebar}
  />
- {!disableColorModeSwitch && sidebarShown && (
+ {!disableColorModeSwitch && sidebarOpen && (
  <Toggle checked={isDarkTheme} onChange={onToggleChange} />
  )}
  </div>

docusaurus-theme/src/theme/UserPreferencesProvider/index.tsx

@@ -167,6 +167,15 @@ html[data-theme='dark'] {
  transform: translate3d(0, calc(-100% - 2px), 0);
 }
 
+.sidebarToggle {
+ border: none;
+ background: transparent;
+
+ color: inherit;
+ font-size: 2.125rem;
+ font-weight: bold;
+}
+
 //#region -------- MEDIUM STYLES ---------
 @media (min-width: 997px) and (max-width: 1215px) {
  :global {