@redocly/theme 0.15.1 → 0.16.0

package/src/components/Search/ShortcutKey.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 interface ShortcutKeyProps {
   keyShortcuts?: string | string[];
+  className?: string;
 }
 
 export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
@@ -18,7 +19,7 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
 
-  return <Wrapper>{mainShortcutKey}</Wrapper>;
+  return <Wrapper className={props.className}>{mainShortcutKey}</Wrapper>;
 }
 
 export const Wrapper = styled.div`

package/src/components/Search/SidebarSearch.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components';
 import { Search } from '@theme/components/Search/Search';
 import { Popover } from '@theme/components/Search/Popover';
 
-export const SidebarSearch = styled(Search).attrs(() => ({
+export const SidebarSearch = styled(Search).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/SidebarSearch',
+  className,
 }))`
   --search-input-text-color: var(--sidebar-item-active-color);
 

package/src/components/Search/SuggestedPages.tsx

@@ -6,7 +6,7 @@ import { useSuggestedPages } from '@portal/search';
 import { Link } from '@portal/Link';
 import { useTranslate } from '@portal/hooks';
 
-export function SuggestedPages() {
+export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -16,7 +16,7 @@ export function SuggestedPages() {
   if (!pages.length) return null;
 
   return (
-    <Wrapper data-component-name="Search/SuggestedPages">
+    <Wrapper data-component-name="Search/SuggestedPages" className={className}>
       <Title data-translation-key={translationKeys.title}>
         {translate(translationKeys.title, 'Suggested pages')}
       </Title>

package/src/components/Separator/Separator.tsx

@@ -6,11 +6,11 @@ import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function Separator({ item }: MenuItemProps): JSX.Element {
+export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator">
+    <Wrapper data-component-name="Sidebar/Separator" className={className}>
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>

package/src/components/Separator/SeparatorItem.tsx

@@ -2,16 +2,23 @@ import styled from 'styled-components';
 
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 
-export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
-  'data-component-name': 'Sidebar/SeparatorItem',
-}))`
+export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+    className,
+  }),
+)`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-item-color);
   font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
