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

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,135 +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 _menuListRef$current, _menuListRef$current2, _props$children2;
-
-  const menuListRef = (0, _react.useRef)(null);
-  const {
-    pathname
-  } = (0, _router.useLocation)();
-  const [collapsed, setCollapsed] = (0, _react.useState)(() => {
-    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>;
-  }
-
-  const menuListHeight = (_menuListRef$current = menuListRef.current) !== null && _menuListRef$current !== void 0 && _menuListRef$current.scrollHeight ? `${(_menuListRef$current2 = menuListRef.current) === null || _menuListRef$current2 === void 0 ? void 0 : _menuListRef$current2.scrollHeight}px` : undefined;
-  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();
-      setCollapsed(state => !state);
-    }}>
-        {(_props$children2 = props.children) !== null && _props$children2 !== void 0 ? _props$children2 : props.label}
-      </NavLink>
-      <ul className="menu__list" ref={menuListRef} style={{
-      height: !collapsed ? menuListHeight : undefined
-    }}>
-        {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>)}
-      </ul>
+  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;

package/lib/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js}

@@ -7,7 +7,7 @@ exports.default = LocaleDropdownNavbarItem;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
+var _DropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DropdownNavbarItem"));
 
 var _IconLanguage = _interopRequireDefault(require("@theme/IconLanguage"));
 
@@ -15,6 +15,8 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -53,20 +55,14 @@ function LocaleDropdownNavbarItem({
       to,
       target: '_self',
       autoAddBaseUrl: false,
-      className: locale === currentLocale ? 'dropdown__link--active' : '',
-      style: {
-        textTransform: 'capitalize'
-      }
+      className: locale === currentLocale ? 'dropdown__link--active' : ''
     };
   });
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently
 
   const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
-  return <_DefaultNavbarItem.default {...props} href="#" mobile={mobile} label={<span>
-          <_IconLanguage.default style={{
-      verticalAlign: 'text-bottom',
-      marginRight: 5
-    }} />
+  return <_DropdownNavbarItem.default {...props} mobile={mobile} label={<span>
+          <_IconLanguage.default className={_stylesModule.default.iconLanguage} />
           <span>{dropdownLabel}</span>
         </span>} items={items} />;
 }

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css

@@ -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.
+ */
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+}

package/lib/theme/NavbarItem/index.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavbarItem;
+exports.getInfimaActiveClassName = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _DefaultNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DefaultNavbarItem"));
 
+var _DropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/DropdownNavbarItem"));
+
 var _LocaleDropdownNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/LocaleDropdownNavbarItem"));
 
 var _SearchNavbarItem = _interopRequireDefault(require("@theme/NavbarItem/SearchNavbarItem"));
@@ -25,30 +28,47 @@ const NavbarItemComponents = {
   default: () => _DefaultNavbarItem.default,
   localeDropdown: () => _LocaleDropdownNavbarItem.default,
   search: () => _SearchNavbarItem.default,
+  dropdown: () => _DropdownNavbarItem.default,
   // Need to lazy load these items as we don't know for sure the docs plugin is loaded
   // See https://github.com/facebook/docusaurus/issues/3360
-  docsVersion: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocsVersionNavbarItem').default,
-  docsVersionDropdown: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
-  doc: () => // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-  require('@theme/NavbarItem/DocNavbarItem').default
+
+  /* eslint-disable @typescript-eslint/no-var-requires, global-require */
+  docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
+  docsVersionDropdown: () => require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
+  doc: () => require('@theme/NavbarItem/DocNavbarItem').default
+  /* eslint-enable @typescript-eslint/no-var-requires, global-require */
+
 };
 
-const getNavbarItemComponent = (type = 'default') => {
-  const navbarItemComponent = NavbarItemComponents[type];
+const getNavbarItemComponent = type => {
+  const navbarItemComponentFn = NavbarItemComponents[type];
 
-  if (!navbarItemComponent) {
+  if (!navbarItemComponentFn) {
     throw new Error(`No NavbarItem component found for type "${type}".`);
   }
 
-  return navbarItemComponent();
+  return navbarItemComponentFn();
 };
 
+function getComponentType(type, isDropdown) {
+  // Backward compatibility: navbar item with no type set
+  // but containing dropdown items should use the type "dropdown"
+  if (!type || type === 'default') {
+    return isDropdown ? 'dropdown' : 'default';
+  }
+
+  return type;
+}
+
+const getInfimaActiveClassName = mobile => mobile ? 'menu__link--active' : 'navbar__link--active';
+
+exports.getInfimaActiveClassName = getInfimaActiveClassName;
+
 function NavbarItem({
   type,
   ...props
 }) {
-  const NavbarItemComponent = getNavbarItemComponent(type);
+  const componentType = getComponentType(type, props.items !== undefined);
+  const NavbarItemComponent = getNavbarItemComponent(componentType);
   return <NavbarItemComponent {...props} />;
 }

package/lib/theme/{SearchMetadatas → SearchMetadata}/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SearchMetadatas;
+exports.default = SearchMetadata;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -20,7 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Note: we don't couple this to Algolia/DocSearch on purpose
 // We may want to support other search engine plugins too
 // Search plugins should swizzle/override this comp to add their behavior
-function SearchMetadatas({
+function SearchMetadata({
   locale,
   version,
   tag

package/lib/theme/Seo/index.js

@@ -11,7 +11,7 @@ var _Head = _interopRequireDefault(require("@docusaurus/Head"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
+var _useBaseUrl = require("@docusaurus/useBaseUrl");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,15 +25,16 @@ function Seo({
   title,
   description,
   keywords,
-  image
+  image,
+  children
 }) {
-  const {
-    image: defaultImage
-  } = (0, _themeCommon.useThemeConfig)();
   const pageTitle = (0, _themeCommon.useTitleFormatter)(title);
-  const pageImage = (0, _useBaseUrl.default)(image || defaultImage, {
+  const {
+    withBaseUrl
+  } = (0, _useBaseUrl.useBaseUrlUtils)();
+  const pageImage = image ? withBaseUrl(image, {
     absolute: true
-  });
+  }) : undefined;
   return <_Head.default>
       {title && <title>{pageTitle}</title>}
       {title && <meta property="og:title" content={pageTitle} />}
@@ -45,5 +46,7 @@ function Seo({
 
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
+
+      {children}
     </_Head.default>;
 }