feat(): Separate Doc State, lazy load doc sidebar on mobile

Author: jaredcbaum

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

@@ -32,7 +32,7 @@ import { ChevronDown } from '@theme/icons';
 import { useActiveVersion } from '@theme/hooks/useDocs';
 
 import styles from './styles.module.scss';
-import Backdrop from '@theme/Backdrop';
+import useDocStateContext from '@theme/hooks/useDocStateContext';
 
 const MOBILE_TOGGLE_SIZE = 24;
 
@@ -292,9 +292,14 @@ function DocSidebar({
   const { hideableSidebar } = useThemeConfig();
   const { isClosed: isAnnouncementBarClosed } = useAnnouncementBar();
 
-  const { setSidebarOpen, sidebarOpen } = useUserPreferencesContext();
+  const { setMobileSidebarOpen, mobileSidebarOpen, mobileSidebarLoaded } =
+    useDocStateContext();
+  const windowSize = useWindowSize();
+
+  useLockBodyScroll(mobileSidebarOpen);
 
-  useLockBodyScroll(sidebarOpen);
+  if (windowSize === windowSizes.mobile && !mobileSidebarLoaded)
+    return <div></div>;
 
   return (
     <aside
@@ -311,7 +316,7 @@ function DocSidebar({
           'thin-scrollbar',
           styles.menu,
           {
-            'menu--show': sidebarOpen,
+            'menu--show': mobileSidebarOpen,
             [styles.menuWithAnnouncementBar]:
               !isAnnouncementBarClosed && showAnnouncementBar,
           },
@@ -333,7 +338,7 @@ function DocSidebar({
           <ul className={clsx('menu__list', styles.menuList)}>
             <DocSidebarItems
               items={sidebar}
-              onItemClick={() => setSidebarOpen(false)}
+              onItemClick={() => setMobileSidebarOpen(false)}
               collapsible={sidebarCollapsible}
               activePath={path}
             />

docusaurus-theme/src/theme/DocStateContext.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createContext } from 'react';
+
+const DocStateContext = createContext(undefined);
+
+export default DocStateContext;

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState } from 'react';
+
+import DocStateContext from '@theme/DocStateContext';
+import type { Props } from '@theme/DocStateProvider';
+
+function DocStateProvider(props: Props): JSX.Element {
+  const [mobileSidebarLoaded, setMobileSidebarLoaded] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+
+  return (
+    <DocStateContext.Provider
+      value={{
+        mobileSidebarLoaded,
+        setMobileSidebarLoaded,
+        mobileSidebarOpen,
+        setMobileSidebarOpen,
+      }}
+    >
+      {props.children}
+    </DocStateContext.Provider>
+  );
+}
+
+export default DocStateProvider;

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

@@ -16,6 +16,7 @@ import LayoutHead from '@theme/LayoutHead';
 import type { Props } from '@theme/Layout';
 import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
 import { ThemeClassNames } from '@docusaurus/theme-common';
+import DocStateProvider from '@theme/DocStateProvider';
 import './styles.css';
 
 function Layout(props: Props): JSX.Element {
@@ -25,23 +26,25 @@ function Layout(props: Props): JSX.Element {
 
   return (
     <LayoutProviders>
-      <LayoutHead {...props} />
+      <DocStateProvider>
+        <LayoutHead {...props} />
 
-      <SkipToContent />
+        <SkipToContent />
 
-      <AnnouncementBar />
+        <AnnouncementBar />
 
-      <div
-        className={clsx(
-          ThemeClassNames.wrapper.main,
-          wrapperClassName,
-          pageClassName,
-        )}
-      >
-        {children}
-      </div>
+        <div
+          className={clsx(
+            ThemeClassNames.wrapper.main,
+            wrapperClassName,
+            pageClassName,
+          )}
+        >
+          {children}
+        </div>
 
-      {!noFooter && <Footer />}
+        {!noFooter && <Footer />}
+      </DocStateProvider>
     </LayoutProviders>
   );
 }

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

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+
+import DocStateContext from '@theme/DocStateContext';
+import type { DocStateContextProps } from '@theme/hooks/useDocStateContext';
+
+function useDocStateContext(): DocStateContextProps {
+  const context = useContext<DocStateContextProps | undefined>(DocStateContext);
+  if (context == null) {
+    throw new Error(
+      '"useDocStateContext" is used outside of "Layout" component.',
+    );
+  }
+  return context;
+}
+
+export default useDocStateContext;

docusaurus-theme/src/theme/hooks/useDocStateContext.ts

@@ -14,7 +14,7 @@ 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 useDocStateContext from '@theme/hooks/useDocStateContext';
 import { useActiveVersion } from '@theme/hooks/useDocs';
 import useWindowSize, { windowSizes } from '@theme/hooks/useWindowSize';
 import NavbarItem from '@theme/NavbarItem';
@@ -60,18 +60,23 @@ function Navbar(): JSX.Element {
   } = useDocusaurusContext();
   const { path: homePath } = useActiveVersion();
   const [navbarSidebarOpen, setNavbarSidebarOpen] = useState(false);
-  const { sidebarOpen, setSidebarOpen } = useUserPreferencesContext();
+  const {
+    mobileSidebarOpen,
+    setMobileSidebarOpen,
+    setMobileSidebarLoaded,
+  } = useDocStateContext();
   const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
   const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
 
-  useLockBodyScroll(sidebarOpen);
+  useLockBodyScroll(mobileSidebarOpen);
   useLockBodyScroll(navbarSidebarOpen);
 
   const showSidebar = useCallback(() => {
-    setSidebarOpen(true);
+    setMobileSidebarLoaded(true);
+    setMobileSidebarOpen(true);
   }, []);
   const hideSidebar = useCallback(() => {
-    setSidebarOpen(false);
+    setMobileSidebarOpen(false);
   }, []);
 
   const showNavbarSidebar = useCallback(() => {
@@ -119,6 +124,7 @@ function Navbar(): JSX.Element {
               tabIndex={0}
               onClick={showSidebar}
               onKeyDown={showSidebar}
+              onMouseEnter={() => setMobileSidebarLoaded(true)}
             >
               <IconMenu />
             </button>
@@ -185,7 +191,7 @@ function Navbar(): JSX.Element {
           hideSidebar();
           hideNavbarSidebar();
         }}
-        visible={sidebarOpen || navbarSidebarOpen}
+        visible={mobileSidebarOpen || navbarSidebarOpen}
       />
       <div className={clsx('navbar-sidebar', styles.navbarSidebar)}>
         <div className="navbar-sidebar__brand">