@docusaurus/theme-classic 2.0.0-beta.2 → 2.0.0-beta.22

package/lib/theme/DocPage/index.js

@@ -1,173 +1,50 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@mdx-js/react");
-
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
-var _renderRoutes = _interopRequireDefault(require("@docusaurus/renderRoutes"));
-
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
-
-var _DocSidebar = _interopRequireDefault(require("@theme/DocSidebar"));
-
-var _MDXComponents = _interopRequireDefault(require("@theme/MDXComponents"));
-
-var _NotFound = _interopRequireDefault(require("@theme/NotFound"));
-
-var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
-
-var _router = require("@docusaurus/router");
-
-var _Translate = require("@docusaurus/Translate");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * 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.
  */
-function getSidebar({
-  versionMetadata,
-  currentDocRoute
-}) {
-  function addTrailingSlash(str) {
-    return str.endsWith('/') ? str : `${str}/`;
+import React from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  docVersionSearchTag,
+  DocsSidebarProvider,
+  DocsVersionProvider,
+  useDocRouteMetadata,
+} from '@docusaurus/theme-common/internal';
+import DocPageLayout from '@theme/DocPage/Layout';
+import NotFound from '@theme/NotFound';
+import SearchMetadata from '@theme/SearchMetadata';
+export default function DocPage(props) {
+  const {versionMetadata} = props;
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
+  if (!currentDocRouteMetadata) {
+    return <NotFound />;
   }
-
-  function removeTrailingSlash(str) {
-    return str.endsWith('/') ? str.slice(0, -1) : str;
-  }
-
-  const {
-    permalinkToSidebar,
-    docsSidebars
-  } = versionMetadata; // With/without trailingSlash, we should always be able to get the appropriate sidebar
-  // note: docs plugin permalinks currently never have trailing slashes
-  // trailingSlash is handled globally at the framework level, not plugin level
-
-  const sidebarName = permalinkToSidebar[currentDocRoute.path] || permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] || permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)];
-  const sidebar = docsSidebars[sidebarName];
-  return {
-    sidebar,
-    sidebarName
-  };
-}
-
-function DocPageContent({
-  currentDocRoute,
-  versionMetadata,
-  children
-}) {
-  var _siteConfig$themeConf, _siteConfig$themeConf2;
-
-  const {
-    siteConfig,
-    isClient
-  } = (0, _useDocusaurusContext.default)();
-  const {
-    pluginId,
-    version
-  } = versionMetadata;
-  const {
-    sidebarName,
-    sidebar
-  } = getSidebar({
-    versionMetadata,
-    currentDocRoute
-  });
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = (0, _react.useState)(false);
-  const [hiddenSidebar, setHiddenSidebar] = (0, _react.useState)(false);
-  const toggleSidebar = (0, _react.useCallback)(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false);
-    }
-
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
-  }, [hiddenSidebar]);
-  return <_Layout.default key={isClient} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docPages} pageClassName={_themeCommon.ThemeClassNames.page.docPage} searchMetadatas={{
-    version,
-    tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
-  }}>
-      <div className={_stylesModule.default.docPage}>
-        {sidebar && <aside className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
-        [_stylesModule.default.docSidebarContainerHidden]: hiddenSidebarContainer
-      })} onTransitionEnd={e => {
-        if (!e.currentTarget.classList.contains(_stylesModule.default.docSidebarContainer)) {
-          return;
-        }
-
-        if (hiddenSidebarContainer) {
-          setHiddenSidebar(true);
-        }
-      }}>
-            <_DocSidebar.default key={// Reset sidebar state on sidebar changes
-        // See https://github.com/facebook/docusaurus/issues/3414
-        sidebarName} sidebar={sidebar} path={currentDocRoute.path} sidebarCollapsible={(_siteConfig$themeConf = (_siteConfig$themeConf2 = siteConfig.themeConfig) === null || _siteConfig$themeConf2 === void 0 ? void 0 : _siteConfig$themeConf2.sidebarCollapsible) !== null && _siteConfig$themeConf !== void 0 ? _siteConfig$themeConf : true} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
-
-            {hiddenSidebar && <div className={_stylesModule.default.collapsedDocSidebar} title={(0, _Translate.translate)({
-          id: 'theme.docs.sidebar.expandButtonTitle',
-          message: 'Expand sidebar',
-          description: 'The ARIA label and title attribute for expand button of doc sidebar'
-        })} aria-label={(0, _Translate.translate)({
-          id: 'theme.docs.sidebar.expandButtonAriaLabel',
-          message: 'Expand sidebar',
-          description: 'The ARIA label and title attribute for expand button of doc sidebar'
-        })} tabIndex={0} role="button" onKeyDown={toggleSidebar} onClick={toggleSidebar}>
-                <_IconArrow.default className={_stylesModule.default.expandSidebarButtonIcon} />
-              </div>}
-          </aside>}
-        <main className={(0, _clsx.default)(_stylesModule.default.docMainContainer, {
-        [_stylesModule.default.docMainContainerEnhanced]: hiddenSidebarContainer || !sidebar
-      })}>
-          <div className={(0, _clsx.default)('container padding-top--md padding-bottom--lg', _stylesModule.default.docItemWrapper, {
-          [_stylesModule.default.docItemWrapperEnhanced]: hiddenSidebarContainer
-        })}>
-            <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
-          </div>
-        </main>
-      </div>
-    </_Layout.default>;
-}
-
-function DocPage(props) {
-  const {
-    route: {
-      routes: docRoutes
-    },
-    versionMetadata,
-    location
-  } = props;
-  const currentDocRoute = docRoutes.find(docRoute => (0, _router.matchPath)(location.pathname, docRoute));
-
-  if (!currentDocRoute) {
-    return <_NotFound.default {...props} />;
-  }
-
-  return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes, {
-      versionMetadata
-    })}
-    </DocPageContent>;
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <>
+      <SearchMetadata
+        version={versionMetadata.version}
+        tag={docVersionSearchTag(
+          versionMetadata.pluginId,
+          versionMetadata.version,
+        )}
+      />
+      <HtmlClassNameProvider
+        className={clsx(
+          // TODO: it should be removed from here
+          ThemeClassNames.wrapper.docsPages,
+          ThemeClassNames.page.docsDocPage,
+          props.versionMetadata.className,
+        )}>
+        <DocsVersionProvider version={versionMetadata}>
+          <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+            <DocPageLayout>{docElement}</DocPageLayout>
+          </DocsSidebarProvider>
+        </DocsVersionProvider>
+      </HtmlClassNameProvider>
+    </>
+  );
 }
