@redocly/theme 0.17.1 → 0.18.1

package/src/components/Menu/hooks/use-mobile-menu-items.ts

@@ -0,0 +1,100 @@
+import { useLocation } from 'react-router-dom';
+
+import type { ResolvedNavItem } from '@theme/types/portal';
+import { useCurrentProduct, useI18nConfig, usePageVersions, useTranslate } from '@portal/hooks';
+import { useSidebarItems } from '@portal/Sidebar/useSidebarItems';
+import { useThemeConfig } from '@theme/hooks';
+
+import { MenuType } from '../constants';
+import { buildLanguagesGroup, buildVersionSection, mapNavbarItems } from '../utils';
+
+const MENU_SEPARATOR: ResolvedNavItem = {
+  type: 'separator',
+  separatorLine: true,
+};
+
+const TRANSLATION_KEYS = {
+  products: 'theme.mobileMenu.products',
+};
+
+export const useMobileMenuItems = (menuType: MenuType) => {
+  const { versions = [] } = usePageVersions() || {};
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { translate } = useTranslate();
+  const activeVersion = versions.find((version) => version.active);
+  const sidebarItems = useSidebarItems(activeVersion);
+  const location = useLocation();
+
+  const currentProduct = useCurrentProduct();
+  const hasProductNavbarOverride = currentProduct?.themeOverride?.navbar;
+
+  const productThemeConfig = useThemeConfig();
+  const baseThemeConfig = useThemeConfig(false);
+
+  const baseNavItems = (baseThemeConfig.navbar?.items || []) as ResolvedNavItem[];
+  const productNavItems = (
+    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
+  ) as ResolvedNavItem[];
+
+  const menuItems: ResolvedNavItem[] = [];
+
+  if (menuType === MenuType.PAGE) {
+    if (activeVersion) {
+      // TODO: consider to refactor
+      const versionsSection = buildVersionSection(translate, versions, activeVersion);
+      menuItems.push(...versionsSection);
+    }
+    if (menuItems.length && sidebarItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+    menuItems.push(...(sidebarItems as ResolvedNavItem[]));
+  } else if (menuType === MenuType.PRODUCT) {
+    menuItems.push(...productNavItems);
+
+    if (menuItems.length && baseNavItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+
+    if (baseNavItems.length) {
+      menuItems.push(...baseNavItems);
+    }
+  } else if (menuType === MenuType.MAIN_MENU) {
+    const productMenuItems: ResolvedNavItem[] = Object.values(baseThemeConfig.products || {}).map(
+      (product) => ({
+        label: product.name,
+        link: product.link,
+        icon: product.icon,
+        type: 'link',
+      }),
+    );
+
+    if (productMenuItems.length) {
+      menuItems.push({
+        type: 'separator',
+        label: translate(TRANSLATION_KEYS.products, 'Products'),
+      });
+
+      menuItems.push(...productMenuItems);
+    }
+
+    if (menuItems.length && baseNavItems.length) {
+      menuItems.push(MENU_SEPARATOR);
+    }
+
+    if (baseNavItems.length) {
+      menuItems.push(...baseNavItems);
+    }
+  }
+
+  const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
+
+  if (menuItems.length && languagesMenu) {
+    menuItems.push(MENU_SEPARATOR);
+  }
+
+  if (languagesMenu) {
+    menuItems.push(languagesMenu);
+  }
+
+  return mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location);
+};

package/src/components/Menu/hooks/use-mobile-menu-levels.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useCurrentProduct, usePageVersions, useTranslate } from '@portal/hooks';
+import { useSidebarItems } from '@portal/Sidebar/useSidebarItems';
+import { MenuType } from '@theme/components/Menu/constants';
+import { useThemeConfig } from '@theme/hooks';
+import type { ResolvedNavItem } from '@theme/types/portal';
+
+const TRANSLATION_KEYS = {
+  mainMenu: 'theme.mobileMenu.mainMenu',
+  previous: 'theme.mobileMenu.previous',
+};
+
+export const useMobileMenuLevels = () => {
+  const { versions = [] } = usePageVersions() || {};
+  const activeVersion = versions.find((version) => version?.active);
+  const sidebarItems = useSidebarItems(activeVersion);
+  const { translate } = useTranslate();
+  const currentProduct = useCurrentProduct();
+  const productThemeConfig = useThemeConfig();
+  const location = useLocation();
+
+  const hasProductNavbarOverride = currentProduct?.themeOverride?.navbar;
+  const productNavItems = (
+    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
+  ) as ResolvedNavItem[];
+
+  const menuLevels = useMemo(() => {
+    const menuLevels = [
+      {
+        label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+        type: MenuType.MAIN_MENU,
+      },
+    ];
+
+    if (currentProduct && productNavItems.length) {
+      menuLevels.push({
+        label: currentProduct.name,
+        type: MenuType.PRODUCT,
+      });
+    }
+
+    if (sidebarItems.length || activeVersion) {
+      menuLevels.push({
+        label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+        type: MenuType.PAGE,
+      });
+    }
+    return menuLevels;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
+  return menuLevels;
+};

package/src/components/Menu/types.ts

@@ -0,0 +1,3 @@
+export interface MobileMenuProps {
+  className?: string;
+}

package/src/components/Menu/utils.ts

@@ -0,0 +1,109 @@
+import type { Location } from 'react-router-dom';
+
+import type { ItemState } from '@theme/components/Sidebar/types';
+import type { Locale, ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import { getPathnameForLocale } from '@portal/utils';
+import { withPathPrefix } from '@theme/utils/urls';
+
+const TRANSLATION_KEYS = {
+  version: 'theme.mobileMenu.version',
+};
+
+export const mapNavbarItems = (
+  items: ResolvedNavItem[],
+  defaultLocale: string,
+  currentLocale: string,
+  locales: Locale[],
+  location: Location,
+): ItemState[] => {
+  return items.map(
+    (navItem) =>
+      ({
+        ...navItem,
+        ...(navItem.items && {
+          items: mapNavbarItems(navItem.items, defaultLocale, currentLocale, locales, location),
+        }),
+        ...('link' in navItem && { link: navItem.link || '/' }),
+        active:
+          'link' in navItem &&
+          isItemActive(navItem, defaultLocale, currentLocale, locales, location),
+        hasActiveSubItem: !!navItem.items?.find((item) =>
+          isItemActive(item, defaultLocale, currentLocale, locales, location),
+        ),
+      } as ItemState),
+  );
+};
+
+export const isItemActive = (
+  item: ResolvedNavItem,
+  defaultLocale: string,
+  currentLocale: string,
+  locales: Locale[],
+  location: Location,
+): boolean => {
+  const pathHash = location.pathname + location.hash;
+  const link = item.languageInsensitive
+    ? item.link || ''
+    : getPathnameForLocale(item.link || '/', defaultLocale, currentLocale, locales);
+
+  return pathHash === withPathPrefix(link);
+};
+
+export const buildLanguagesGroup = (
+  locales: Locale[],
+  currentLocale: string,
+  defaultLocale: string,
+): ResolvedNavItem | undefined => {
+  if (locales.length < 2) {
+    return;
+  }
+  const locale = locales.find((l) => l.code === currentLocale);
+  return {
+    type: 'group',
+    label: locale?.name || locale?.code,
+    items: locales
+      .filter((locale) => locale.code !== currentLocale)
+      .map((locale) => {
+        const newLangPathname = withPathPrefix(
+          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+        );
+        const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+        return {
+          type: 'link',
+          label: locale.name || locale.code || '',
+          link: newUrlWithLanguage,
+          active: false,
+          hasActiveSubItem: false,
+          languageInsensitive: true,
+        };
+      }),
+  };
+};
+
+export const buildVersionSection = (
+  translate: TFunction,
+  versions: Version[],
+  activeVersion?: Version,
+): ResolvedNavItem[] => {
+  return [
+    {
+      type: 'separator',
+      label: translate(TRANSLATION_KEYS.version, 'Version'),
+    },
+    {
+      type: 'group',
+      label: activeVersion?.label,
+      items: versions
+        .filter((version) => !version.active)
+        .map((version) => {
+          return {
+            type: 'link',
+            label: version.label,
+            link: version.link,
+            active: false,
+            hasActiveSubItem: false,
+          };
+        }),
+    },
+  ];
+};

package/src/components/Navbar/MobileUserProfile.tsx

@@ -7,7 +7,7 @@ import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profil
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
 
-export function MobileUserProfile(): JSX.Element {
+export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
   const { userData, handleLogout, loginUrl } = useProfileProps();
   const { translate } = useTranslate();
@@ -15,27 +15,27 @@ export function MobileUserProfile(): JSX.Element {
     login: 'theme.profile.login',
   };
 
-  if (!userData?.isAuthenticated) {
-    return (
-      <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
-        <LoginButton href={loginUrl} data-cy="login-btn">
-          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
-        </LoginButton>
-      </MobileProfileWrapper>
-    );
-  }
+  if (!userData?.isAuthenticated && !loginUrl) return null;
 
   return (
     <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
-      <UserDataWrapper>
-        <ProfilePicture>
-          <Profile name={userData.name} imageUrl={userData.picture} />
-        </ProfilePicture>
-        <UserName>{userData.name}</UserName>
-      </UserDataWrapper>
-      <LogoutButton onClick={() => handleLogout()}>
-        <LogoutIcon />
-      </LogoutButton>
+      {!userData?.isAuthenticated ? (
+        <LoginButton href={loginUrl} data-cy="login-btn">
+          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+        </LoginButton>
+      ) : (
+        <>
+          <UserDataWrapper>
+            <ProfilePicture>
+              <Profile name={userData.name} imageUrl={userData.picture} />
+            </ProfilePicture>
+            <UserName>{userData.name}</UserName>
+          </UserDataWrapper>
+          <LogoutButton onClick={() => handleLogout()}>
+            <LogoutIcon />
+          </LogoutButton>
+        </>
+      )}
     </MobileProfileWrapper>
   );
 }
@@ -58,7 +58,6 @@ const MobileProfileWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  position: fixed;
   bottom: 0;
   padding: 18px 16px;
   border-top: 1px solid var(--mobile-menu-profile-border-color);

package/src/components/Navbar/Navbar.tsx

@@ -3,7 +3,6 @@ import styled, { createGlobalStyle } from 'styled-components';
 
 import { NavbarMenu } from '@theme/components/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
-import { isEmptyArray, isPrimitive } from '@theme/utils';
 import type { NavbarLogoProps } from '@theme/components/NavbarLogo';
 import { NavbarLogo } from '@theme/components/NavbarLogo';
 import { MobileMenu } from '@theme/components/Menu/MobileMenu';
@@ -11,12 +10,11 @@ import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorMode
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
-import type { LogoConfig, ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
-import { useI18n, usePageVersions } from '@portal/hooks';
+import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
+import { useI18n } from '@portal/hooks';
+import { LanguagePicker } from '@theme/I18n/LanguagePicker';
+import { ProductPicker } from '@theme/components/Product';
 import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
-import { useSidebarItems } from '@portal/Sidebar/useSidebarItems';
-
-import { LanguagePicker } from '../../I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   :root {
@@ -44,8 +42,6 @@ export function Navbar(): JSX.Element | null {
   const openMobileMenu = () => setIsOpen(true);
   const closeMobileMenu = () => setIsOpen(false);
 
-  const menuItemsExist = !isPrimitive(menu) && !isEmptyArray(menu);
-
   if (!menu && !logo) {
     return <EmptyNavbarHack />;
   }
@@ -53,12 +49,10 @@ export function Navbar(): JSX.Element | null {
   return (
     <NavbarPresentational
       {...{
-        menuItemsExist,
         closeMobileMenu,
         openMobileMenu,
         isOpen,
         hideSearch: Boolean(hideSearch),
-        menu: menu as ResolvedConfigLinks,
         logo: logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>,
         hideUserProfile,
         changeLanguage,
@@ -68,42 +62,38 @@ export function Navbar(): JSX.Element | null {
 }
 
 interface NavbarPresentationalProps extends NavbarLogoProps {
-  menuItemsExist: boolean;
   closeMobileMenu: () => void;
   openMobileMenu: () => void;
   isOpen: boolean;
   hideSearch: boolean;
-  menu: ResolvedConfigLinks;
   hideUserProfile: boolean | string | undefined;
   changeLanguage: (value: string) => void;
   className?: string;
 }
 
 export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
-  const { versions = [] } = usePageVersions() || {};
-  const activeVersion = versions.find((version) => version?.active);
-  const sidebarItems = useSidebarItems(activeVersion);
-
   const {
-    menuItemsExist,
     closeMobileMenu,
     openMobileMenu,
     isOpen,
     hideSearch,
     logo,
-    menu,
     hideUserProfile,
     changeLanguage,
     className,
   } = props;
+
+  const themeConfig = useThemeConfig();
+
+  const menu = themeConfig.navbar?.items;
+
   return (
     <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
-      {isOpen && <MobileMenu navItems={menu as ResolvedNavItem[]} sidebarItems={sidebarItems} />}
+      {isOpen && <MobileMenu />}
       <NavbarRow>
-        {menuItemsExist && (
-          <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
-        )}
+        <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
         <NavbarLogo logo={logo} />
+        <ProductPicker />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
         <LanguagePicker onChangeLanguage={changeLanguage} />

package/src/components/Navbar/NavbarItem.tsx

@@ -4,7 +4,6 @@ import { useLocation } from 'react-router-dom';
 
 import { Link } from '@portal/Link';
 import { getPathnameForLocale } from '@portal/utils';
-import { NavbarDropdown, DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
 import type {
   ResolvedNavItem,
   ResolvedNavLinkItem,
@@ -12,6 +11,7 @@ import type {
 } from '@theme/types/portal';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
+import { Dropdown } from '@theme/components/Dropdown';
 
 export interface NavbarItemProps {
   navItem: ResolvedNavItem;
@@ -45,8 +45,15 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
 
   if ((navItem as ResolvedNavGroupItem).items) {
     const item = navItem as ResolvedNavGroupItem;
+    const groupItems = item.items as ResolvedNavLinkItem[];
+    const groupItemsComponents = groupItems.map((item, index) => (
+      <Link key={`${item.label}_${index}`} to={item.link}>
+        {translate(item.labelTranslationKey, item.label)}
+      </Link>
+    ));
+
     return (
-      <NavbarMenuItemWithDropdownWrapper>
+      <NavbarMenuItemDropdown items={groupItemsComponents} triggerEvent="hover">
         <NavbarMenuItem
           active={false}
           data-component-name="Navbar/NavbarItem"
@@ -55,23 +62,21 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
         </NavbarMenuItem>
-        <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
-      </NavbarMenuItemWithDropdownWrapper>
+      </NavbarMenuItemDropdown>
     );
   }
 
   return null;
 }
 
-export const NavbarMenuItemWithDropdownWrapper = styled.div`
-  display: inline-block;
-  position: relative;
-  border-radius: var(--navbar-item-border-radius);
-  &:hover {
-    background: var(--navbar-item-active-background-color);
-    ${DropdownWrapper} {
-      display: block;
-    }
+export const NavbarMenuItemDropdown = styled(Dropdown).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Navbar/NavbarItemDropdown',
+  },
+}))`
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
 
@@ -85,14 +90,14 @@ export const NavbarLink = styled(Link)`
 export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
-  margin-left: var(--navbar-item-margin-horizontal);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
   border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
-  color: ${({ active }) => active && 'var(--navbar-item-active-text-color)'};
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);

package/src/components/Navbar/NavbarMenu.tsx

@@ -29,13 +29,13 @@ export function NavbarMenu({
 
 const NavItemsContainer = styled.ul`
   list-style: none;
-  margin: 0 var(--navbar-item-margin-horizontal);
   padding: 0;
   display: none;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   flex: 1;
+  gap: var(--navbar-item-gap);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: flex;

package/src/components/OpenApiDocs/Dropdown.tsx

@@ -137,15 +137,15 @@ box-sizing: border-box;
     height: 36px;
     outline: none;
     display: inline-block;
-    color: var(--dropdown-text-color);
+    color: var(--docs-dropdown-text-color);
     border-radius: var(--border-radius);
-    border: var(--dropdown-border);
-    padding: var(--dropdown-padding);
+    border: var(--docs-dropdown-border);
+    padding: var(--docs-dropdown-padding);
     vertical-align: bottom;
     width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     text-transform: none;
     line-height: inherit;
-    font-size: var(--dropdown-font-size);
+    font-size: var(--docs-dropdown-font-size);
     font-family: inherit;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -176,7 +176,7 @@ box-sizing: border-box;
     line-height: inherit;
     font-size: 14px;
     font-family: inherit;
-    padding: var(--dropdown-padding);
+    padding: var(--docs-dropdown-padding);
     ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};
 
 `;

package/src/components/Product/Product.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ProductConfig } from '@theme/config';
+
+export type ProductProps = {
+  product: ProductConfig;
+  className?: string;
+};
+
+export const Product = ({ product, className }: ProductProps): JSX.Element | null => {
+  return (
+    <ProductWrapper data-component-name="Product/Product" className={className}>
+      <ProductLogo src={product.icon} />
+      <span>{product.name}</span>
+    </ProductWrapper>
+  );
+};
+
+const ProductWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProductLogo = styled.img`
+  margin-right: var(--product-logo-margin);
+  max-height: var(--select-line-height);
+`;

package/src/components/Product/ProductPicker.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ThemeUIConfig } from '../../config';
+
+import { useCurrentProduct, useGlobalData } from '@portal/hooks';
+import { Link } from '@portal/Link';
+import { ArrowIcon } from '@theme/icons';
+
+import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
+import { Product } from './Product';
+
+export const ProductPicker = () => {
+  const globalData = useGlobalData() as { theme?: ThemeUIConfig };
+  const currentProduct = useCurrentProduct();
+  const currentProductComponent = currentProduct ? (
+    <Product product={currentProduct} />
+  ) : (
+    'Products'
+  );
+
+  const products = Object.values(globalData?.theme?.products || {});
+
+  const productComponents = products.map((product) => (
+    <Link key={product.slug} to={product.link}>
+      <Product product={product} />
+    </Link>
+  ));
+
+  return products.length ? (
+    <ProductSelect
+      selected={currentProductComponent}
+      options={productComponents}
+      withArrow={true}
+      triggerEvent="hover"
+    />
+  ) : null;
+};
+
+const ProductSelect = styled(Select).attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Product/ProductPicker',
+  },
+}))`
+  display: none;
+  font-size: var(--product-picker-font-size);
+  font-weight: var(--product-picker-font-weight);
+  line-height: var(--product-picker-line-height);
+  border-radius: var(--product-picker-border-radius);
+  color: var(--product-picker-text-color);
+
+  ${SelectInput} {
+    border-radius: var(--product-picker-input-border-radius);
+    padding: var(--product-picker-input-padding-vertical)
+      var(--product-picker-input-padding-horizontal);
+    color: var(--navbar-text-color);
+
+    a {
+      color: var(--navbar-text-color);
+    }
+  }
+
+  ${SelectList} {
+    min-width: var(--product-picker-list-min-width);
+    max-width: var(--product-picker-list-max-width);
+    padding: var(--product-picker-list-padding);
+    background-color: var(--product-picker-list-background-color);
+    border-radius: var(--product-picker-list-border-radius);
+    box-shadow: var(--product-picker-list-box-shadow);
+  }
+
+  ${SelectListItem} {
+    border-radius: var(--product-picker-list-item-border-radius);
+
+    & > * {
+      padding: var(--product-picker-list-item-vertical-padding)
+        var(--product-picker-list-item-horizontal-padding);
+    }
+
+    :hover {
+      background-color: var(--product-picker-list-item-active-background-color);
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+
+  :hover {
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+
+  ${ArrowIcon} {
+    fill: var(--navbar-text-color);
+  }
+`;

package/src/components/Product/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/components/Product/ProductPicker';
+export * from '@theme/components/Product/Product';