@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Markdown/styledVariables.ts

@@ -0,0 +1,284 @@
+import { css } from "styled-components";
+
+export const admonition = css`
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
+  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-transform: uppercase;
+
+  /**
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
+  --admonition-margin-horizontal: 0;
+  --admonition-margin-vertical: var(--spacing-lg);
+  --admonition-padding-horizontal: var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
+  --admonition-icon-size: 25px;
+
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: 0; // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: var(--border-width);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-background-color: var(--color-info-bg); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-info-text-color: var(--text-secondary); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-border-color: inherit; // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
+    var(--admonition-info-border-color); // @presenter Border
+  --admonition-info-icon: none;
+
+  /**
+  * @tokens Admonition type attention
+  * @presenter Color
+  */
+
+  --admonition-attention-background-color: var(--color-yellow-1); // @presenter Color
+  --admonition-attention-text-color: var(--text-secondary); // @presenter Color
+  --admonition-attention-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-attention-icon-color: var(--color-yellow-6); // @presenter Color
+  --admonition-attention-border-color: inherit; // @presenter Color
+  --admonition-attention-border-style: var(--admonition-border-style);
+  --admonition-attention-border-width: var(--admonition-border-width);
+  --admonition-attention-border: var(--admonition-attention-border-width)
+    var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
+  --admonition-attention-icon: none;
+
+  /**
+  * @tokens Admonition type warning
+  */
+
+  /* warning */
+  --admonition-warning-background-color: var(--color-warning-bg); // @presenter Color
+  --admonition-warning-text-color: var(--text-secondary); // @presenter Color
+  --admonition-warning-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-border-color: inherit; // @presenter Color
+  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-warning-border: var(--admonition-warning-border-width)
+    var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
+  --admonition-warning-icon: none;
+
+  /**
+  * @tokens Admonition type danger
+  */
+
+  --admonition-danger-background-color: var(--color-error-bg); // @presenter Color
+  --admonition-danger-text-color: var(--text-secondary); // @presenter Color
+  --admonition-danger-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-border-color: inherit; // @presenter Color
+  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-danger-border: var(--admonition-danger-border-width)
+    var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
+  --admonition-danger-icon: none;
+
+  /**
+  * @tokens Admonition type success
+  */
+
+  --admonition-success-background-color: var(--color-success-bg); // @presenter Color
+  --admonition-success-text-color: var(--text-secondary); // @presenter Color
+  --admonition-success-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-border-color: inherit; // @presenter Color
+  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-success-border: var(--admonition-success-border-width)
+    var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-icon: none;
+
+  // @tokens End
+`;
+
+export const markdown = css`
+  /**
+  * @tokens Markdown Container
+  */
+
+  --md-container-max-width: 910px;
+  --md-container-padding-vertical: 25px; // @presenter Spacing
+  --md-container-padding-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Blockquote
+  */
+
+  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
+  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
+  --md-blockquote-padding-vertical: 0; // @presenter Spacing
+  --md-blockquote-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --md-blockquote-border-color: var(--border-primary); // @presenter Color
+  --md-blockquote-background-color: transparent; // @presenter Color
+  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
+  --md-blockquote-text-color: var(--text-secondary); // @presenter Color
+  --md-blockquote-box-shadow: none; // @presenter Shadow
+
+  /**
+  * @tokens Markdown Paragraph
+  */
+
+  --md-paragraph-margin-vertical: 10px; // @presenter Spacing
+  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Table
+  */
+
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
+  --md-table-margin-vertical: 20px; // @presenter Spacing
+  --md-table-background-color: transparent; // @presenter Color
+
+  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --md-table-border-width: 1px;
+  --md-table-border-color: var(--border-primary); // @presenter Color
+
+  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color
+
+  --md-table-cell-text-color: var(--text-secondary); // @presenter Color
+  --md-table-cell-padding: var(--spacing-sm); // @presenter Spacing
+
+  --md-table-head-background-color: var(--bg-overlay); // @presenter Color
+  --md-table-head-text-color: var(--text-primary); // @presenter Color
+  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  /**
+  * @tokens Markdown Horizontal Rule
+  */
+
+  --md-hr-background-color: transparent; // @presenter Color
+  --md-hr-border-color: var(--border-primary); // @presenter Color
+  --md-hr-height: unset;
+  --md-hr-margin-vertical: 20px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown List
+  */
+
+  --md-list-left-padding: 2rem; // @presenter Spacing
+  --md-list-margin: 1rem; // @presenter Spacing
+  --md-list-item-margin: 0.25rem; // @presenter Spacing
+  --md-list-item-style: inherit;
+
+
+  /**
+  * @tokens Markdown Checkbox List
+  */
+
+  --md-checkbox-list-item-style: none;
+
+  /**
+  * @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-number-display: none;
+  --md-numbered-list-item-style: var(--md-list-item-style);
+  --md-numbered-list-number-text-color: var(--text-secondary); // @presenter Color
+  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-background-color: var(--bg-raised); // @presenter Color
+  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
+  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
+  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+  
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-background-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-background-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
+
+  --md-tabs-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --md-tabs-tab-background-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-active-tab-border-color: var(--text-base); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+  
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
+  --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+
+  // @tokens End
+`;
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import React from 'react';
+
+import type { ItemState } from '@portal/Sidebar/types';
+import { MenuItemSwitch } from '@theme/components/Menu/MenuItemSwitch';
+
+export interface MenuListProps {
+  items: ItemState[];
+  depth?: number;
+  isMobile?: boolean;
+  className?: string;
+}
+
+export function Menu({ depth = 0, items, className, isMobile }: MenuListProps) {
+  // TODO: provide active section via MenuContext
+  const activeItem = items.find(({ active }) => active);
+
+  return (
+    <ThemeMenu className={className}>
+      {items.map((item, index) => {
+        return (
+          <MenuItemSwitch
+            item={item}
+            key={`${item.pageId}-${index}`}
+            activeItem={activeItem}
+            isMobile={isMobile}
+          >
+            {item.items?.length ? (
+              <Menu items={item.items} depth={depth + 1} isMobile={isMobile} />
+            ) : null}
+          </MenuItemSwitch>
+        );
+      })}
+    </ThemeMenu>
+  );
+}
+
+export const ThemeMenu = styled.ul.attrs(() => ({
+  'data-component-name': 'Menu/Menu',
+}))`
+  padding: var(--menu-padding);
+  margin: var(--menu-margin);
+  list-style: var(--menu-list-style);
+  color: var(--menu-text-color);
+  position: relative;
+`;