-
-var _default = DocPage;
-exports.default = _default;

package/lib/theme/DocPaginator/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocPaginator';
+export default function DocPaginator(props: Props): JSX.Element;

package/lib/theme/DocPaginator/index.js

@@ -1,63 +1,47 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function DocPaginator(props) {
-  const {
-    metadata
-  } = props;
-  return <nav className="pagination-nav docusaurus-mt-lg" aria-label={(0, _Translate.translate)({
-    id: 'theme.docs.paginator.navAriaLabel',
-    message: 'Docs pages navigation',
-    description: 'The ARIA label for the docs pagination'
-  })}>
-      <div className="pagination-nav__item">
-        {metadata.previous && <_Link.default className="pagination-nav__link" to={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">
-              <_Translate.default id="theme.docs.paginator.previous" description="The label used to navigate to the previous doc">
-                Previous
-              </_Translate.default>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {metadata.previous.title}
-            </div>
-          </_Link.default>}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {metadata.next && <_Link.default className="pagination-nav__link" to={metadata.next.permalink}>
-            <div className="pagination-nav__sublabel">
-              <_Translate.default id="theme.docs.paginator.next" description="The label used to navigate to the next doc">
-                Next
-              </_Translate.default>
-            </div>
-            <div className="pagination-nav__label">
-              {metadata.next.title} &raquo;
-            </div>
-          </_Link.default>}
-      </div>
-    </nav>;
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
+export default function DocPaginator(props) {
+  const {previous, next} = props;
+  return (
+    <nav
+      className="pagination-nav docusaurus-mt-lg"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label for the docs pagination',
+      })}>
+      {previous && (
+        <PaginatorNavLink
+          {...previous}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.previous"
+              description="The label used to navigate to the previous doc">
+              Previous
+            </Translate>
+          }
+        />
+      )}
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="The label used to navigate to the next doc">
+              Next
+            </Translate>
+          }
+          isNext
+        />
+      )}
+    </nav>
+  );
 }
-
-var _default = DocPaginator;
-exports.default = _default;

package/lib/theme/DocSidebar/Desktop/CollapseButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebar/Desktop/CollapseButton';
+export default function CollapseButton({ onClick }: Props): JSX.Element;

package/lib/theme/DocSidebar/Desktop/CollapseButton/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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 from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function CollapseButton({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',
+      })}
+      aria-label={translate({
+        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,
+      )}
+      onClick={onClick}>
+      <IconArrow className={styles.collapseSidebarButtonIcon} />
+    </button>
+  );
+}

