@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Menu/MobileMenu.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import type { MobileMenuProps } from '@theme/components/Menu/types';
+import { MenuType } from '@theme/components/Menu/constants';
+import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
+import { MobileUserProfile } from '@theme/components/Profile/MobileUserProfile';
+import { useCurrentProduct } from '@portal/hooks';
+import { ArrowIcon } from '@theme/icons';
+import { Product } from '@theme/components/Product/Product';
+import { useMobileMenuLevels } from '@theme/components/Menu/hooks/use-mobile-menu-levels';
+import { useMobileMenuItems } from '@theme/components/Menu/hooks/use-mobile-menu-items';
+
+export function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null {
+  const location = useLocation();
+  const product = useCurrentProduct();
+
+  const menuLevels = useMobileMenuLevels();
+
+  const [menuLevel, setMenuLevel] = useState(menuLevels.length - 1);
+
+  useEffect(() => {
+    setMenuLevel(menuLevels.length - 1);
+  }, [menuLevels, location]);
+
+  const menuType = menuLevels[menuLevel]?.type || MenuType.MAIN_MENU;
+
+  const menuItems = useMobileMenuItems(menuType);
+
+  const prevLevelName = menuLevels[menuLevel - 1]?.label;
+  const nextLevelName = menuLevels[menuLevel + 1]?.label;
+  const isButtonsSectionVisible = nextLevelName || prevLevelName;
+
+  return (
+    <MobileMenuWrapper data-component-name="Menu/MobileMenu" className={className}>
+      <ScrollableArea>
+        {isButtonsSectionVisible && (
+          <ButtonsSection alignRight={!prevLevelName && !!nextLevelName}>
+            {prevLevelName && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(menuLevel - 1)}
+              >
+                <ArrowIcon direction="left" weight="thin" />
+                <ControlButtonLabel paddingDirection="left">{prevLevelName}</ControlButtonLabel>
+              </ControlButton>
+            )}
+            {nextLevelName && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(menuLevel + 1)}
+              >
+                <ControlButtonLabel paddingDirection="right">{nextLevelName}</ControlButtonLabel>
+                <ArrowIcon direction="right" weight="thin" />
+              </ControlButton>
+            )}
+          </ButtonsSection>
+        )}
+        {menuType === MenuType.PRODUCT && product ? (
+          <ProductNameWrapper>
+            <Product product={product} />
+          </ProductNameWrapper>
+        ) : null}
+        <MenuWrapper>
+          <Menu items={menuItems} isMobile />
+        </MenuWrapper>
+      </ScrollableArea>
+      {hideUserProfile ? null : <MobileUserProfile />}
+    </MobileMenuWrapper>
+  );
+}
+const MobileMenuWrapper = styled.div`
+  height: var(--mobile-menu-wrapper-height);
+  width: var(--mobile-menu-wrapper-width);
+  position: fixed;
+  z-index: var(--mobile-menu-wrapper-z-index);
+  left: var(--mobile-menu-wrapper-left);
+  top: var(--mobile-menu-wrapper-top);
+  overflow-x: hidden;
+  transition: var(--mobile-menu-wrapper-transition);
+  display: flex;
+  flex-direction: column;
+  background: var(--mobile-menu-wrapper-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;
+
+const ButtonsSection = styled.div<{ alignRight: boolean }>`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
+`;
+
+const ScrollableArea = styled.div`
+  padding-top: var(--mobile-menu-padding-top);
+  overflow-y: scroll;
+  flex-grow: 1;
+`;
+
+const MenuWrapper = styled.div`
+  margin: var(--mobile-menu-margin);
+  line-height: var(--mobile-menu-line-height);
+  background: var(--mobile-menu-background);
+
+  ${MenuItemLabel} {
+    margin: var(--mobile-menu-item-margin);
+    border-radius: var(--mobile-menu-item-radius);
+  }
+`;
+
+export const ControlButton = styled.li`
+  display: inline-block;
+  padding: var(--mobile-menu-control-button-padding);
+  margin: var(--mobile-menu-control-button-margin);
+  text-align: var(--mobile-menu-control-button-text-align);
+  font-size: var(--mobile-menu-control-button-font-size);
+  line-height: var(--mobile-menu-control-button-line-height);
+  font-weight: var(--mobile-menu-control-button-weight);
+  color: var(--mobile-menu-control-button-color);
+  cursor: pointer;
+
+  svg {
+    fill: var(--mobile-menu-control-button-color);
+  }
+
+  &:hover {
+    color: var(--mobile-menu-control-button-hover-color);
+
+    svg {
+      fill: var(--mobile-menu-control-button-hover-color);
+    }
+  }
+`;
+
+const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
+  vertical-align: middle;
+  ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
+  ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
+`;
+
+const ProductNameWrapper = styled.div`
+  color: var(--mobile-menu-product-name-color);
+  border-radius: var(--mobile-menu-product-name-border-radius);
+  border: var(--mobile-menu-product-name-border);
+  padding: var(--mobile-menu-product-name-padding);
+  margin: var(--mobile-menu-product-name-margin);
+`;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import type { ItemState } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+import { ArrowIcon } from '@theme/icons';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
+
+interface MenuGroupProps {
+  item: ItemState;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export function MobileMenuGroup({
+  item,
+  isExpanded,
+  toggleExpanded,
+  children,
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <Wrapper data-component-name="Menu/MobileMenuGroup">
+      <MenuLinkItem item={item}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          active={item.active}
+          expanded={isExpanded}
+          withArrow={!!item.items.length}
+        >
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
+          <LabelContainer>
+            {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+            <Label>{translate(item.labelTranslationKey, item.label)}</Label>
+          </LabelContainer>
+        </MenuGroupLabel>
+      </MenuLinkItem>
+      <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const LabelContainer = styled.div`
+  display: flex;
+`;
+
+const Label = styled.div``;
+
+const Wrapper = styled.div``;
+
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
+  padding-left: var(--mobile-menu-item-nested-offset);
+  overflow: hidden;
+  ${(props) => !props.isExpanded && 'max-height: 0'}
+`;
+
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  active?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
+  color: var(--mobile-menu-item-text-color);
+  background: var(--mobile-menu-background);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--mobile-menu-item-group-gap);
+
+  ${({ active }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-background-color);
+  `}
+
+  ${({ expanded }) =>
+    expanded &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+  `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--mobile-menu-item-label-padding);
+  `}
+`;

package/src/components/Menu/constants.ts

@@ -0,0 +1,5 @@
+export enum MenuType {
+  MAIN_MENU = 'MAIN_MENU',
+  PRODUCT = 'PRODUCT',
+  PAGE = 'PAGE',
+}

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

@@ -0,0 +1,96 @@
+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,
+};
+
+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('theme.mobileMenu.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,50 @@
+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';
+
+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('theme.mobileMenu.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('theme.mobileMenu.previous', 'Previous'),
+        type: MenuType.PAGE,
+      });
+    }
+    return menuLevels;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
+  return menuLevels;
+};

package/src/components/Menu/index.ts

@@ -0,0 +1,13 @@
+export * from '@theme/components/Menu/Menu';
+export * from '@theme/components/Menu/MenuItem';
+export * from '@theme/components/Menu/MenuGroup';
+export * from '@theme/components/Menu/MenuContainer';
+export * from '@theme/components/Menu/MenuItemLabel';
+export * from '@theme/components/Menu/MenuItemSwitch';
+export * from '@theme/components/Menu/MenuLink';
+export * from '@theme/components/Menu/MenuLinkItem';
+export * from '@theme/components/Menu/MobileMenu';
+export * from '@theme/components/Menu/MobileMenuGroup';
+export * from '@theme/components/Menu/styledVariables';
+export * from '@theme/components/Menu/types';
+export * from '@theme/components/Menu/constants';

package/src/components/Menu/styledVariables.ts

@@ -0,0 +1,101 @@
+import { css } from 'styled-components';
+
+export const mobileMenu = css`
+  /**
+      * @tokens Mobile Menu icons
+      */
+  --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
+
+  /**
+      * @tokens Mobile Menu wrapper
+      * */
+  --mobile-menu-wrapper-height: calc(100vh - var(--navbar-height));
+  --mobile-menu-wrapper-width: 100%;
+  --mobile-menu-wrapper-z-index: var(--z-index-raised);
+  --mobile-menu-wrapper-left: 0;
+  --mobile-menu-wrapper-top: var(--navbar-height);
+  --mobile-menu-wrapper-transition: 0.5s;
+  --mobile-menu-wrapper-background: var(--bg-base); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu
+      * */
+  --mobile-menu-margin: var(--mobile-menu-items-margin-top) var(--mobile-menu-horizontal-margin) 0
+    var(--mobile-menu-horizontal-margin);
+  --mobile-menu-line-height: var(--line-height-base); // @presenter LineHeight
+  --mobile-menu-padding-top: var(--spacing-sm); // @presenter Spacing
+  --mobile-menu-items-margin-top: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-burger-button-margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0; // @presenter Spacing
+  --mobile-menu-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-border-color: var(--border-secondary); // @presenter Color
+  --mobile-menu-group-padding-right: var(--spacing-base); // @presenter Spacing
+  --mobile-menu-horizontal-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-margin: 0; // @presenter Spacing
+  --mobile-menu-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
+  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
+  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+  --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
+  --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
+
+  /**
+      * @tokens Mobile Menu control button
+      * */
+  --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-control-button-padding: var(--mobile-menu-control-button-padding-vertical) var(--mobile-menu-control-button-padding-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-control-button-margin: var(--mobile-menu-control-button-margin-vertical) var(--mobile-menu-control-button-margin-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+  --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+  --mobile-menu-control-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-control-button-text-align: center;
+  --mobile-menu-control-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Login button
+      * */
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
+  --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
+  // @tokens End
+`;
+
+export const menu = css`
+  /**
+    * @tokens Menu
+    */
+  --menu-padding: 0;
+  --menu-margin: 0;
+  --menu-list-style: none;
+  --menu-text-color: var(--sidebar-item-text-color);
+
+  --menu-item-label-align-items: center;
+  --menu-item-label-transition: background-color 0.3s, color 0.3s;
+  --menu-item-label-word-break: break-word;
+  --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
+  --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+
+  // @tokens End
+`;

package/src/components/Menu/types.ts

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

package/src/components/Menu/utils.ts

@@ -0,0 +1,110 @@
+import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
+
+import type { ItemState } from '@theme/components/Sidebar/types';
+import type { Locale, ResolvedNavItem, 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/BurgerButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BurgerIcon, CloseIcon } from '@theme/icons';
+
+export function BurgerButton({
+  isOpen,
+  onClick,
+}: {
+  isOpen: boolean;
+  onClick: () => void;
+}): JSX.Element | null {
+  return (
+    <Wrapper data-component-name="BurgerButton/BurgerButton" onClick={onClick}>
+      {isOpen ? <CloseIcon /> : <BurgerIcon />}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  fill: var(--navbar-text-color);
+
+  * {
+    margin: var(--mobile-menu-burger-button-margin);
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;