@redocly/theme 0.1.7 → 0.1.8

package/src/Search/SearchItem.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+import { OperationBadge } from '@theme/OperationBadge';
+import { Link } from '@portal/Link';
+import { ActiveItem, SearchDocument } from '@shared/models';
+import { Parameters } from '@theme/Search/Parameters';
+import { highlight } from '@theme/Search/utils';
+
+interface SearchItemProps {
+  item: ActiveItem<SearchDocument>;
+}
+
+export function SearchItem({ item }: SearchItemProps): JSX.Element {
+  const ref = useRef<HTMLAnchorElement>();
+
+  useEffect(() => {
+    if (item.active) {
+      ref.current?.focus();
+    }
+  }, [item.active]);
+
+  return (
+    <SearchLink to={item.url} tabIndex={0} innerRef={ref} data-component-name="Search/SearchItem">
+      {item.httpVerb ? (
+        <Operation>
+          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
+          {highlight(item.pathName)}
+        </Operation>
+      ) : null}
+      <Title>{highlight(item.title)}</Title>
+      <Description>{highlight(item.text)}</Description>
+
+      {item.parameters?.length ? (
+        <Parameters parameters={item.parameters} />
+      ) : (
+        <Path>{item.path?.join(' → ')}</Path>
+      )}
+    </SearchLink>
+  );
+}
+
+const SearchLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  padding: 8px 24px;
+  transition: background-color 0.3s ease;
+  outline: none;
+  white-space: nowrap;
+  color: var(--search-item-text-color);
+
+  &:hover,
+  &:focus {
+    background-color: var(--search-item-active-background-color);
+  }
+`;
+
+const Operation = styled.div`
+  font-weight: var(--font-weight-light);
+  font-size: var(--font-size-small);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Title = styled.div`
+  font-weight: var(--font-weight-bold);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-m);
+`;
+
+const Description = styled.div`
+  font-size: var(--font-size-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Path = styled.div`
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 22px;
+`;

package/src/Search/utils.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export const highlight = (text: string | string[]): JSX.Element | string => {
+  if (!Array.isArray(text)) return text;
+
+  const [pre, entry, suf] = text;
+  return (
+    <>
+      {pre}
+      <Strong>{entry}</Strong>
+      {suf}
+    </>
+  );
+};
+
+const Strong = styled.strong`
+  color: var(--color-primary-main);
+`;

package/src/Sidebar/ApiCallItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { OperationBadge } from '@theme/OperationBadge';
+import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+import MenuLinkItem from '@theme/Sidebar/MenuLinkItem';
+import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+
+export default function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/ApiCallItem">
+      <MenuLinkItem item={item}>
+        <MenuItemLabel active={item.active}>
+          {/* TODO: not sure item.httpVerb || 'event' is correct */}
+          <Badge type={item.httpVerb || 'event'}>
+            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
+          </Badge>
+          {item.label}
+        </MenuItemLabel>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+export const Badge = styled(OperationBadge)`
+  flex-shrink: 0;
+  margin-top: 0;
+`;

package/src/Sidebar/ArrowBack.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Arrow = ({ className }: { className?: string }): JSX.Element => (
+  <span data-component-name="Sidebar/ArrowBack">
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12 10"
+      width="12px"
+      height="10px"
+      className={className}
+    >
+      <path d="M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" />
+      <path d="M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" />
+    </svg>
+  </span>
+);
+
+export default styled(Arrow)`
+  fill: var(--sidebar-chevron-color);
+`;

package/src/Sidebar/BackButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import ArrowBack from '@theme/Sidebar/ArrowBack';
+
+interface BackButtonProps {
+  back: () => void;
+}
+
+export default function BackButton({
+  children,
+  back,
+}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
+  return (
+    <Button onClick={back} data-component-name="Sidebar/BackButton">
+      <ArrowBack />
+      {children}
+    </Button>
+  );
+}
+
+const Button = styled.button`
+  width: 100%;
+  background-color: transparent;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  color: var(--color-secondary-contrast);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: var(--sidebar-font-size);
+  transition: color 0.25s ease;
+  text-align: left;
+  margin-bottom: calc(var(--sidebar-spacing-padding-vertical) * 3);
+
+  svg {
+    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  }
+
+  &:hover {
+    color: var(--sidebar-text-color);
+  }
+`;

package/src/Sidebar/Drilldown.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+import DrilldownMenuItem from '@theme/Sidebar/DrilldownMenuItem';
+import DrilldownMenu from '@theme/Sidebar/DrilldownMenu';
+import DrilldownMenuProps from '@theme/Sidebar/types/DrilldownMenuProps';
+
+interface DrilldownProps extends DrilldownMenuProps {
+  isExpanded: boolean;
+  expand: () => void;
+}
+
+export default function Drilldown({
+  isExpanded,
+  item,
+  expand,
+  ...props
+}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/Drilldown">
+      <DrilldownLabel onClick={expand}>
+        <DrilldownMenuItem item={item} />
+      </DrilldownLabel>
+
+      {isExpanded ? <DrilldownMenu item={item} {...props} /> : null}
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const DrilldownLabel = styled(MenuItemLabel)`
+  padding-top: calc(var(--sidebar-spacing-padding-vertical) * 2);
+  padding-bottom: calc(var(--sidebar-spacing-padding-vertical) * 2);
+  padding-left: var(--sidebar-spacing-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    color: initial;
+    background-color: initial;
+  }
+`;

package/src/Sidebar/DrilldownMenu.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import DrilldownMenuProps from '@theme/Sidebar/types/DrilldownMenuProps';
+import BackButton from '@theme/Sidebar/BackButton';
+import DrilldownMenuItem from '@theme/Sidebar/DrilldownMenuItem';
+
+export default function DrilldownMenu({
+  item,
+  back,
+  prevActiveItem,
+  children,
+}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+  return (
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
+      <MenuContent>
+        <MenuWrapper>
+          <BackButton back={back}>{prevActiveItem?.label || 'Back'}</BackButton>
+          <DrilldownMenuItem item={item} />
+        </MenuWrapper>
+
+        {children}
+      </MenuContent>
+    </MenuContainer>
+  );
+}
+
+const MenuContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: var(--sidebar-background-color);
+`;
+
+const slideInAnimation = keyframes`
+  0% {
+    transform: translateX(100%)
+  }
+  100% {
+    transform: translateX(0%)
+  }
+`;
+
+const MenuContent = styled.div`
+  animation-name: ${slideInAnimation};
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  background-color: transparent;
+`;
+
+const MenuWrapper = styled.div`
+  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
+  word-break: break-word;
+`;

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+
+export default function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Container data-component-name="Sidebar/DrilldownMenuItem">
+      {item.icon ? <Icon src={item.icon} /> : null}
+      <div>
+        {item.label}
+        {item.sublabel ? <Sublabel>{item.sublabel}</Sublabel> : null}
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-text-color);
+  font-size: var(--sidebar-font-size);
+  font-weight: var(--font-weight-bold);
+`;
+
+const Icon = styled.img`
+  width: calc(var(--sidebar-spacing-unit) * 4);
+  height: calc(var(--sidebar-spacing-unit) * 4);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
+const Sublabel = styled.div`
+  margin-top: 2px;
+  font-size: 0.85rem;
+  color: var(--color-secondary-contrast);
+  font-weight: var(--font-weight-regular);
+`;