-  background: var(--sidebar-item-separator-background-color);
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
 
   *:not(:first-child) > & {
     margin-top: var(--sidebar-item-separator-offset);

package/src/components/Separator/SeparatorLine.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const SeparatorLine = styled.div.attrs(() => ({
+export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/SeparatorLine',
+  className,
 }))`
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);

package/src/components/Sidebar/ApiCallItem.tsx

@@ -7,16 +7,16 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 
-export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/ApiCallItem">
+    <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
+        <Label active={item.active}>
           <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </Badge>
           {item.label}
-        </MenuItemLabel>
+        </Label>
       </MenuLinkItem>
 
       {item.separatorLine ? <SeparatorLine /> : null}
@@ -24,6 +24,14 @@ export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
   );
 }
 
+const Label = styled(MenuItemLabel)`
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
+
 const Wrapper = styled.div``;
 
 export const Badge = styled(OperationBadge)`

package/src/components/Sidebar/BackButton.tsx

@@ -5,14 +5,16 @@ import { ArrowBack } from '@theme/ui/ArrowBack';
 
 interface BackButtonProps {
   back: () => void;
+  className?: string;
 }
 
 export function BackButton({
   children,
   back,
+  className,
 }: React.PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
-    <Button onClick={back} data-component-name="Sidebar/BackButton">
+    <Button onClick={back} data-component-name="Sidebar/BackButton" className={className}>
       <ArrowBack dataComponentName="Sidebar/ArrowBack" />
       {children}
     </Button>

package/src/components/Sidebar/Drilldown.tsx

@@ -10,16 +10,18 @@ import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
   expand: () => void;
+  className?: string;
 }
 
 export function Drilldown({
   isExpanded,
   item,
   expand,
+  className,
   ...props
 }: React.PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/Drilldown">
+    <Wrapper data-component-name="Sidebar/Drilldown" className={className}>
       <DrilldownLabel onClick={expand}>
         <DrilldownMenuItem item={item} />
       </DrilldownLabel>

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -11,13 +11,14 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
+  className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
   const translationKeys = {
     backLabel: 'theme.sidebar.menu.backLabel',
   };
   return (
-    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
           <BackButton back={back} data-translation-key={translationKeys.backLabel}>
@@ -37,7 +38,7 @@ const MenuContainer = styled.div`
   top: 0;
   bottom: 0;
   width: 100%;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
 `;
 

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+export function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Container data-component-name="Sidebar/DrilldownMenuItem">
+    <Container data-component-name="Sidebar/DrilldownMenuItem" className={className}>
       {item.icon ? <Icon src={item.icon} /> : null}
       <div>
         {translate(item.labelTranslationKey, item.label)}

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const HeaderWrapper = styled.div.attrs(() => ({
+export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/HeaderWrapper',
+  className,
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);

package/src/components/Sidebar/MobileSidebarButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const MobileSidebarButton = styled.span.attrs(() => ({
+export const MobileSidebarButton = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/MobileSidebarButton',
+  className,
 }))<{ opened?: boolean }>`
   background-color: var(
     ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
@@ -13,7 +14,7 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
   cursor: pointer;
   position: fixed;
   right: 20px;
-  z-index: 3;
+  z-index: var(--z-index-surface);
   box-shadow: ${(props) =>
     props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
   border-radius: 50%;

package/src/components/Sidebar/Sidebar.tsx

@@ -5,8 +5,9 @@ interface SidebarProps {
   animate?: boolean;
 }
 
-export const Sidebar = styled.aside.attrs(() => ({
+export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/Sidebar',
+  className,
 }))<SidebarProps>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;

package/src/components/Sidebar/SidebarLayout.tsx

@@ -25,6 +25,7 @@ interface SidebarLayoutProps {
   growContent?: boolean;
   collapsed?: boolean;
   onToggleMenu?: (isOpen: boolean) => void;
+  className?: string;
 }
 
 const StyledFooterWrapper = styled(FooterWrapper)`
@@ -43,6 +44,7 @@ export function SidebarLayout({
   growContent,
   collapsed,
   onToggleMenu,
+  className,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
@@ -76,10 +78,7 @@ export function SidebarLayout({
           </Wrapper>
         ) : null
       ) : (
-        <Wrapper data-component-name="Sidebar/SidebarLayout">
-          <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
-            <MobileSidebarIcon />
-          </MobileSidebarButton>
+        <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
             {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}

package/src/components/Sidebar/types.ts

@@ -13,11 +13,14 @@ export interface DrilldownMenuProps {
   back: () => void;
   item: ItemState;
   prevActiveItem?: ItemState;
+  className?: string;
 }
 
 export interface MenuItemProps {
   item: ItemState;
   activeItem?: ItemState;
+  className?: string;
+  isMobile?: boolean;
 }
 
 export interface NavItem {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -25,6 +25,7 @@ interface SidebarActionsProps {
   onChangeViewClick: () => void;
   onChangeCollapseSidebarClick: () => void;
   requestAccessButton?: React.ReactElement | null;
+  className?: string;
 }
 
 export const SidebarActions = ({
@@ -39,9 +40,11 @@ export const SidebarActions = ({
   onChangeViewClick,
   onChangeCollapseSidebarClick,
   requestAccessButton,
+  className,
 }: SidebarActionsProps) => {
   return (
     <ControlsWrap
+      className={className}
       isOpenapiDocs={isOpenapiDocs}
       isCollapsed={collapsedSidebar}
       data-component-name="Sidebar/Actions"

package/src/components/SidebarLogo/SidebarLogo.tsx

@@ -7,6 +7,7 @@ export interface LogoProps {
   altText?: string;
   dataTestId?: string;
   backgroundColor?: string;
+  className?: string;
 }
 
 export function SidebarLogo({
@@ -15,6 +16,7 @@ export function SidebarLogo({
   altText,
   backgroundColor,
   dataTestId,
+  className,
 }: LogoProps = {}): JSX.Element | null {
   if (!imageUrl) {
     return null;
@@ -27,6 +29,7 @@ export function SidebarLogo({
       data-cy={dataTestId}
       style={{ backgroundColor }}
       data-component-name="SidebarLogo/SidebarLogo"
+      className={className}
     >
       {href ? <Link href={href}>{logo}</Link> : logo}
     </LogoWrap>

package/src/components/TableOfContent/TableOfContent.tsx

@@ -15,10 +15,11 @@ import {
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
   contentWrapper: HTMLDivElement | null;
+  className?: string;
 }
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, contentWrapper } = props;
+  const { headings, contentWrapper, className } = props;
 
   const sidebar = React.useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
@@ -43,7 +44,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   return (
     <>
-      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
             <TocHeader data-translation-key={translationKeys.header}>

package/src/components/Tags/Tags.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { Highlight } from '@theme/ui/Highlight';
 
-export function Tags({ tags }: { tags: string[] }) {
+export function Tags({ tags, className }: { tags: string[]; className?: string }) {
   return (
-    <TagsWrapper>
+    <TagsWrapper className={className}>
       {tags.map((tag) => (
         <Tag key={tag} className={'tag-' + slug(tag)}>
           <Highlight>{tag}</Highlight>

package/src/components/Tiles/TileHeader.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const TileHeader = styled.h3.attrs(() => ({
+export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'ui/Tiles/TileHeader',
+  className,
 }))<{ color?: string }>`
   font-weight: var(--h3-font-weight);
   line-height: var(--h3-line-height);

package/src/components/Tiles/TileText.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const TileText = styled.span.attrs(() => ({
+export const TileText = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'ui/Tiles/TileText',
+  className,
 }))<{ color?: string }>`
   display: inline-block;
   font-weight: var(--font-weight-regular);

package/src/components/Typography/Emphasis.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const Emphasis = styled.strong.attrs(() => ({
+export const Emphasis = styled.strong.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/Emphasis',
+  className,
 }))`
   font-weight: var(--font-weight-bold);
 `;

package/src/components/Typography/H1.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H1 = styled.h1.attrs(() => ({
+export const H1 = styled.h1.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H1',
+  className,
 }))`
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);

package/src/components/Typography/H2.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H2 = styled.h2.attrs(() => ({
+export const H2 = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H2',
+  className,
 }))`
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);

package/src/components/Typography/H3.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H3 = styled.h3.attrs(() => ({
+export const H3 = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H3',
+  className,
 }))`
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);

package/src/components/Typography/SectionHeader.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const SectionHeader = styled.h2.attrs(() => ({
+export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/SectionHeader',
+  className,
 }))`
   color: var(--h2-color);
   font-size: var(--h2-font-size);

package/src/components/Typography/Typography.ts

@@ -13,8 +13,9 @@ export interface TypographyProps {
   textAlign?: string;
 }
 
-export const Typography = styled.div.attrs(() => ({
+export const Typography = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/Typography',
+  className,
 }))<TypographyProps>`
   color: ${({ color }) => color || 'var(--text-color)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};

package/src/globalStyle.ts

@@ -1,5 +1,7 @@
 import { createGlobalStyle, css } from 'styled-components';
 
+import { breakpoints } from '@portal/media-css';
+
 import { darkMode } from './ui/darkColors';
 
 const baseColors = css`
@@ -1618,6 +1620,7 @@ const breadcrumbs = css`
    */
 
   --breadcrumbs-text-color: var(--text-color-secondary); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-color); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline;
   --breadcrumbs-padding-horizontal: 8px; // @presenter Spacing
@@ -1626,6 +1629,51 @@ const breadcrumbs = css`
   // @tokens End
 `
 
+const mobileMenu = css`
+    /**
+  * @tokens Mobile Menu icons
+  */
+    --mobile-menu-icons-size: 20px; // @presenter Spacing
+    --mobile-menu-search-icon-size: 18px; // @presenter Spacing
+
+    /**
+      * @tokens Mobile Menu
+      * */
+    --mobile-menu-padding-top: 13px; // @presenter Spacing
+    --mobile-menu-items-margin-top: 5px; // @presenter Spacing
+    --mobile-menu-burger-button-margin: 8px; // @presenter Spacing
+    --mobile-menu-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-border-color: #e3e3e3; // @presenter Color
+    --mobile-menu-group-padding-right: 16px; // @presenter Spacing
+    --mobile-menu-horizontal-margin: 8px; // @presenter Spacing
+    --mobile-menu-item-nested-offset: 8px; // @presenter Spacing
+    --mobile-menu-item-radius: 6px; // @presenter Spacing
+    --mobile-menu-item-text-color: #525252;// @presenter Color
+    --mobile-menu-item-active-color: #FAFAFA; // @presenter Color
+    --mobile-menu-item-active-text-color: #161616; // @presenter Color
+    
+    /**
+      * @tokens Mobile Menu control button
+      * */
+    --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-padding-horizontal: 4px; // @presenter Spacing
+    --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-margin-horizontal: 8px; // @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-color); // @presenter Color
+
+    /**
+      * @tokens Mobile Menu Login button
+      * */
+    --mobile-menu-login-button-background: #1c1c1c; // @presenter Color
+    --mobile-menu-login-button-color: #ffffff; // @presenter Color
+
+    // @tokens End
+`;
+
 const toc = css`
   /**
     * @tokens TOC
@@ -1689,7 +1737,7 @@ const loadProgressBar = css`
     background: var(--load-progress-bar-color);
 
     position: fixed;
-    z-index: 1031;
+    z-index: var(--z-index-popover);
     top: 0;
     left: 0;
 
@@ -2025,7 +2073,7 @@ const userProfile = css`
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
    --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
-   --profile-avatar-font-size: var(--navbar-item-font-size) // @presenter FontSize
+   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
    --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
 
@@ -2073,7 +2121,14 @@ const modal = css`
   --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);