package/lib/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+:root {
+  --docusaurus-collapse-button-bg: transparent;
+  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
+}
+
+[data-theme='dark']:root {
+  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
+  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
+}
+
+@media (min-width: 997px) {
+  .collapseSidebarButton {
+    display: block !important;
+    background-color: var(--docusaurus-collapse-button-bg);
+    height: 40px;
+    position: sticky;
+    bottom: 0;
+    border-radius: 0;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+
+  .collapseSidebarButtonIcon {
+    transform: rotate(180deg);
+    margin-top: 4px;
+  }
+
+  [dir='rtl'] .collapseSidebarButtonIcon {
+    transform: rotate(0);
+  }
+
+  .collapseSidebarButton:hover,
+  .collapseSidebarButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+}
+
+.collapseSidebarButton {
+  display: none;
+}

package/lib/theme/DocSidebar/Desktop/Content/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebar/Desktop/Content';
+export default function DocSidebarDesktopContent({ path, sidebar, className, }: Props): JSX.Element;

package/lib/theme/DocSidebar/Desktop/Content/index.js

@@ -0,0 +1,44 @@
+/**
+ * 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 clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useAnnouncementBar,
+  useScrollPosition,
+} from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import styles from './styles.module.css';
+function useShowAnnouncementBar() {
+  const {isActive} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
+        setShowAnnouncementBar(scrollY === 0);
+      }
+    },
+    [isActive],
+  );
+  return isActive && showAnnouncementBar;
+}
+export default function DocSidebarDesktopContent({path, sidebar, className}) {
+  const showAnnouncementBar = useShowAnnouncementBar();
+  return (
+    <nav
+      className={clsx(
+        'menu thin-scrollbar',
+        styles.menu,
+        showAnnouncementBar && styles.menuWithAnnouncementBar,
+        className,
+      )}>
+      <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+        <DocSidebarItems items={sidebar} activePath={path} level={1} />
+      </ul>
+    </nav>
+  );
+}

package/lib/theme/DocSidebar/Desktop/Content/styles.module.css

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .menu {
+    flex-grow: 1;
+    padding: 0.5rem;
+  }
+  @supports (scrollbar-gutter: stable) {
+    .menu {
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      scrollbar-gutter: stable;
+    }
+  }
+
+  .menuWithAnnouncementBar {
+    margin-bottom: var(--docusaurus-announcement-bar-height);
+  }
+}

package/lib/theme/DocSidebar/Desktop/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 from 'react';
+import type { Props } from '@theme/DocSidebar/Desktop';
+declare function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarDesktop>;
+export default _default;

package/lib/theme/DocSidebar/Desktop/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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 from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import Logo from '@theme/Logo';
+import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
+import Content from '@theme/DocSidebar/Desktop/Content';
+import styles from './styles.module.css';
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
+  const {
+    navbar: {hideOnScroll},
+    docs: {
+      sidebar: {hideable},
+    },
+  } = useThemeConfig();
+  return (
+    <div
+      className={clsx(
+        styles.sidebar,
+        hideOnScroll && styles.sidebarWithHideableNavbar,
+        isHidden && styles.sidebarHidden,
+      )}>
+      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <Content path={path} sidebar={sidebar} />
+      {hideable && <CollapseButton onClick={onCollapse} />}
+    </div>
+  );
+}
+export default React.memo(DocSidebarDesktop);

package/lib/theme/DocSidebar/Desktop/styles.module.css

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    height: 100%;
+    position: sticky;
+    top: 0;
+    padding-top: var(--ifm-navbar-height);
+    width: var(--doc-sidebar-width);
+    transition: opacity 50ms ease;
+  }
+
+  .sidebarWithHideableNavbar {
+    padding-top: 0;
+  }
+
+  .sidebarHidden {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .sidebarLogo {
+    display: flex !important;
+    align-items: center;
+    margin: 0 var(--ifm-navbar-padding-horizontal);
+    min-height: var(--ifm-navbar-height);
+    max-height: var(--ifm-navbar-height);
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  .sidebarLogo img {
+    margin-right: 0.5rem;
+    height: 2rem;
+  }
+}
+
+.sidebarLogo {
+  display: none;
+}

package/lib/theme/DocSidebar/Mobile/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 from 'react';
+import type { Props } from '@theme/DocSidebar/Mobile';
+declare function DocSidebarMobile(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
+export default _default;

package/lib/theme/DocSidebar/Mobile/index.js

@@ -0,0 +1,45 @@
+/**
+ * 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 from 'react';
+import clsx from 'clsx';
+import {
+  NavbarSecondaryMenuFiller,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+// eslint-disable-next-line react/function-component-definition
+const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <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) {
+            mobileSidebar.toggle();
+          }
+          if (item.type === 'link') {
+            mobileSidebar.toggle();
+          }
+        }}
+        level={1}
+      />
+    </ul>
+  );
+};
+function DocSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+export default React.memo(DocSidebarMobile);

package/lib/theme/DocSidebar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/DocSidebar';
+export default function DocSidebar(props: Props): JSX.Element;