package/src/Sidebar/ExternalIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = ({ className }: { className?: string }): JSX.Element => (
+  <span data-component-name="Sidebar/ExternalIcon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 125"
+      enableBackground="new 0 0 100 100"
+      className={className}
+    >
+      <path d="M-408.167-318.5" />
+      <line
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="0.25"
+        strokeMiterlimit="10"
+        x1="57.5"
+        y1="11.75"
+        x2="57.5"
+        y2="17.5"
+      />
+      <path d="M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" />
+      <path d="M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" />
+    </svg>
+  </span>
+);
+
+export default styled(Icon)`
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+  fill: var(--sidebar-chevron-color);
+`;

package/src/Sidebar/Menu.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export default styled.ul.attrs(() => ({
+  'data-component-name': 'Sidebar/Menu',
+}))`
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color: var(--sidebar-text-color);
+  position: relative;
+`;

package/src/Sidebar/MenuContainer.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  position: relative;
+  overflow-y: auto;
+  flex-grow: 1;
+  padding-top: var(--sidebar-spacing-offset-top);
+`;

package/src/Sidebar/MenuGroup.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Arrow } from '@theme/ui/Arrow/Arrow';
+import ItemState from '@theme/Sidebar/types/ItemState';
+import MenuLinkItem from '@theme/Sidebar/MenuLinkItem';
+import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+
+interface MenuGroupProps {
+  item: ItemState;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export function MenuGroup({
+  item,
+  isExpanded,
+  toggleExpanded,
+  children,
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/MenuGroup">
+      <MenuLinkItem item={item}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          isAlwaysExpanded={item.expanded === 'always'}
+          active={item.active}
+        >
+          <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />
+          {item.label}
+        </MenuGroupLabel>
+      </MenuLinkItem>
+
+      <MenuWrapper>{isExpanded ? children : null}</MenuWrapper>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;
+
+const MenuWrapper = styled.div`
+  padding-left: var(--sidebar-spacing-offset-nesting);
+`;
+
+const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
+  padding-left: var(--sidebar-spacing-padding-horizontal);
+  cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+`;
+
+const MenuGroupArrow = styled(Arrow)`
+  margin-right: calc(var(--sidebar-spacing-unit) / 2);
+`;