-`
+`;
+
+const zIndexDepth = css`
+  --z-index-surface: 10;
+  --z-index-raised: 100;
+  --z-index-popover: 200;
+  --z-index-overlay: 1000;
+`;
 
 export const styles = css`
   :root {
@@ -2087,6 +2142,7 @@ export const styles = css`
     ${buttons}
     ${sidebar}
     ${navbar}
+    ${mobileMenu}
     ${footer}
     ${logo}
     ${badges}
@@ -2107,6 +2163,7 @@ export const styles = css`
     ${pages}
     ${modal}
     ${userProfile}
+    ${zIndexDepth}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
@@ -2125,6 +2182,12 @@ export const styles = css`
   :root.notransition * {
     transition: none !important;
   }
+  
+  @media screen and (max-width: ${breakpoints.medium}) {
+    body.overflow-hidden {
+      overflow: hidden;
+    }
+  }
 `;
 
 export const GlobalStyle = createGlobalStyle`

package/src/hooks/useMobileMenu.ts

@@ -7,7 +7,11 @@ export function useMobileMenu(initialState = false): [boolean, Dispatch<SetState
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
-  useEffect(() => setIsOpen(false), [location.pathname]);
+  useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
+  useEffect(() => {
+    if (isOpen) document.body.classList.add('overflow-hidden');
+    else document.body.classList.remove('overflow-hidden');
+  }, [isOpen]);
 
   return [isOpen, setIsOpen];
 }

