@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.13

package/lib/theme/Navbar/index.js

@@ -25,12 +25,16 @@ var _useLockBodyScroll = _interopRequireDefault(require("@theme/hooks/useLockBod
 
 var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
 
+var _useDocs = require("@theme/hooks/useDocs");
+
 var _NavbarItem = _interopRequireDefault(require("@theme/NavbarItem"));
 
 var _Logo = _interopRequireDefault(require("@theme/Logo"));
 
 var _IconMenu = _interopRequireDefault(require("@theme/IconMenu"));
 
+var _IconClose = _interopRequireDefault(require("@theme/IconClose"));
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,9 +50,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * LICENSE file in the root directory of this source tree.
  */
 // retrocompatible with v1
-const DefaultNavItemPosition = 'right'; // If split links by left/right
+const DefaultNavItemPosition = 'right';
+
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return (0, _themeCommon.useThemeConfig)().navbar.items;
+} // If split links by left/right
 // if position is unspecified, fallback to right (as v1)
 
+
 function splitNavItemsByPosition(items) {
   const leftItems = items.filter(item => {
     var _item$position;
@@ -71,7 +81,19 @@ function useMobileSidebar() {
 
   const shouldRender = windowSize === 'mobile'; // || windowSize === 'ssr';
 
-  const [shown, setShown] = (0, _react.useState)(false);
+  const [shown, setShown] = (0, _react.useState)(false); // Close mobile sidebar on navigation pop
+  // Most likely firing when using the Android back button (but not only)
+
+  (0, _themeCommon.useHistoryPopHandler)(() => {
+    if (shown) {
+      setShown(false); // Should we prevent the navigation here?
+      // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
+
+      return false; // prevent pop navigation
+    }
+
+    return undefined;
+  });
   const toggle = (0, _react.useCallback)(() => {
     setShown(s => !s);
   }, []);
@@ -116,12 +138,10 @@ function useSecondaryMenu({
     toggleSidebar
   });
   const previousContent = (0, _themeCommon.usePrevious)(content);
-  const [shown, setShown] = (0, _react.useState)(() => {
-    // /!\ content is set with useEffect,
-    // so it's not available on mount anyway
-    // "return !!content" => always returns false
-    return false;
-  }); // When content is become available for the first time (set in useEffect)
+  const [shown, setShown] = (0, _react.useState)(() => // /!\ content is set with useEffect,
+  // so it's not available on mount anyway
+  // "return !!content" => always returns false
+  false); // When content is become available for the first time (set in useEffect)
   // we set this content to be shown!
 
   (0, _react.useEffect)(() => {
@@ -159,11 +179,7 @@ function NavbarMobileSidebar({
   toggleSidebar
 }) {
   (0, _useLockBodyScroll.default)(sidebarShown);
-  const {
-    navbar: {
-      items
-    }
-  } = (0, _themeCommon.useThemeConfig)();
+  const items = useNavbarItems();
   const colorModeToggle = useColorModeToggle();
   const secondaryMenu = useSecondaryMenu({
     sidebarShown,
@@ -172,25 +188,27 @@ function NavbarMobileSidebar({
   return <div className="navbar-sidebar">
       <div className="navbar-sidebar__brand">
         <_Logo.default className="navbar__brand" imageClassName="navbar__logo" titleClassName="navbar__title" />
-        {!colorModeToggle.disabled && sidebarShown && <_Toggle.default checked={colorModeToggle.isDarkTheme} onChange={colorModeToggle.toggle} />}
+        {!colorModeToggle.disabled && <_Toggle.default className={_stylesModule.default.navbarSidebarToggle} checked={colorModeToggle.isDarkTheme} onChange={colorModeToggle.toggle} />}
+        <button type="button" className="clean-btn navbar-sidebar__close" onClick={toggleSidebar}>
+          <_IconClose.default color="var(--ifm-color-emphasis-600)" className={_stylesModule.default.navbarSidebarCloseSvg} />
+        </button>
       </div>
 
-      <div className={(0, _clsx.default)('navbar-sidebar__items', _stylesModule.default.menuWrapper, {
-      [_stylesModule.default.menuWrapperSecondaryMenuShown]: secondaryMenu.shown
+      <div className={(0, _clsx.default)('navbar-sidebar__items', {
+      'navbar-sidebar__items--show-secondary': secondaryMenu.shown
     })}>
-        <div className="menu">
+        <div className="navbar-sidebar__item menu">
           <ul className="menu__list">
-            {items.map((item, i) => <_NavbarItem.default mobile {...item} // TODO fix typing
-          onClick={toggleSidebar} key={i} />)}
+            {items.map((item, i) => <_NavbarItem.default mobile {...item} onClick={toggleSidebar} key={i} />)}
           </ul>
         </div>
 
-        <div className={_stylesModule.default.secondaryMenu}>
-          <button type="button" className={(0, _clsx.default)('clean-btn', _stylesModule.default.backButton)} onClick={secondaryMenu.hide}>
-            <_Translate.default id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel" description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
-              ← Back to main menu
-            </_Translate.default>
-          </button>
+        <div className="navbar-sidebar__item menu">
+          {items.length > 0 && <button type="button" className="clean-btn navbar-sidebar__back" onClick={secondaryMenu.hide}>
+              <_Translate.default id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel" description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
+                ← Back to main menu
+              </_Translate.default>
+            </button>}
           {secondaryMenu.content}
         </div>
       </div>
@@ -200,17 +218,18 @@ function NavbarMobileSidebar({
 function Navbar() {
   const {
     navbar: {
-      items,
       hideOnScroll,
       style
     }
   } = (0, _themeCommon.useThemeConfig)();
   const mobileSidebar = useMobileSidebar();
   const colorModeToggle = useColorModeToggle();
+  const activeDocPlugin = (0, _useDocs.useActivePlugin)();
   const {
     navbarRef,
     isNavbarVisible
   } = (0, _useHideableNavbar.default)(hideOnScroll);
+  const items = useNavbarItems();
   const hasSearchNavbarItem = items.some(item => item.type === 'search');
   const {
     leftItems,
@@ -225,7 +244,7 @@ function Navbar() {
   })}>
       <div className="navbar__inner">
         <div className="navbar__items">
-          {(items === null || items === void 0 ? void 0 : items.length) > 0 && <button aria-label="Navigation bar toggle" className="navbar__toggle clean-btn" type="button" tabIndex={0} onClick={mobileSidebar.toggle} onKeyDown={mobileSidebar.toggle}>
+          {((items === null || items === void 0 ? void 0 : items.length) > 0 || activeDocPlugin) && <button aria-label="Navigation bar toggle" className="navbar__toggle clean-btn" type="button" tabIndex={0} onClick={mobileSidebar.toggle} onKeyDown={mobileSidebar.toggle}>
               <_IconMenu.default />
             </button>}
           <_Logo.default className="navbar__brand" imageClassName="navbar__logo" titleClassName="navbar__title" />

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

@@ -8,7 +8,7 @@
 /*
 Hide toggle in small viewports
  */
-@media screen and (max-width: 997px) {
+@media (max-width: 996px) {
   .toggle {
     display: none;
   }
@@ -22,42 +22,6 @@ Hide toggle in small viewports
   transform: translate3d(0, calc(-100% - 2px), 0);
 }
 
-:global(.navbar-sidebar__items) {
-  padding: 0;
-}
-
-:global(.navbar-sidebar) {
-  overflow-x: hidden;
-}
-
-.menuWrapper {
-  display: flex;
-  width: calc(var(--ifm-navbar-sidebar-width));
-  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateZ(0);
-}
-
-.menuWrapperSecondaryMenuShown {
-  transform: translate3d(calc((var(--ifm-navbar-sidebar-width)) * -1), 0, 0);
-}
-
-.menuWrapper > div {
-  flex-shrink: 0;
-  width: calc(var(--ifm-navbar-sidebar-width));
-  font-weight: var(--ifm-font-weight-semibold);
-  padding: 0.5rem;
-}
-
-.backButton {
-  width: calc(100% + 1rem);
-  margin: 0 0 0.7rem -0.5rem;
-  text-align: left;
-  font-size: 15px;
-  padding: 0.6rem 1.5rem;
-  background: var(--ifm-menu-color-background-active);
-  font-weight: var(--ifm-button-font-weight);
-}
-
-.secondaryMenu {
-  padding-top: 0 !important;
+.navbarSidebarToggle {
+  margin-right: 1rem;
 }

package/lib/theme/NavbarItem/DefaultNavbarItem.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.NavLink = NavLink;
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -13,19 +14,15 @@ var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
 
-var _router = require("@docusaurus/router");
-
-var _themeCommon = require("@docusaurus/theme-common");
-
 var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
 
 var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _themeCommon = require("@docusaurus/theme-common");
 
-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); }
+var _index = require("./index");
 
-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.
@@ -41,10 +38,12 @@ function NavLink({
   to,
   href,
   label,
-  activeClassName = 'navbar__link--active',
+  activeClassName = '',
   prependBaseUrlToHref,
   ...props
 }) {
+  var _props$className;
+
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
   const toUrl = (0, _useBaseUrl.default)(to);
@@ -58,10 +57,10 @@ function NavLink({
     href: prependBaseUrlToHref ? normalizedHref : href
   } : {
     isNavLink: true,
-    activeClassName,
+    activeClassName: !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes(activeClassName)) ? activeClassName : '',
     to: toUrl,
     ...(activeBasePath || activeBaseRegex ? {
-      isActive: (_match, location) => activeBaseRegex ? new RegExp(activeBaseRegex).test(location.pathname) : location.pathname.startsWith(activeBaseUrl)
+      isActive: (_match, location) => activeBaseRegex ? (0, _themeCommon.isRegexpStringMatch)(activeBaseRegex, location.pathname) : location.pathname.startsWith(activeBaseUrl)
     } : null)
   }} {...props}>
       {isExternalLink ? <span>
@@ -74,136 +73,40 @@ function NavLink({
     </_Link.default>;
 }
 
-function NavItemDesktop({
-  items,
-  position,
+function DefaultNavbarItemDesktop({
   className,
+  isDropdownItem = false,
   ...props
 }) {
-  var _props$children;
-
-  const dropdownRef = (0, _react.useRef)(null);
-  const dropdownMenuRef = (0, _react.useRef)(null);
-  const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = event => {
-      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
-        return;
-      }
-
-      setShowDropdown(false);
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [dropdownRef]);
-
-  const navLinkClassNames = (extraClassName, isDropdownItem = false) => (0, _clsx.default)({
-    'navbar__item navbar__link': !isDropdownItem,
-    dropdown__link: isDropdownItem
-  }, extraClassName);
-
-  if (!items) {
-    return <NavLink className={navLinkClassNames(className)} {...props} />;
+  const element = <NavLink className={(0, _clsx.default)(isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link', className)} {...props} />;
+
+  if (isDropdownItem) {
+    return <li>{element}</li>;
   }
 
-  return <div ref={dropdownRef} className={(0, _clsx.default)('navbar__item', 'dropdown', 'dropdown--hoverable', {
-    'dropdown--left': position === 'left',
-    'dropdown--right': position === 'right',
-    'dropdown--show': showDropdown
-  })}>
-      <NavLink className={navLinkClassNames(className)} {...props} onClick={props.to ? undefined : e => e.preventDefault()} onKeyDown={e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        setShowDropdown(!showDropdown);
-      }
-    }}>
-        {(_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : props.label}
-      </NavLink>
-      <ul ref={dropdownMenuRef} className="dropdown__menu">
-        {items.map(({
-        className: childItemClassName,
-        ...childItemProps
-      }, i) => <li key={i}>
-            <NavLink onKeyDown={e => {
-          if (i === items.length - 1 && e.key === 'Tab') {
-            e.preventDefault();
-            setShowDropdown(false);
-            const nextNavbarItem = dropdownRef.current.nextElementSibling;
-
-            if (nextNavbarItem) {
-              nextNavbarItem.focus();
-            }
-          }
-        }} activeClassName={dropdownLinkActiveClass} className={navLinkClassNames(childItemClassName, true)} {...childItemProps} />
-          </li>)}
-      </ul>
-    </div>;
+  return element;
 }
 
-function NavItemMobile({
-  items,
+function DefaultNavbarItemMobile({
   className,
-  position: _position,
-  // Need to destructure position from props so that it doesn't get passed on.
+  isDropdownItem: _isDropdownItem,
   ...props
 }) {
-  var _props$children2;
-
-  const {
-    pathname
-  } = (0, _router.useLocation)();
-  const {
-    collapsed,
-    toggleCollapsed
-  } = (0, _themeCommon.useCollapsible)({
-    initialState: () => {
-      var _items$some;
-
-      return (_items$some = !(items !== null && items !== void 0 && items.some(item => (0, _themeCommon.isSamePath)(item.to, pathname)))) !== null && _items$some !== void 0 ? _items$some : true;
-    }
-  });
-
-  const navLinkClassNames = (extraClassName, isSubList = false) => (0, _clsx.default)('menu__link', {
-    'menu__link--sublist': isSubList
-  }, extraClassName);
-
-  if (!items) {
-    return <li className="menu__list-item">
-        <NavLink className={navLinkClassNames(className)} {...props} />
-      </li>;
-  }
-
-  return <li className={(0, _clsx.default)('menu__list-item', {
-    'menu__list-item--collapsed': collapsed
-  })}>
-      <NavLink role="button" className={navLinkClassNames(className, true)} {...props} onClick={e => {
-      e.preventDefault();
-      toggleCollapsed();
-    }}>
-        {(_props$children2 = props.children) !== null && _props$children2 !== void 0 ? _props$children2 : props.label}
-      </NavLink>
-      <_themeCommon.Collapsible as="ul" className="menu__list" collapsed={collapsed}>
-        {items.map(({
-        className: childItemClassName,
-        ...childItemProps
-      }, i) => <li className="menu__list-item" key={i}>
-            <NavLink activeClassName="menu__link--active" className={navLinkClassNames(childItemClassName)} {...childItemProps} onClick={props.onClick} />
-          </li>)}
-      </_themeCommon.Collapsible>
+  return <li className="menu__list-item">
+      <NavLink className={(0, _clsx.default)('menu__link', className)} {...props} />
     </li>;
 }
 
 function DefaultNavbarItem({
   mobile = false,
+  position: _position,
+  // Need to destructure position from props so that it doesn't get passed on.
   ...props
 }) {
-  const Comp = mobile ? NavItemMobile : NavItemDesktop;
-  return <Comp {...props} />;
+  var _props$activeClassNam;
+
+  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
+  return <Comp {...props} activeClassName={(_props$activeClassNam = props.activeClassName) !== null && _props$activeClassNam !== void 0 ? _props$activeClassNam : (0, _index.getInfimaActiveClassName)(mobile)} />;
 }
 
 var _default = DefaultNavbarItem;

package/lib/theme/NavbarItem/DocNavbarItem.js

@@ -13,9 +13,9 @@ var _useDocs = require("@theme/hooks/useDocs");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _themeCommon = require("@docusaurus/theme-common");
+var _index = require("./index");
 
-var _utilsCommon = require("@docusaurus/utils-common");
+var _themeCommon = require("@docusaurus/theme-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,8 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  */
 function getDocInVersions(versions, docId) {
-  // vanilla-js flatten, TODO replace soon by ES flat() / flatMap()
-  const allDocs = [].concat(...versions.map(version => version.docs));
+  const allDocs = versions.flatMap(version => version.docs);
   const doc = allDocs.find(versionDoc => versionDoc.id === docId);
 
   if (!doc) {
@@ -41,7 +40,6 @@ Available doc ids are:\n- ${docIds}`);
 
 function DocNavbarItem({
   docId,
-  activeSidebarClassName,
   label: staticLabel,
   docsPluginId,
   ...props
@@ -55,9 +53,10 @@ function DocNavbarItem({
   } = (0, _themeCommon.useDocsPreferredVersion)(docsPluginId);
   const latestVersion = (0, _useDocs.useLatestVersion)(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
 
-  const versions = (0, _utilsCommon.uniq)([activeVersion, preferredVersion, latestVersion].filter(Boolean));
+  const versions = (0, _themeCommon.uniq)([activeVersion, preferredVersion, latestVersion].filter(Boolean));
   const doc = getDocInVersions(versions, docId);
+  const activeDocInfimaClassName = (0, _index.getInfimaActiveClassName)(props.mobile);
   return <_DefaultNavbarItem.default exact {...props} className={(0, _clsx.default)(props.className, {
-    [activeSidebarClassName]: activeDoc && activeDoc.sidebar === doc.sidebar
-  })} label={staticLabel !== null && staticLabel !== void 0 ? staticLabel : doc.id} to={doc.path} />;
+    [activeDocInfimaClassName]: (activeDoc === null || activeDoc === void 0 ? void 0 : activeDoc.sidebar) && activeDoc.sidebar === doc.sidebar
+  })} activeClassName={activeDocInfimaClassName} label={staticLabel !== null && staticLabel !== void 0 ? staticLabel : doc.id} to={doc.path} />;
 }

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -9,10 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
 
+var _DropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DropdownNavbarItem"));
+
 var _useDocs = require("@theme/hooks/useDocs");
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _Translate = require("@docusaurus/Translate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -56,21 +60,24 @@ function DocsVersionDropdownNavbarItem({
         }
       };
     });
-    const items = [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter]; // We don't want to render a version dropdown with 0 or 1 item
-    // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
-    // We'd rather render a button instead of a dropdown
-
-    if (items.length <= 1) {
-      return undefined;
-    }
-
-    return items;
+    return [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter];
   }
 
   const items = getItems();
   const dropdownVersion = (_ref = (_activeDocContext$act = activeDocContext.activeVersion) !== null && _activeDocContext$act !== void 0 ? _activeDocContext$act : preferredVersion) !== null && _ref !== void 0 ? _ref : latestVersion; // Mobile dropdown is handled a bit differently
 
-  const dropdownLabel = mobile && items ? 'Versions' : dropdownVersion.label;
-  const dropdownTo = mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path;
-  return <_DefaultNavbarItem.default {...props} mobile={mobile} label={dropdownLabel} to={dropdownTo} items={items} isActive={dropdownActiveClassDisabled ? () => false : undefined} />;
+  const dropdownLabel = mobile && items ? (0, _Translate.translate)({
+    id: 'theme.navbar.mobileVersionsDropdown.label',
+    message: 'Versions',
+    description: 'The label for the navbar versions dropdown on mobile view'
+  }) : dropdownVersion.label;
+  const dropdownTo = mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
+  // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+  // We'd rather render a button instead of a dropdown
+
+  if (items.length <= 1) {
+    return <_DefaultNavbarItem.default {...props} mobile={mobile} label={dropdownLabel} to={dropdownTo} isActive={dropdownActiveClassDisabled ? () => false : undefined} />;
+  }
+
+  return <_DropdownNavbarItem.default {...props} mobile={mobile} label={dropdownLabel} to={dropdownTo} items={items} isActive={dropdownActiveClassDisabled ? () => false : undefined} />;
 }

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _DefaultNavbarItem = require("@theme/NavbarItem/DefaultNavbarItem");
+
+var _NavbarItem = _interopRequireDefault(require("@theme/NavbarItem"));
+
+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.
+ */
+const dropdownLinkActiveClass = 'dropdown__link--active';
+
+function isItemActive(item, localPathname) {
+  if ((0, _themeCommon.isSamePath)(item.to, localPathname)) {
+    return true;
+  }
+
+  if ((0, _themeCommon.isRegexpStringMatch)(item.activeBaseRegex, localPathname)) {
+    return true;
+  }
+
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true;
+  }
+
+  return false;
+}
+
+function containsActiveItems(items, localPathname) {
+  return items.some(item => isItemActive(item, localPathname));
+}
+
+function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  ...props
+}) {
+  var _props$children;
+
+  const dropdownRef = (0, _react.useRef)(null);
+  const dropdownMenuRef = (0, _react.useRef)(null);
+  const [showDropdown, setShowDropdown] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const handleClickOutside = event => {
+      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
+        return;
+      }
+
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [dropdownRef]);
+  return <div ref={dropdownRef} className={(0, _clsx.default)('navbar__item', 'dropdown', 'dropdown--hoverable', {
+    'dropdown--right': position === 'right',
+    'dropdown--show': showDropdown
+  })}>
+      <_DefaultNavbarItem.NavLink href={props.to ? undefined : '#'} className={(0, _clsx.default)('navbar__link', className)} {...props} onClick={props.to ? undefined : e => e.preventDefault()} onKeyDown={e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        setShowDropdown(!showDropdown);
+      }
+    }}>
+        {(_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : props.label}
+      </_DefaultNavbarItem.NavLink>
+      <ul ref={dropdownMenuRef} className="dropdown__menu">
+        {items.map((childItemProps, i) => <_NavbarItem.default isDropdownItem onKeyDown={e => {
+        if (i === items.length - 1 && e.key === 'Tab') {
+          e.preventDefault();
+          setShowDropdown(false);
+          const nextNavbarItem = dropdownRef.current.nextElementSibling;
+
+          if (nextNavbarItem) {
+            nextNavbarItem.focus();
+          }
+        }
+      }} activeClassName={dropdownLinkActiveClass} {...childItemProps} key={i} />)}
+      </ul>
+    </div>;
+}
+
+function DropdownNavbarItemMobile({
+  items,
+  className,
+  position: _position,
+  // Need to destructure position from props so that it doesn't get passed on.
+  ...props
+}) {
+  var _props$children2;
+
+  const localPathname = (0, _themeCommon.useLocalPathname)();
+  const containsActive = containsActiveItems(items, localPathname);
+  const {
+    collapsed,
+    toggleCollapsed,
+    setCollapsed
+  } = (0, _themeCommon.useCollapsible)({
+    initialState: () => !containsActive
+  }); // Expand/collapse if any item active after a navigation
+
+  (0, _react.useEffect)(() => {
+    if (containsActive) {
+      setCollapsed(!containsActive);
+    }
+  }, [localPathname, containsActive, setCollapsed]);
+  return <li className={(0, _clsx.default)('menu__list-item', {
+    'menu__list-item--collapsed': collapsed
+  })}>
+      <_DefaultNavbarItem.NavLink role="button" className={(0, _clsx.default)('menu__link menu__link--sublist', className)} {...props} onClick={e => {
+      e.preventDefault();
+      toggleCollapsed();
+    }}>
+        {(_props$children2 = props.children) !== null && _props$children2 !== void 0 ? _props$children2 : props.label}
+      </_DefaultNavbarItem.NavLink>
+      <_themeCommon.Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => <_NavbarItem.default mobile isDropdownItem onClick={props.onClick} activeClassName="menu__link--active" {...childItemProps} key={i} />)}
+      </_themeCommon.Collapsible>
+    </li>;
+}
+
+function DropdownNavbarItem({
+  mobile = false,
+  ...props
+}) {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
+  return <Comp {...props} />;
+}
+
+var _default = DropdownNavbarItem;
+exports.default = _default;