package/src/components/Menu/MenuContainer.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+interface MenuContainerProps {
+  growContent?: boolean;
+  className?: string;
+}
+
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent, className }) => ({
+  'data-component-name': 'Menu/MenuContainer',
+  growContent: growContent === undefined ? true : growContent,
+  className,
+}))<MenuContainerProps>`
+  position: relative;
+  overflow-y: auto;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
+  padding-top: var(--sidebar-offset-top);
+`;

package/src/components/Menu/MenuGroup.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
+import type { ItemState } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+
+interface MenuGroupProps {
+  item: ItemState;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+  className?: string;
+}
+
+export function MenuGroup({
+  item,
+  isExpanded,
+  toggleExpanded,
+  children,
+  className,
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { translate } = useTranslate();
+
+  useEffect(() => {
+    timer.current && clearTimeout(timer.current);
+    if (isExpanded) {
+      setShowChildren(true);
+    } else {
+      timer.current = setTimeout(() => {
+        setShowChildren(false);
+      }, 800);
+    }
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [isExpanded]);
+
+  return (
+    <Wrapper data-component-name="Menu/MenuGroup" className={className}>
+      <MenuLinkItem item={item}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          isAlwaysExpanded={item.expanded === 'always'}
+          active={item.active}
+          role={!item.link ? 'link' : 'none'}
+          expanded={isExpanded}
+          withArrow={!!item.items.length}
+        >
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
+          <LabelWrapper>
+            {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+            {translate(item.labelTranslationKey, item.label)}
+          </LabelWrapper>
+        </MenuGroupLabel>
+      </MenuLinkItem>
+
+      <MenuWrapper isExpanded={isExpanded}>{showChildren ? children : null}</MenuWrapper>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
+  padding-left: var(--sidebar-item-nested-offset);
+  overflow: hidden;
+  ${(props) =>
+    props.isExpanded
+      ? `max-height: 99999px;
+        transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
+      : `max-height: 0px;
+	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
+`;
+
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  isAlwaysExpanded?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
+  padding-left: var(--sidebar-item-padding-horizontal);
+  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+  font-family: var(--sidebar-item-group-font-family);
+  font-size: var(--sidebar-item-group-font-size);
+  text-transform: var(--sidebar-text-group-transform);
+  color: var(--sidebar-item-group-text-color);
+  background: var(--sidebar-item-group-background-color);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
+
+  ${({ active }) =>
+    active
+      ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+      : null};
+
+  ${({ expanded }) =>
+    expanded &&
+    `
+    color: var(--sidebar-item-group-active-text-color);
+  `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
+`;

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { ExternalIcon } from '@theme/icons/ExternalIcon';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { SidebarItemIcon } from '@theme/components/Sidebar/SidebarItemIcon';
+import { useTranslate } from '@portal/hooks';
+
+export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
+  return (
+    <Wrapper data-component-name="Sidebar/MenuItem" className={className}>
+      <MenuLinkItem item={item}>
+        <Label active={item.active}>
+          {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+          {translate(item.labelTranslationKey, item.label)}
+          {item.external ? <ExternalIcon /> : null}
+        </Label>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const Label = styled(MenuItemLabel)<{ active?: boolean }>`
+  padding-left: var(--sidebar-item-label-padding);
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+
+  ${({ active, theme }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+    }
+  `};
+`;

package/src/components/Menu/MenuItemLabel.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Menu/MenuItemLabel',
+  className,
+}))<{ active?: boolean }>`
+  display: flex;
+  align-items: var(--menu-item-label-align-items);
+  cursor: pointer;
+  transition: var(--menu-item-label-transition);
+  word-break: var(--menu-item-label-word-break);
+
+  background-color: var(--sidebar-item-background-color);
+  font-family: var(--sidebar-item-font-family);
+  font-size: var(--sidebar-item-font-size);
+  font-weight: var(--sidebar-item-font-weight);
+  line-height: var(--sidebar-item-line-height);
+  margin: var(--menu-item-label-margin);
+  padding: var(--menu-item-label-padding);
+  border-radius: var(--sidebar-item-border-radius);
+
+  ${({ active, theme }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-background-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+      background-color: var(--sidebar-item-active-background-color);
+    }
+  `};
+
+  :hover {
+    color: var(--mobile-menu-item-active-text-color);
+
+    ${({ theme }) => theme.mediaQueries.medium} {
+      color: var(--sidebar-item-hover-color);
+      background: var(--sidebar-item-hover-background-color);
+    }
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;

package/src/components/Menu/MenuItemSwitch.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { PropsWithChildren } from 'react';
+
+import { ApiCallItem, type MenuItemProps } from '@theme/components/Sidebar';
+import { MenuType } from '@portal/Sidebar/types';
+import { getMenuType } from '@portal/Sidebar/getMenuType';
+import { useDrilldown } from '@portal/Sidebar/useDrilldown';
+import { useMenuGroup } from '@portal/Sidebar/useMenuGroup';
+import { MobileMenuGroup } from '@theme/components/Menu/MobileMenuGroup';
+import { Separator } from '@theme/components/Separator/Separator';
+import { MenuItem } from '@theme/components/Menu/MenuItem';
+
+export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
+  const type = getMenuType(props.item);
+
+  const {
+    Drilldown,
+    handleBack,
+    handleExpand,
+    isExpanded: drilldownIsExpanded,
+  } = useDrilldown(props);
+
+  const { MenuGroup, handleGroupClick, isExpanded } = useMenuGroup(props.item);
+  switch (type) {
+    case MenuType.Separator:
+      return <Separator {...props} />;
+    case MenuType.Operation:
+      return <ApiCallItem {...props} />;
+    case MenuType.Group:
+      const Group = props.isMobile ? MobileMenuGroup : MenuGroup;
+
+      if (!props.item.items?.length) {
+        // Needed for OpenApi docs model items
+        return (
+          <Group item={props.item} isExpanded={false} toggleExpanded={() => {}}>
+            {props.children}
+          </Group>
+        );
+      }
+
+      return (
+        <Group item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
+          {props.children}
+        </Group>
+      );
+    case MenuType.DrillDown:
+      return (
+        <Drilldown
+          item={props.item}
+          isExpanded={drilldownIsExpanded}
+          back={handleBack}
+          expand={handleExpand}
+        >
+          {props.children}
+        </Drilldown>
+      );
+    default:
+      return <MenuItem {...props} />;
+  }
+}

package/src/components/Menu/MenuLink.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export const MenuLink = styled(Link).attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Sidebar/MenuLink',
+  className,
+}))`
+  text-decoration: none;
+  color: var(--sidebar-item-text-color);
+`;

package/src/components/Menu/MenuLinkItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLink } from '@theme/components/Menu/MenuLink';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { telemetry } from '@portal/telemetry';
+
+export function MenuLinkItem({
+  item,
+  children,
+  className,
+}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
+  return (
+    <Wrapper
+      data-component-name="Sidebar/MenuLinkItem"
+      className={className}
+      onClick={() => telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type })}
+    >
+      {item.link ? (
+        <MenuLink to={item.link} {...item}>
+          {children}
+        </MenuLink>
+      ) : (
+        children
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.span``;