package/src/icons/BurgerIcon/BurgerIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.1875 3.75H2.8125C2.70937 3.75 2.625 3.83437 2.625 3.9375V5.4375C2.625 5.54062 2.70937 5.625 2.8125 5.625H21.1875C21.2906 5.625 21.375 5.54062 21.375 5.4375V3.9375C21.375 3.83437 21.2906 3.75 21.1875 3.75ZM21.1875 18.375H2.8125C2.70937 18.375 2.625 18.4594 2.625 18.5625V20.0625C2.625 20.1656 2.70937 20.25 2.8125 20.25H21.1875C21.2906 20.25 21.375 20.1656 21.375 20.0625V18.5625C21.375 18.4594 21.2906 18.375 21.1875 18.375ZM21.1875 11.0625H2.8125C2.70937 11.0625 2.625 11.1469 2.625 11.25V12.75C2.625 12.8531 2.70937 12.9375 2.8125 12.9375H21.1875C21.2906 12.9375 21.375 12.8531 21.375 12.75V11.25C21.375 11.1469 21.2906 11.0625 21.1875 11.0625Z" />
+  </svg>
+);
+
+export const BurgerIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/BurgerIcon/BurgerIcon',
+}))``;

package/src/icons/BurgerIcon/index.ts

@@ -0,0 +1 @@
+export { BurgerIcon } from '@theme/icons/BurgerIcon/BurgerIcon';

package/src/icons/CloseIcon/CloseIcon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export const Icon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" fill="none" />
+    <path d="M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" />
+  </svg>
+);
+
+export const CloseIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloseIcon/CloseIcon',
+}))``;