@docusaurus/theme-classic 2.0.0-beta.8bda3b2db → 2.0.0-beta.9

package/lib/theme/DocItem/styles.module.css

@@ -5,22 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.docItemContainer article > *:first-child,
 .docItemContainer header + * {
   margin-top: 0;
 }
 
-.lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
-  font-size: smaller;
-}
-
-@media only screen and (min-width: 997px) {
+@media (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
   }
 
-  .lastUpdated {
-    text-align: right;
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
   }
 }

package/lib/theme/DocItemFooter/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemFooter;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _LastUpdated = _interopRequireDefault(require("@theme/LastUpdated"));
+
+var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
+
+var _TagsListInline = _interopRequireDefault(require("@theme/TagsListInline"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+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 TagsRow(props) {
+  return <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooterTagsRow, 'row margin-bottom--sm')}>
+      <div className="col">
+        <_TagsListInline.default {...props} />
+      </div>
+    </div>;
+}
+
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt
+}) {
+  return <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+      <div className="col">{editUrl && <_EditThisPage.default editUrl={editUrl} />}</div>
+
+      <div className={(0, _clsx.default)('col', _stylesModule.default.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
+      </div>
+    </div>;
+}
+
+function DocItemFooter(props) {
+  const {
+    content: DocContent
+  } = props;
+  const {
+    metadata
+  } = DocContent;
+  const {
+    editUrl,
+    lastUpdatedAt,
+    formattedLastUpdatedAt,
+    lastUpdatedBy,
+    tags
+  } = metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+
+  if (!canDisplayFooter) {
+    return <></>;
+  }
+
+  return <footer className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayEditMetaRow && <EditMetaRow editUrl={editUrl} lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} formattedLastUpdatedAt={formattedLastUpdatedAt} />}
+    </footer>;
+}

package/lib/theme/DocItemFooter/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}

package/lib/theme/DocPage/index.js

@@ -9,8 +9,6 @@ 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"));
@@ -23,6 +21,8 @@ var _NotFound = _interopRequireDefault(require("@theme/NotFound"));
 
 var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
 
+var _BackToTopButton = _interopRequireDefault(require("@theme/BackToTopButton"));
+
 var _router = require("@docusaurus/router");
 
 var _Translate = require("@docusaurus/Translate");
@@ -33,6 +33,8 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _Head = _interopRequireDefault(require("@docusaurus/Head"));
+
 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); }
