@redocly/theme 0.15.1 → 0.16.0

package/src/components/Markdown/Sup.tsx

@@ -3,8 +3,15 @@ import styled from 'styled-components';
 
 import type { PropsWithChildren } from 'react';
 
-export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {
-  return <Wrapper data-component-name="Markdown/Sup">{children}</Wrapper>;
+export function Sup({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Markdown/Sup" className={className}>
+      {children}
+    </Wrapper>
+  );
 }
 
 const Wrapper = styled.sup``;

package/src/components/Menu/Menu.tsx

@@ -8,18 +8,27 @@ import { MenuItemSwitch } from './MenuItemSwitch';
 export interface MenuListProps {
   items: ItemState[];
   depth?: number;
+  isMobile?: boolean;
+  className?: string;
 }
 
-export function Menu({ depth = 0, items }: MenuListProps) {
+export function Menu({ depth = 0, items, className, isMobile }: MenuListProps) {
   // TODO: provide active section via MenuContext
   const activeItem = items.find(({ active }) => active);
 
   return (
-    <ThemeMenu>
+    <ThemeMenu className={className}>
       {items.map((item, index) => {
         return (
-          <MenuItemSwitch item={item} key={`${item.pageId}-${index}`} activeItem={activeItem}>
-            {item.items?.length ? <Menu items={item.items} depth={depth + 1} /> : null}
+          <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>
         );
       })}
@@ -34,5 +43,7 @@ export const ThemeMenu = styled.ul.attrs(() => ({
   margin: 0;
   list-style: none;
   color: var(--sidebar-item-text-color);
-  position: relative;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: relative;
+  }
 `;

package/src/components/Menu/MenuContainer.tsx

@@ -2,11 +2,13 @@ import styled from 'styled-components';
 
 interface MenuContainerProps {
   growContent?: boolean;
+  className?: string;
 }
 
-export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
+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;

package/src/components/Menu/MenuGroup.tsx

@@ -12,6 +12,7 @@ interface MenuGroupProps {
   item: ItemState;
   isExpanded: boolean;
   toggleExpanded: () => void;
+  className?: string;
 }
 
 export function MenuGroup({
@@ -19,6 +20,7 @@ export function MenuGroup({
   isExpanded,
   toggleExpanded,
   children,
+  className,
 }: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
   const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -39,7 +41,7 @@ export function MenuGroup({
   }, [isExpanded]);
 
   return (
-    <Wrapper data-component-name="Menu/MenuGroup">
+    <Wrapper data-component-name="Menu/MenuGroup" className={className}>
       <MenuLinkItem item={item}>
         <MenuGroupLabel
           onClick={toggleExpanded}
@@ -47,10 +49,7 @@ export function MenuGroup({
           active={item.active}
           role={!item.link ? 'link' : 'none'}
         >
-          <MenuGroupArrow
-            visibility={item.items.length ? 'visible' : 'hidden'}
-            direction={isExpanded ? 'down' : 'right'}
-          />
+          {!!item.items.length && <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />}
           {translate(item.labelTranslationKey, item.label)}
         </MenuGroupLabel>
       </MenuLinkItem>

package/src/components/Menu/MenuItem.tsx

@@ -8,15 +8,15 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function MenuItem({ item }: MenuItemProps): JSX.Element {
+export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
   return (
-    <Wrapper data-component-name="Sidebar/MenuItem">
+    <Wrapper data-component-name="Sidebar/MenuItem" className={className}>
       <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
+        <Label active={item.active}>
           {translate(item.labelTranslationKey, item.label)}
           {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
-        </MenuItemLabel>
+        </Label>
       </MenuLinkItem>
 
       {item.separatorLine ? <SeparatorLine /> : null}
@@ -25,3 +25,21 @@ export function MenuItem({ item }: MenuItemProps): JSX.Element {
 }
 
 const Wrapper = styled.div``;
+
+const Label = styled(MenuItemLabel)<{ active?: boolean }>`
+  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

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const MenuItemLabel = styled.li.attrs(() => ({
+export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Menu/MenuItemLabel',
+  className,
 }))<{ active?: boolean }>`
   display: flex;
   align-items: center;
@@ -22,17 +23,25 @@ export const MenuItemLabel = styled.li.attrs(() => ({
   );
   border-radius: var(--sidebar-item-border-radius);
 
-  ${(props) =>
-    props.active
-      ? `
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
-  `
-      : null};
+  ${({ active, theme }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+      background-color: var(--sidebar-item-active-background-color);
+    }
+  `};
 
   :hover {
-    color: var(--sidebar-item-hover-color);
-    background-color: var(--sidebar-item-hover-background-color);
+    color: var(--mobile-menu-item-active-text-color);
+
+    ${({ theme }) => theme.mediaQueries.medium} {
+      color: var(--sidebar-item-hover-color);
+      background-color: var(--sidebar-item-hover-background-color);
+    }
   }
 
   :empty {

package/src/components/Menu/MenuItemSwitch.tsx

@@ -8,6 +8,7 @@ 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';
 
 export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
   const type = getMenuType(props.item);
@@ -24,26 +25,27 @@ export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
   });
 
   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 (
-          <MenuGroup item={props.item} isExpanded={false} toggleExpanded={() => {}}>
+          <Group item={props.item} isExpanded={false} toggleExpanded={() => {}}>
             {props.children}
-          </MenuGroup>
+          </Group>
         );
       }
 
       return (
-        <MenuGroup item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
+        <Group item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
           {props.children}
-        </MenuGroup>
+        </Group>
       );
     case MenuType.DrillDown:
       return (

package/src/components/Menu/MenuLink.tsx

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const MenuLink = styled(Link).attrs(() => ({
+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

@@ -7,9 +7,10 @@ import type { MenuItemProps } from '@theme/components/Sidebar/types';
 export function MenuLinkItem({
   item,
   children,
+  className,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem">
+    <Wrapper data-component-name="Sidebar/MenuLinkItem" className={className}>
       {item.link ? (
         <MenuLink to={item.link} {...item}>
           {children}

package/src/components/Menu/MobileMenu.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
+import { isPrimitive, isEmptyArray, withPathPrefix } from '@theme/utils';
+import type { ResolvedNavItem } from '@theme/types/portal';
+import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
+import type { ItemState } from '@portal/Sidebar/types';
+import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
+import { getPathnameForLocale } from '@portal/utils';
+import { useI18nConfig, useTranslate } from '@portal/hooks';
+import { ExpandIcon } from '@theme/icons';
+
+interface MobileMenuProps {
+  navItems: ResolvedNavItem[];
+  sidebarItems: ItemState[];
+  className?: string;
+}
+
+enum MenuLevel {
+  NAVBAR = 'NAVBAR',
+  SIDEBAR = 'SIDEBAR',
+}
+
+export function MobileMenu({
+  navItems,
+  sidebarItems,
+  className,
+}: MobileMenuProps): JSX.Element | null {
+  const [menuLevel, setMenuLevel] = useState(
+    sidebarItems.length ? MenuLevel.SIDEBAR : MenuLevel.NAVBAR,
+  );
+  const { pathname, hash } = useLocation();
+  const pathHash = pathname + hash;
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { translate } = useTranslate();
+
+  if (isPrimitive(navItems) || isEmptyArray(navItems)) {
+    return null;
+  }
+
+  const isItemActive = (item: ResolvedNavItem): boolean => {
+    return (
+      pathHash ===
+      withPathPrefix(getPathnameForLocale(item.link || '/', defaultLocale, currentLocale, locales))
+    );
+  };
+
+  const mapNavbarItems = (items: ResolvedNavItem[]): ItemState[] => {
+    return items.map(
+      (navItem) =>
+        ({
+          ...navItem,
+          ...(navItem.items && { items: mapNavbarItems(navItem.items) }),
+          ...('link' in navItem && { link: navItem.link || '/' }),
+          active: 'link' in navItem && isItemActive(navItem),
+          hasActiveSubItem: !!navItem.items?.find(isItemActive),
+        } as ItemState),
+    );
+  };
+
+  let menuItems: ItemState[];
+  switch (menuLevel) {
+    case MenuLevel.SIDEBAR:
+      menuItems = sidebarItems;
+      break;
+    default:
+      menuItems = mapNavbarItems(navItems);
+  }
+
+  const isMenuButtonVisible = menuLevel === MenuLevel.SIDEBAR;
+  const isPreviousButtonVisible = menuLevel === MenuLevel.NAVBAR && !!sidebarItems.length;
+  const isButtonsSectionVisible = isMenuButtonVisible || isPreviousButtonVisible;
+
+  const translationKeys = {
+    mainMenu: 'theme.mobileMenu.mainMenu',
+    previous: 'theme.mobileMenu.previous',
+  };
+
+  return (
+    <MobileMenuWrapper data-component-name="Menu/MobileMenu" className={className}>
+      <ScrollableArea>
+        {isButtonsSectionVisible && (
+          <ButtonsSection alignRight={isPreviousButtonVisible}>
+            {isMenuButtonVisible && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(MenuLevel.NAVBAR)}
+              >
+                <ExpandIcon direction="left" />
+                <ControlButtonLabel paddingDirection="left">
+                  {translate(translationKeys.mainMenu, 'Main Menu')}
+                </ControlButtonLabel>
+              </ControlButton>
+            )}
+            {isPreviousButtonVisible && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(MenuLevel.SIDEBAR)}
+              >
+                <ControlButtonLabel paddingDirection="right">
+                  {translate(translationKeys.previous, 'Previous')}
+                </ControlButtonLabel>
+                <ExpandIcon direction="right" />
+              </ControlButton>
+            )}
+          </ButtonsSection>
+        )}
+        <MenuWrapper>
+          <Menu items={menuItems} isMobile />
+        </MenuWrapper>
+      </ScrollableArea>
+      <MobileUserProfile />
+    </MobileMenuWrapper>
+  );
+}
+
+const MobileMenuWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: var(--z-index-raised);
+  left: 0;
+  top: var(--navbar-height);
+  overflow-x: hidden;
+  transition: 0.5s;
+  display: flex;
+  flex-direction: column;
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+
+  ${DropdownWrapper} {
+    & > div {
+      text-align: center;
+      padding: 10px 0;
+      cursor: pointer;
+      a {
+        color: var(--navbar-text-color);
+        text-decoration: none;
+      }
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+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);
+  flex: 1;
+  overflow-y: scroll;
+  margin-bottom: 140px;
+`;
+
+const MenuWrapper = styled.div`
+  margin: 0 var(--mobile-menu-horizontal-margin);
+  margin-top: var(--mobile-menu-items-margin-top);
+  line-height: 22px;
+  background: var(--mobile-menu-background);
+
+  ${MenuItemLabel} {
+    margin: 0;
+    border-radius: var(--mobile-menu-item-radius);
+    padding-left: var(--sidebar-item-padding-horizontal);
+  }
+`;
+
+export const ControlButton = styled.li`
+  display: inline-block;
+  padding: var(--mobile-menu-control-button-padding-vertical)
+    var(--mobile-menu-control-button-padding-horizontal);
+  margin: var(--mobile-menu-control-button-margin-vertical)
+    var(--mobile-menu-control-button-margin-horizontal);
+  text-align: center;
+  font-size: var(--mobile-menu-control-button-font-size);
+  line-height: 22px;
+  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'};
+`;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -0,0 +1,73 @@
+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 { ExpandIcon } from '@theme/icons';
+
+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}>
+          <LabelContainer>
+            <Label>{translate(item.labelTranslationKey, item.label)}</Label>
+          </LabelContainer>
+          {!!item.items.length && <ExpandIcon direction={isExpanded ? 'down' : 'right'} />}
+        </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 }>`
+  color: var(--mobile-menu-item-text-color);
+  background: var(--mobile-menu-background);
+  display: flex;
+  justify-content: space-between;
+
+  ${({ active }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+  `}
+
+  ${({ expanded }) =>
+    expanded &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+  `}
+`;

package/src/components/Menu/index.ts

@@ -5,3 +5,4 @@ export * from '@theme/components/Menu/MenuContainer';
 export * from '@theme/components/Menu/MenuItemLabel';
 export * from '@theme/components/Menu/MenuLink';
 export * from '@theme/components/Menu/MenuLinkItem';
+export * from '@theme/components/Menu/MobileMenuGroup';

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;
+  }
+`;

package/src/components/Navbar/MobileUserProfile.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useProfileProps } from '@portal/Profile/useProfileProps';
+import { LogoutIcon } from '@theme/icons/LogoutIcon';
+import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profile/Profile';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+
+export function MobileUserProfile(): JSX.Element {
+  const { userProfile } = useThemeConfig();
+  const { userData, handleLogout, loginUrl } = useProfileProps();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    login: 'theme.profile.login',
+  };
+
+  if (!userData?.isAuthenticated) {
+    return (
+      <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
+        <LoginButton href={loginUrl} data-cy="login-btn">
+          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+        </LoginButton>
+      </MobileProfileWrapper>
+    );
+  }
+
+  return (
+    <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
+      <UserDataWrapper>
+        <ProfilePicture>
+          <Profile name={userData.name} imageUrl={userData.picture} />
+        </ProfilePicture>
+        <UserName>{userData.name}</UserName>
+      </UserDataWrapper>
+      <LogoutButton onClick={() => handleLogout()}>
+        <LogoutIcon />
+      </LogoutButton>
+    </MobileProfileWrapper>
+  );
+}
+const LoginButton = styled.a`
+  background: var(--mobile-menu-login-button-background);
+  border-radius: 6px;
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  color: var(--mobile-menu-login-button-color);
+  font-size: 14px;
+  text-align: center;
+  line-height: 22px;
+  cursor: pointer;
+  text-decoration: none;
+`;
+
+const MobileProfileWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  padding: 18px 16px;
+  border-top: 1px solid var(--mobile-menu-profile-border-color);
+  background: var(--mobile-menu-profile-background);
+`;
+
+const UserDataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProfilePicture = styled.div`
+  margin-right: 16px;
+
+  ${AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${ProfileWrapper} {
+    padding: 0;
+  }
+`;
+
+const UserName = styled.div``;
+
+const LogoutButton = styled.div`
+  cursor: pointer;
+  user-select: none;
+`;