@docusaurus/theme-classic 2.0.0-beta.1 → 2.0.0-beta.10

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/DocPaginator/index.js

@@ -25,7 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function DocPaginator(props) {
   const {
-    metadata
+    previous,
+    next
   } = props;
   return <nav className="pagination-nav docusaurus-mt-lg" aria-label={(0, _Translate.translate)({
     id: 'theme.docs.paginator.navAriaLabel',
@@ -33,27 +34,25 @@ function DocPaginator(props) {
     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}>
+        {previous && <_Link.default className="pagination-nav__link" to={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}
+              &laquo; {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}>
+        {next && <_Link.default className="pagination-nav__link" to={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>
+            <div className="pagination-nav__label">{next.title} &raquo;</div>
           </_Link.default>}
       </div>
     </nav>;

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,189 +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;
-
-function usePrevious(value) {
-  const ref = (0, _react.useRef)(value);
-  (0, _react.useEffect)(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-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 = 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({
@@ -248,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
 }) {
@@ -281,36 +79,56 @@ 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>;
+} // eslint-disable-next-line react/function-component-definition
+
+
+const DocSidebarMobileSecondaryMenu = ({
+  toggleSidebar,
+  sidebar,
+  path
+}) => <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+    <_DocSidebarItem.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) {
+  return <_themeCommon.MobileSecondaryMenuFiller component={DocSidebarMobileSecondaryMenu} props={props} />;
 }
 
-var _default = DocSidebar;
-exports.default = _default;
+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;
-}

package/lib/theme/DocSidebarItem/index.js

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocSidebarItems = void 0;
+exports.default = DocSidebarItem;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
+
+var _Translate = require("@docusaurus/Translate");
+
+var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
+
+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.
+ */
+// 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)(({
+  items,
+  ...props
+}) => <>
+      {items.map((item, index) => <DocSidebarItem key={index} // sidebar is static, the index does not change
+  item={item} {...props} />)}
+    </>);
+exports.DocSidebarItems = DocSidebarItems;
+
+function DocSidebarItem({
+  item,
+  ...props
+}) {
+  switch (item.type) {
+    case 'category':
+      if (item.items.length === 0) {
+        return null;
+      }
+
+      return <DocSidebarItemCategory item={item} {...props} />;
+
+    case 'link':
+    default:
+      return <DocSidebarItemLink item={item} {...props} />;
+  }
+} // If we navigate to a category and it becomes active, it should automatically expand itself
+
+
+function useAutoExpandActiveCategory({
+  isActive,
+  collapsed,
+  setCollapsed
+}) {
+  const wasActive = (0, _themeCommon.usePrevious)(isActive);
+  (0, _react.useEffect)(() => {
+    const justBecameActive = isActive && !wasActive;
+
+    if (justBecameActive && collapsed) {
+      setCollapsed(false);
+    }
+  }, [isActive, wasActive, collapsed, setCollapsed]);
+} // When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
+// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
+// React hydration becomes an optional progressive enhancement
+// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+// see https://github.com/facebook/docusaurus/issues/3030
+
+
+function useCategoryHrefWithSSRFallback(item) {
+  const isBrowser = (0, _useIsBrowser.default)();
+  return (0, _react.useMemo)(() => {
+    if (item.href) {
+      return item.href;
+    } // In these cases, it's not necessary to render a fallback
+    // We skip the "findFirstCategoryLink" computation
+
+
+    if (isBrowser || !item.collapsible) {
+      return undefined;
+    }
+
+    return (0, _themeCommon.findFirstCategoryLink)(item);
+  }, [item, isBrowser]);
+}
+
+function DocSidebarItemCategory({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  ...props
+}) {
+  const {
+    items,
+    label,
+    collapsible,
+    className,
+    href
+  } = item;
+  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
+  const isActive = (0, _themeCommon.isActiveSidebarItem)(item, activePath);
+  const {
+    collapsed,
+    setCollapsed,
+    toggleCollapsed
+  } = (0, _themeCommon.useCollapsible)({
+    // active categories are always initialized as expanded
+    // the default (item.collapsed) is only used for non-active categories
+    initialState: () => {
+      if (!collapsible) {
+        return false;
+      }
+
+      return isActive ? false : item.collapsed;
+    }
+  });
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    setCollapsed
+  });
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemCategory, _themeCommon.ThemeClassNames.docs.docSidebarItemCategoryLevel(level), 'menu__list-item', {
+    'menu__list-item--collapsed': collapsed
+  }, className)}>
+      <div className="menu__list-item-collapsible">
+        <_Link.default className={(0, _clsx.default)('menu__link', {
+        'menu__link--sublist': collapsible && !href,
+        'menu__link--active': isActive,
+        [_stylesModule.default.menuLinkText]: !collapsible,
+        [_stylesModule.default.hasHref]: !!hrefWithSSRFallback
+      })} onClick={collapsible ? e => {
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+
+        if (href) {
+          setCollapsed(false);
+        } else {
+          e.preventDefault();
+          toggleCollapsed();
+        }
+      } : () => {
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+      }} href={collapsible ? hrefWithSSRFallback !== null && hrefWithSSRFallback !== void 0 ? hrefWithSSRFallback : '#' : hrefWithSSRFallback} {...props}>
+          {label}
+        </_Link.default>
+        {href && collapsible && <button aria-label={(0, _Translate.translate)({
+        id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
+        message: "Toggle the collapsible sidebar category '{label}'",
+        description: 'The ARIA label to toggle the collapsible sidebar category'
+      }, {
+        label
+      })} type="button" className="clean-btn menu__caret" onClick={e => {
+        e.preventDefault();
+        toggleCollapsed();
+      }} />}
+      </div>
+
+      <_themeCommon.Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        <DocSidebarItems items={items} tabIndex={collapsed ? -1 : 0} onItemClick={onItemClick} activePath={activePath} level={level + 1} />
+      </_themeCommon.Collapsible>
+    </li>;
+}
+
+function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  ...props
+}) {
+  const {
+    href,
+    label,
+    className
+  } = item;
+  const isActive = (0, _themeCommon.isActiveSidebarItem)(item, activePath);
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemLink, _themeCommon.ThemeClassNames.docs.docSidebarItemLinkLevel(level), 'menu__list-item', className)} key={label}>
+      <_Link.default className={(0, _clsx.default)('menu__link', {
+      'menu__link--active': isActive
+    })} aria-current={isActive ? 'page' : undefined} to={href} {...(0, _isInternalUrl.default)(href) && {
+      onClick: onItemClick ? () => onItemClick(item) : undefined
+    }} {...props}>
+        {(0, _isInternalUrl.default)(href) ? label : <span>
+            {label}
+            <_IconExternalLink.default />
+          </span>}
+      </_Link.default>
+    </li>;
+}