@@ -45,55 +47,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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}/`;
-  }
-
-  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 sidebarName = currentDocRoute.sidebar;
+  const sidebar = sidebarName ? versionMetadata.docsSidebars[sidebarName] : undefined;
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = (0, _react.useState)(false);
   const [hiddenSidebar, setHiddenSidebar] = (0, _react.useState)(false);
   const toggleSidebar = (0, _react.useCallback)(() => {
@@ -101,13 +65,15 @@ function DocPageContent({
       setHiddenSidebar(false);
     }
 
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
+    setHiddenSidebarContainer(value => !value);
   }, [hiddenSidebar]);
-  return <_Layout.default key={isClient} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docPages} pageClassName={_themeCommon.ThemeClassNames.page.docPage} searchMetadatas={{
+  return <_Layout.default wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsDocPage} searchMetadatas={{
     version,
     tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
   }}>
       <div className={_stylesModule.default.docPage}>
+        <_BackToTopButton.default />
+
         {sidebar && <aside className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
         [_stylesModule.default.docSidebarContainerHidden]: hiddenSidebarContainer
       })} onTransitionEnd={e => {
@@ -121,7 +87,7 @@ function DocPageContent({
       }}>
             <_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} />
+        sidebarName} sidebar={sidebar} path={currentDocRoute.path} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
 
             {hiddenSidebar && <div className={_stylesModule.default.collapsedDocSidebar} title={(0, _Translate.translate)({
           id: 'theme.docs.sidebar.expandButtonTitle',
@@ -159,12 +125,22 @@ function DocPage(props) {
   const currentDocRoute = docRoutes.find(docRoute => (0, _router.matchPath)(location.pathname, docRoute));
 
   if (!currentDocRoute) {
-    return <_NotFound.default {...props} />;
+    return <_NotFound.default />;
   }
 
-  return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes)}
-    </DocPageContent>;
+  return <>
+      <_Head.default>
+        {
+        /* TODO we should add a core addRoute({htmlClassName}) generic plugin option */
+      }
+        <html className={versionMetadata.className} />
+      </_Head.default>
+      <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
+        {(0, _renderRoutes.default)(docRoutes, {
+        versionMetadata
+      })}
+      </DocPageContent>
+    </>;
 }
 
 var _default = DocPage;

package/lib/theme/DocPage/styles.module.css

@@ -7,6 +7,7 @@
 
 :root {
   --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
 }
 
 :global(.docs-wrapper) {
@@ -19,6 +20,10 @@
   width: 100%;
 }
 
+.docSidebarContainer {
+  display: none;
+}
+
 @media (min-width: 997px) {
   .docMainContainer {
     flex-grow: 1;
@@ -26,10 +31,11 @@
   }
 
   .docMainContainerEnhanced {
-    max-width: none;
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
   }
 
   .docSidebarContainer {
+    display: block;
     width: var(--doc-sidebar-width);
     margin-top: calc(-1 * var(--ifm-navbar-height));
     border-right: 1px solid var(--ifm-toc-border-color);
@@ -39,7 +45,7 @@
   }
 
   .docSidebarContainerHidden {
-    width: 30px;
+    width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
 
@@ -77,24 +83,3 @@
     ) !important;
   }
 }
-
-@media (max-width: 996px) {
-  .docSidebarContainer {
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 997px) and (max-width: 1320px) {
-  .docItemWrapper {
-    max-width: calc(
-      var(--ifm-container-width) - var(--doc-sidebar-width) -
-        var(--ifm-spacing-horizontal) * 2
-    );
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
-    );
-  }
-}

package/lib/theme/DocSidebar/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DocSidebar;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -11,28 +11,16 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _useUserPreferencesContext = _interopRequireDefault(require("@theme/hooks/useUserPreferencesContext"));
-
-var _useLockBodyScroll = _interopRequireDefault(require("@theme/hooks/useLockBodyScroll"));
-
-var _useWindowSize = _interopRequireWildcard(require("@theme/hooks/useWindowSize"));
-
-var _useScrollPosition = _interopRequireDefault(require("@theme/hooks/useScrollPosition"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
+var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
 
 var _Logo = _interopRequireDefault(require("@theme/Logo"));
 
 var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
 
-var _IconMenu = _interopRequireDefault(require("@theme/IconMenu"));
-
-var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
-
 var _Translate = require("@docusaurus/Translate");
 
+var _DocSidebarItem = require("@theme/DocSidebarItem");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,181 +35,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const MOBILE_TOGGLE_SIZE = 24;
-
-const isActiveSidebarItem = (item, activePath) => {
-  if (item.type === 'link') {
-    return (0, _themeCommon.isSamePath)(item.href, activePath);
-  }
-
-  if (item.type === 'category') {
-    return item.items.some(subItem => isActiveSidebarItem(subItem, activePath));
-  }
-
-  return false;
-}; // Optimize sidebar at each "level"
-// TODO this item should probably not receive the "activePath" props
-// TODO this triggers whole sidebar re-renders on navigation
-
-
-const DocSidebarItems = (0, _react.memo)(function DocSidebarItems({
-  items,
-  ...props
-}) {
-  return items.map((item, index) => <DocSidebarItem key={index} // sidebar is static, the index does not change
-  item={item} {...props} />);
-});
-
-function DocSidebarItem(props) {
-  switch (props.item.type) {
-    case 'category':
-      return <DocSidebarItemCategory {...props} />;
-
-    case 'link':
-    default:
-      return <DocSidebarItemLink {...props} />;
-  }
-}
-
-function DocSidebarItemCategory({
-  item,
-  onItemClick,
-  collapsible,
-  activePath,
-  ...props
-}) {
-  const {
-    items,
-    label
-  } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  const wasActive = (0, _themeCommon.usePrevious)(isActive); // active categories are always initialized as expanded
-  // the default (item.collapsed) is only used for non-active categories
-
-  const [collapsed, setCollapsed] = (0, _react.useState)(() => {
-    if (!collapsible) {
-      return false;
-    }
-
-    return isActive ? false : item.collapsed;
-  });
-  const menuListRef = (0, _react.useRef)(null);
-  const [menuListHeight, setMenuListHeight] = (0, _react.useState)(undefined);
-
-  const handleMenuListHeight = (calc = true) => {
-    var _menuListRef$current;
-
-    setMenuListHeight(calc ? `${(_menuListRef$current = menuListRef.current) === null || _menuListRef$current === void 0 ? void 0 : _menuListRef$current.scrollHeight}px` : undefined);
-  }; // If we navigate to a category, it should automatically expand itself
-
-
-  (0, _react.useEffect)(() => {
-    const justBecameActive = isActive && !wasActive;
-
-    if (justBecameActive && collapsed) {
-      setCollapsed(false);
-    }
-  }, [isActive, wasActive, collapsed]);
-  const handleItemClick = (0, _react.useCallback)(e => {
-    e.preventDefault();
-
-    if (!menuListHeight) {
-      handleMenuListHeight();
-    }
-
-    setTimeout(() => setCollapsed(state => !state), 100);
-  }, [menuListHeight]);
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return <li className={(0, _clsx.default)('menu__list-item', {
-    'menu__list-item--collapsed': collapsed
-  })}>
-      <a className={(0, _clsx.default)('menu__link', {
-      'menu__link--sublist': collapsible,
-      'menu__link--active': collapsible && isActive,
-      [_stylesModule.default.menuLinkText]: !collapsible
-    })} onClick={collapsible ? handleItemClick : undefined} href={collapsible ? '#!' : undefined} {...props}>
-        {label}
-      </a>
-      <ul className="menu__list" ref={menuListRef} style={{
-      height: menuListHeight
-    }} onTransitionEnd={() => {
-      if (!collapsed) {
-        handleMenuListHeight(false);
-      }
-    }}>
-        <DocSidebarItems items={items} tabIndex={collapsed ? '-1' : '0'} onItemClick={onItemClick} collapsible={collapsible} activePath={activePath} />
-      </ul>
-    </li>;
-}
-
-function DocSidebarItemLink({
-  item,
-  onItemClick,
-  activePath,
-  collapsible: _collapsible,
-  ...props
-}) {
-  const {
-    href,
-    label
-  } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  return <li className="menu__list-item" key={label}>
-      <_Link.default className={(0, _clsx.default)('menu__link', {
-      'menu__link--active': isActive
-    })} to={href} {...(0, _isInternalUrl.default)(href) && {
-      isNavLink: true,
-      exact: true,
-      onClick: onItemClick
-    }} {...props}>
-        {(0, _isInternalUrl.default)(href) ? label : <span>
-            {label}
-            <_IconExternalLink.default />
-          </span>}
-      </_Link.default>
-    </li>;
-}
-
 function useShowAnnouncementBar() {
   const {
-    isAnnouncementBarClosed
-  } = (0, _useUserPreferencesContext.default)();
-  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isAnnouncementBarClosed);
-  (0, _useScrollPosition.default)(({
+    isActive
+  } = (0, _themeCommon.useAnnouncementBar)();
+  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(isActive);
+  (0, _themeCommon.useScrollPosition)(({
     scrollY
   }) => {
-    if (!isAnnouncementBarClosed) {
+    if (isActive) {
       setShowAnnouncementBar(scrollY === 0);
     }
-  });
-  return showAnnouncementBar;
-}
-
-function useResponsiveSidebar() {
-  const [showResponsiveSidebar, setShowResponsiveSidebar] = (0, _react.useState)(false);
-  (0, _useLockBodyScroll.default)(showResponsiveSidebar);
-  const windowSize = (0, _useWindowSize.default)();
-  (0, _react.useEffect)(() => {
-    if (windowSize === _useWindowSize.windowSizes.desktop) {
-      setShowResponsiveSidebar(false);
-    }
-  }, [windowSize]);
-  const closeResponsiveSidebar = (0, _react.useCallback)(e => {
-    e.target.blur();
-    setShowResponsiveSidebar(false);
-  }, [setShowResponsiveSidebar]);
-  const toggleResponsiveSidebar = (0, _react.useCallback)(() => {
-    setShowResponsiveSidebar(value => !value);
-  }, [setShowResponsiveSidebar]);
-  return {
-    showResponsiveSidebar,
-    closeResponsiveSidebar,
-    toggleResponsiveSidebar
-  };
+  }, [isActive]);
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({
@@ -240,29 +66,9 @@ function HideableSidebarButton({
     </button>;
 }
 
-function ResponsiveSidebarButton({
-  responsiveSidebarOpened,
-  onClick
-}) {
-  return <button aria-label={responsiveSidebarOpened ? (0, _Translate.translate)({
-    id: 'theme.docs.sidebar.responsiveCloseButtonLabel',
-    message: 'Close menu',
-    description: 'The ARIA label for close button of mobile doc sidebar'
-  }) : (0, _Translate.translate)({
-    id: 'theme.docs.sidebar.responsiveOpenButtonLabel',
-    message: 'Open menu',
-    description: 'The ARIA label for open button of mobile doc sidebar'
-  })} aria-haspopup="true" className="button button--secondary button--sm menu__button" type="button" onClick={onClick}>
-      {responsiveSidebarOpened ? <span className={(0, _clsx.default)(_stylesModule.default.sidebarMenuIcon, _stylesModule.default.sidebarMenuCloseIcon)}>
-          &times;
-        </span> : <_IconMenu.default className={_stylesModule.default.sidebarMenuIcon} height={MOBILE_TOGGLE_SIZE} width={MOBILE_TOGGLE_SIZE} />}
-    </button>;
-}
-
-function DocSidebar({
+function DocSidebarDesktop({
   path,
   sidebar,
-  sidebarCollapsible = true,
   onCollapse,
   isHidden
 }) {
@@ -273,36 +79,48 @@ function DocSidebar({
     },
     hideableSidebar
   } = (0, _themeCommon.useThemeConfig)();
-  const {
-    isAnnouncementBarClosed
-  } = (0, _useUserPreferencesContext.default)();
-  const {
-    showResponsiveSidebar,
-    closeResponsiveSidebar,
-    toggleResponsiveSidebar
-  } = useResponsiveSidebar();
   return <div className={(0, _clsx.default)(_stylesModule.default.sidebar, {
     [_stylesModule.default.sidebarWithHideableNavbar]: hideOnScroll,
     [_stylesModule.default.sidebarHidden]: isHidden
   })}>
       {hideOnScroll && <_Logo.default tabIndex={-1} className={_stylesModule.default.sidebarLogo} />}
-      <nav className={(0, _clsx.default)('menu', 'menu--responsive', 'thin-scrollbar', _stylesModule.default.menu, {
-      'menu--show': showResponsiveSidebar,
-      [_stylesModule.default.menuWithAnnouncementBar]: !isAnnouncementBarClosed && showAnnouncementBar
-    })} aria-label={(0, _Translate.translate)({
-      id: 'theme.docs.sidebar.navAriaLabel',
-      message: 'Sidebar navigation',
-      description: 'The ARIA label for documentation menu'
+      <nav className={(0, _clsx.default)('menu thin-scrollbar', _stylesModule.default.menu, {
+      [_stylesModule.default.menuWithAnnouncementBar]: showAnnouncementBar
     })}>
-        <ResponsiveSidebarButton responsiveSidebarOpened={showResponsiveSidebar} onClick={toggleResponsiveSidebar} />
-
-        <ul className="menu__list">
-          <DocSidebarItems items={sidebar} onItemClick={closeResponsiveSidebar} collapsible={sidebarCollapsible} activePath={path} />
+        <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+          <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
     </div>;
 }
 
-var _default = DocSidebar;
-exports.default = _default;
+const DocSidebarMobileSecondaryMenu = ({
+  toggleSidebar,
+  sidebar,
+  path
+}) => {
+  return <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} onItemClick={() => toggleSidebar()} level={1} />
+    </ul>;
+};
+
+function DocSidebarMobile(props) {
+  return <_themeCommon.MobileSecondaryMenuFiller component={DocSidebarMobileSecondaryMenu} props={props} />;
+}
+
+const DocSidebarDesktopMemo = _react.default.memo(DocSidebarDesktop);
+
+const DocSidebarMobileMemo = _react.default.memo(DocSidebarMobile);
+
+function DocSidebar(props) {
+  const windowSize = (0, _useWindowSize.default)(); // Desktop sidebar visible on hydration: need SSR rendering
+
+  const shouldRenderSidebarDesktop = windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
+
+  const shouldRenderSidebarMobile = windowSize === 'mobile';
+  return <>
+      {shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
+      {shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
+    </>;
+}

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

@@ -53,14 +53,6 @@
     padding: 0.5rem;
   }
 
-  .menuLinkText {
-    cursor: initial;
-  }
-
-  .menuLinkText:hover {
-    background: none;
-  }
-
   .menuWithAnnouncementBar {
     margin-bottom: var(--docusaurus-announcement-bar-height);
   }
@@ -112,13 +104,3 @@
   line-height: 0.9;
   width: 24px;
 }
-
-:global(.menu__list) :global(.menu__list) {
-  overflow-y: hidden;
-  will-change: height;
-  transition: height var(--ifm-transition-fast) linear;
-}
-
-:global(.menu__list-item--collapsed) :global(.menu__list) {
-  height: 0 !important;
-}