Merge pull request #495 from symblai/fixing-mobile-view-crash

removed MobileSecondaryMenuFiller
symblai · Apr 21, 2022 · a19236f · a19236f
2 parents af15276 + c1abeaf
commit a19236f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/theme/DocSidebar/index.js b/src/theme/DocSidebar/index.js
@@ -4,78 +4,80 @@
  * 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 clsx from 'clsx';
+import React, { useState } from "react";
+import clsx from "clsx";
 import {
   useThemeConfig,
   useAnnouncementBar,
-  MobileSecondaryMenuFiller,
   ThemeClassNames,
   useScrollPosition,
   useWindowSize,
-} from '@docusaurus/theme-common';
-import Logo from '@theme/Logo';
-import IconArrow from '@theme/IconArrow';
-import {translate} from '@docusaurus/Translate';
-import DocSidebarItems from '@theme/DocSidebarItems';
-import styles from './styles.module.css';
+} from "@docusaurus/theme-common";
+import Logo from "@theme/Logo";
+import IconArrow from "@theme/IconArrow";
+import { translate } from "@docusaurus/Translate";
+import DocSidebarItems from "@theme/DocSidebarItems";
+import styles from "./styles.module.css";
 
 function useShowAnnouncementBar() {
-  const {isActive} = useAnnouncementBar();
+  const { isActive } = useAnnouncementBar();
   const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
   useScrollPosition(
-    ({scrollY}) => {
+    ({ scrollY }) => {
       if (isActive) {
         setShowAnnouncementBar(scrollY === 0);
       }
     },
-    [isActive],
+    [isActive]
   );
   return isActive && showAnnouncementBar;
 }
 
-function HideableSidebarButton({onClick}) {
+function HideableSidebarButton({ onClick }) {
   return (
     <button
       type="button"
       title={translate({
-        id: 'theme.docs.sidebar.collapseButtonTitle',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
+        id: "theme.docs.sidebar.collapseButtonTitle",
+        message: "Collapse sidebar",
+        description: "The title attribute for collapse button of doc sidebar",
       })}
       aria-label={translate({
-        id: 'theme.docs.sidebar.collapseButtonAriaLabel',
-        message: 'Collapse sidebar',
-        description: 'The title attribute for collapse button of doc sidebar',
+        id: "theme.docs.sidebar.collapseButtonAriaLabel",
+        message: "Collapse sidebar",
+        description: "The title attribute for collapse button of doc sidebar",
       })}
       className={clsx(
-        'button button--secondary button--outline',
-        styles.collapseSidebarButton,
+        "button button--secondary button--outline",
+        styles.collapseSidebarButton
       )}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       <IconArrow className={styles.collapseSidebarButtonIcon} />
     </button>
   );
 }
 
-function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
+function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }) {
   const showAnnouncementBar = useShowAnnouncementBar();
   const {
-    navbar: {hideOnScroll},
+    navbar: { hideOnScroll },
     hideableSidebar,
   } = useThemeConfig();
   return (
     <div
       className={clsx(styles.sidebar, {
         [styles.sidebarWithHideableNavbar]: hideOnScroll,
         [styles.sidebarHidden]: isHidden,
-      })}>
+      })}
+    >
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <nav
-        className={clsx('menu thin-scrollbar', styles.menu, {
+        className={clsx("menu thin-scrollbar", styles.menu, {
           [styles.menuWithAnnouncementBar]: showAnnouncementBar,
-        })}>
-        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+        })}
+      >
+        <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
           <DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
@@ -84,32 +86,25 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
   );
 } // eslint-disable-next-line react/function-component-definition
 
-const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => (
-  <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
-    <DocSidebarItems
-      items={sidebar}
-      activePath={path}
-      onItemClick={(item) => {
-        // Mobile sidebar should only be closed if the category has a link
-        if (item.type === 'category' && item.href) {
-          toggleSidebar();
-        }
-
-        if (item.type === 'link') {
-          toggleSidebar();
-        }
-      }}
-      level={1}
-    />
-  </ul>
-);
-
-function DocSidebarMobile(props) {
+function DocSidebarMobile({ toggleSidebar, sidebar, path }) {
   return (
-    <MobileSecondaryMenuFiller
-      component={DocSidebarMobileSecondaryMenu}
-      props={props}
-    />
+    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
+      <DocSidebarItems
+        items={sidebar}
+        activePath={path}
+        onItemClick={(item) => {
+          // Mobile sidebar should only be closed if the category has a link
+          if (item.type === "category" && item.href) {
+            toggleSidebar();
+          }
+
+          if (item.type === "link") {
+            toggleSidebar();
+          }
+        }}
+        level={1}
+      />
+    </ul>
   );
 }
 
@@ -119,9 +114,9 @@ export default function DocSidebar(props) {
   const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
 
   const shouldRenderSidebarDesktop =
-    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
+    windowSize === "desktop" || windowSize === "ssr"; // Mobile sidebar not visible on hydration: can avoid SSR rendering
 
-  const shouldRenderSidebarMobile = windowSize === 'mobile';
+  const shouldRenderSidebarMobile = windowSize === "mobile";
   return (
     <>
       {shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}