package/src/Sidebar/MenuItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+import MenuLinkItem from '@theme/Sidebar/MenuLinkItem';
+import ExternalIcon from '@theme/Sidebar/ExternalIcon';
+import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+
+export default function MenuItem({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/MenuItem">
+      <MenuLinkItem item={item}>
+        <MenuItemLabel active={item.active}>
+          {item.label}
+          {item.external ? <ExternalIcon /> : null}
+        </MenuItemLabel>
+      </MenuLinkItem>
+
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Sidebar/MenuItemLabel.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export default styled.li.attrs(() => ({
+  'data-component-name': 'Sidebar/MenuItemLabel',
+}))<{ active?: boolean }>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  word-break: break-word;
+  margin-bottom: 1px;
+
+  font-family: var(--sidebar-font-family);
+  font-size: var(--sidebar-font-size);
+  font-weight: var(--font-weight-regular);
+  margin-left: var(--sidebar-spacing-offset-left);
+  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  padding-left: calc(
+    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +
+      var(--sidebar-spacing-unit) * 0.5
+  );
+  border-top-left-radius: var(--sidebar-border-radius);
+  border-bottom-left-radius: var(--sidebar-border-radius);
+
+  ${(props) =>
+    props.active
+      ? `
+    color: var(--sidebar-text-active-color);
+    background-color: var(--sidebar-text-active-background-color);
+  `
+      : null};
+
+  :hover {
+    color: var(--sidebar-text-active-color);
+    background-color: var(--sidebar-text-active-background-color);
+  }
+
+  :empty {
+    padding: 0;
+  }
+`;

package/src/Sidebar/MenuLink.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { UniversalLink, UniversalLinkProps } from '@theme/ui/UniversalLink';
+
+export default styled(UniversalLink).attrs(() => ({
+  'data-component-name': 'Sidebar/MenuLink',
+}))<UniversalLinkProps>`
+  text-decoration: none;
+  color: var(--sidebar-text-color);
+
+  &&.external-url:after {
+    content: none;
+  }
+`;

package/src/Sidebar/MenuLinkItem.tsx

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

package/src/Sidebar/MobileSidebarButton.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export default styled.span.attrs(() => ({
+  'data-component-name': 'Sidebar/MobileSidebarButton',
+}))<{ opened?: boolean }>`
+  background-color: var(--color-primary-500);
+  width: 55px;
+  user-select: none;
+  height: 55px;
+  bottom: 44px;
+  cursor: pointer;
+  position: fixed;
+  right: 20px;
+  z-index: 3;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
+  border-radius: 50%;
+  transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transition: transform 0.75s;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+    transform: rotate(180deg);
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    display: none !important;
+  }
+
+  :after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    background-color: var(--color-primary-contrast);
+    -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
+      no-repeat 50% 50%;
+    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
+      no-repeat 50% 50%;
+  }
+`;

package/src/Sidebar/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import MenuItemProps from '@theme/Sidebar/types/MenuItemProps';
+import SeparatorLine from '@theme/Sidebar/SeparatorLine';
+import SeparatorItem from '@theme/Sidebar/SeparatorItem';
+
+export default function Separator({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/Separator">
+      <SeparatorItem>{item.label}</SeparatorItem>
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Sidebar/SeparatorItem.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import MenuItemLabel from '@theme/Sidebar/MenuItemLabel';
+
+export default styled(MenuItemLabel)`
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+  color: var(--sidebar-separator-label-color);
+
+  :hover {
+    color: inherit;
+    background-color: inherit;
+  }
+`;

package/src/Sidebar/SeparatorLine.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export default styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/SeparatorLine',
+}))`
+  height: 1px;
+  background-color: var(--sidebar-separator-line-color);
+  margin: var(--sidebar-spacing-padding-vertical) 0;
+`;