@redocly/theme 0.15.0 → 0.16.0

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

package/src/components/Navbar/Navbar.tsx

@@ -4,17 +4,19 @@ import styled, { createGlobalStyle } from 'styled-components';
 import { NavbarMenu } from '@theme/components/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { isEmptyArray, isPrimitive } from '@theme/utils';
-import { MobileNavbarMenuButton } from '@theme/components/Navbar/MobileNavbarMenuButton';
 import type { NavbarLogoProps } from '@theme/components/NavbarLogo';
 import { NavbarLogo } from '@theme/components/NavbarLogo';
-import { MobileNavbarMenu } from '@theme/components/Navbar/MobileNavbarMenu';
+import { MobileMenu } from '@theme/components/Menu/MobileMenu';
 import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
-import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
-import { useI18n } from '@portal/hooks';
-import { LanguagePicker } from '@theme/I18n/LanguagePicker';
+import type { LogoConfig, ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+import { useI18n, usePageVersions } from '@portal/hooks';
+import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
+import { useSidebarItems } from '@portal/Sidebar/useSidebarItems';
+
+import { LanguagePicker } from '../../I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   :root {
@@ -74,9 +76,14 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
   menu: ResolvedConfigLinks;
   hideUserProfile: boolean | string | undefined;
   changeLanguage: (value: string) => void;
+  className?: string;
 }
 
 export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
+  const { versions = [] } = usePageVersions() || {};
+  const activeVersion = versions.find((version) => version?.active);
+  const sidebarItems = useSidebarItems(activeVersion);
+
   const {
     menuItemsExist,
     closeMobileMenu,
@@ -87,26 +94,48 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
     menu,
     hideUserProfile,
     changeLanguage,
+    className,
   } = props;
   return (
-    <NavbarContainer data-component-name="Navbar/Navbar">
-      {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
-
-      {isOpen && (
-        <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu as ResolvedConfigLinks} />
-      )}
+    <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
+      {isOpen && <MobileMenu navItems={menu as ResolvedNavItem[]} sidebarItems={sidebarItems} />}
       <NavbarRow>
+        {menuItemsExist && (
+          <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
+        )}
         <NavbarLogo logo={logo} />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
         <LanguagePicker onChangeLanguage={changeLanguage} />
-        {hideUserProfile ? null : <AuthUserProfile />}
-        <ColorModeSwitcher />
+        {hideUserProfile ? null : (
+          <AuthUserProfileWrapper>
+            <AuthUserProfile />
+          </AuthUserProfileWrapper>
+        )}
+        <ColorModeSwitcherWrapper isVisible={isOpen}>
+          <ColorModeSwitcher />
+        </ColorModeSwitcherWrapper>
       </NavbarRow>
     </NavbarContainer>
   );
 }
 
+const ColorModeSwitcherWrapper = styled.div<{ isVisible: boolean }>`
+  display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
+const AuthUserProfileWrapper = styled.div`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
 export const NavbarContainer = styled.nav`
   --text-color: var(--navbar-text-color);
 
@@ -119,7 +148,7 @@ export const NavbarContainer = styled.nav`
   font-size: 0.875rem;
   position: sticky;
   top: 0;
-  z-index: 200;
+  z-index: var(--z-index-raised);
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
   font-family: var(--navbar-item-font-family);

package/src/components/Navbar/NavbarDropdown.tsx

@@ -7,12 +7,13 @@ import { useTranslate } from '@portal/hooks';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];
+  className?: string;
 }
 
-export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+export function NavbarDropdown({ items, className }: NavbarDropdownProps): JSX.Element {
   const { translate } = useTranslate();
   return (
-    <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
+    <DropdownWrapper data-component-name="Navbar/NavbarDropdown" className={className}>
       {items.map((item, index) => (
         <div key={`${item.label}_${index}`}>
           <Link to={item.link}>{translate(item.labelTranslationKey, item.label)}</Link>

package/src/components/Navbar/NavbarMenu.tsx

@@ -5,13 +5,19 @@ import { NavbarItem } from '@theme/components/Navbar/NavbarItem';
 import { isPrimitive } from '@theme/utils';
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
-export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
+export function NavbarMenu({
+  menuItems,
+  className,
+}: {
+  menuItems: ResolvedConfigLinks;
+  className?: string;
+}): JSX.Element | null {
   if (isPrimitive(menuItems)) {
     return null;
   }
 
   return (
-    <NavItemsContainer data-component-name="Navbar/NavbarMenu">
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu" className={className}>
       {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
         return (
           <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -4,14 +4,22 @@ import styled from 'styled-components';
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
 
-export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
+export type NavbarLogoProps = {
+  logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+  className?: string;
+};
 
-export function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null {
+export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
   if (!logo.image) {
     return null;
   }
   const img = (
-    <NavLogo src={logo.image} alt={logo.altText} data-component-name="NavbarLogo/NavbarLogo" />
+    <NavLogo
+      className={className}
+      src={logo.image}
+      alt={logo.altText}
+      data-component-name="NavbarLogo/NavbarLogo"
+    />
   );
   return logo.link ? <Link to={logo.link}>{img}</Link> : img;
 }

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { TryItSecurityAppsProps } from './TryItSecurityApps';
-
+import type { TryItSecurityAppsProps } from '@theme/components/OpenApiDocs/TryItSecurityApps';
 import { Button } from '@theme/components/Button/Button';
 import { usePreloadHistory } from '@portal/usePreloadHistory';
 import { usePageData } from '@portal/hooks/usePageData';
-
-import { Dropdown } from './Dropdown';
+import { Dropdown } from '@theme/components/OpenApiDocs/Dropdown';
 
 export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
   const apiId = (props as any).apiId;

package/src/components/PageNavigation/NextButton.tsx

@@ -8,9 +8,10 @@ import { useTranslate } from '@portal/hooks';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function NextButton({ nextPage }: NextPageType): JSX.Element {
+export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
   const { navigation } = useThemeConfig();
   const { translate } = useTranslate();
 
@@ -33,6 +34,7 @@ export function NextButton({ nextPage }: NextPageType): JSX.Element {
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
       data-translation-key={translationKey}
+      extraClass={className}
     >
       {text}
     </StyledButton>

package/src/components/PageNavigation/PageNavigation.tsx

@@ -9,9 +9,14 @@ import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 interface PageNavigationType {
   nextPage?: ResolvedNavItemWithLink | null;
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.Element | null {
+export function PageNavigation({
+  nextPage,
+  prevPage,
+  className,
+}: PageNavigationType): JSX.Element | null {
   const { navigation } = useThemeConfig();
 
   if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
@@ -19,7 +24,10 @@ export function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.
   }
 
   return (
-    <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
+    <PageNavigationWrapper
+      data-component-name="PageNavigation/PageNavigation"
+      className={className}
+    >
       <PreviousButton prevPage={prevPage} />
       <NextButton nextPage={nextPage} />
     </PageNavigationWrapper>

package/src/components/PageNavigation/PreviousButton.tsx

@@ -8,9 +8,10 @@ import { useTranslate } from '@portal/hooks';
 
 interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
+export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element {
   const { navigation } = useThemeConfig();
   const { translate } = useTranslate();
 
@@ -36,6 +37,7 @@ export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
       data-translation-key={translationKey}
+      extraClass={className}
     >
       {text}
     </StyledButton>

package/src/components/Panel/PanelBody.ts

@@ -18,8 +18,9 @@ interface PanelBodyProps {
   hidden?: boolean;
 }
 
-export const PanelBody = styled.div.attrs(() => ({
+export const PanelBody = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelBody',
+  className,
 }))<PanelBodyProps>`
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};

package/src/components/Panel/PanelHeader.ts

@@ -8,8 +8,9 @@ export interface PanelHeaderProps {
   toggle?: (e: BaseSyntheticEvent) => void;
 }
 
-export const PanelHeader = styled.div.attrs(() => ({
+export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelHeader',
+  className,
 }))<PanelHeaderProps>`
   position: relative;
   z-index: 1;

package/src/components/Panel/PanelHeaderTitle.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const PanelHeaderTitle = styled.span.attrs(() => ({
+export const PanelHeaderTitle = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelHeaderTitle',
+  className,
 }))`
   margin-right: 5px;
   font-weight: var(--panel-heading-font-weight-local);

package/src/components/Profile/Profile.tsx

@@ -44,7 +44,7 @@ function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfilePr
 
 export const Profile = memo<ProfileProps>(ProfileComponent);
 
-const ProfileWrapper = styled.div.attrs(() => ({
+export const ProfileWrapper = styled.div.attrs(() => ({
   'data-component-name': 'Profile/Profile',
 }))`
   display: flex;
@@ -69,7 +69,7 @@ const StyledUserName = styled.span`
   }
 `;
 
-const AvatarWrapper = styled.div<{ background?: string }>`
+export const AvatarWrapper = styled.div<{ background?: string }>`
   width: var(--profile-avatar-width);
   height: var(--profile-avatar-height);
   display: flex;

package/src/components/Profile/types.ts

@@ -8,4 +8,5 @@ export interface UserProfileProps {
   handleLogout: (logoutRedirect?: string) => void;
   hasDeveloperOnboarding?: boolean;
   loginUrl?: string;
+  className?: string;
 }

package/src/components/SamplesPanelControls/SamplesPanelControls.ts

@@ -2,9 +2,12 @@ import styled from 'styled-components';
 
 import { CodeBlock } from '@theme/components/CodeBlock';
 
-export const SamplesControlButton = styled.button.attrs(() => ({
-  'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
-}))`
+export const SamplesControlButton = styled.button.attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+    className: className,
+  }),
+)`
   background-color: var(--panel-samples-controls-background-color);
   border: 0;
   outline: 0;

package/src/components/Search/CancelSearch.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { useTranslate } from '@theme/mocks/hooks';
 
-export function CancelSearch({ onClick }: { onClick: () => void }): JSX.Element {
+export function CancelSearch({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   const { translate } = useTranslate();
   const translationKeys = {
     cancel: 'theme.search.cancel',
   };
 
   return (
-    <Wrapper data-component-name="Search/CancelSearch" onClick={onClick}>
+    <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
       <Button data-translation-keys={translationKeys.cancel}>
         {translate(translationKeys.cancel, 'Cancel')}
       </Button>

package/src/components/Search/ClearIcon.tsx

@@ -17,8 +17,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClearIcon = styled(Icon).attrs(() => ({
+export const ClearIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/ClearIcon',
+  className,
 }))`
   cursor: pointer;
   width: 0.5em;

package/src/components/Search/ClockBackwardsIcon.tsx

@@ -10,7 +10,7 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClockBackwardsIcon = styled(Icon).attrs(({ className }: { className?: string }) => ({
+export const ClockBackwardsIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/RecentlyViewedIcon',
   className,
 }))`

package/src/components/Search/Input.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const FormInput = styled.input.attrs(() => ({
+export const FormInput = styled.input.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/Input',
+  className,
 }))`
   padding: 1em 2.5em 1em 2.5em;
   background-color: var(--search-input-background-color);

package/src/components/Search/InputWrapper.tsx

@@ -14,6 +14,7 @@ interface InputWrapperProps {
   change(value: string): void;
   inputRef?: React.RefObject<HTMLInputElement>;
   isLoading: boolean;
+  className?: string;
 }
 
 export function InputWrapper({
@@ -21,6 +22,7 @@ export function InputWrapper({
   value,
   change,
   isLoading,
+  className,
 }: InputWrapperProps): JSX.Element {
   const [isFocused, setIsFocused] = useState(false);
 
@@ -45,7 +47,7 @@ export function InputWrapper({
   };
 
   return (
-    <Wrapper data-component-name="Search/InputContainer">
+    <Wrapper data-component-name="Search/InputContainer" className={className}>
       {isFocused && isLoading ? <SpinnerIcon /> : <SearchIcon />}
       <FormInput
         value={value}

package/src/components/Search/MobileSearchTrigger.tsx

@@ -3,23 +3,34 @@ import styled from 'styled-components';
 
 import { SearchIcon as ThemeSearchIcon } from '@theme/components/Search/SearchIcon';
 
-export function MobileSearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+export function MobileSearchTrigger({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   return (
-    <Wrapper data-component-name="Search/MobileSearchTrigger" onClick={onClick}>
+    <Wrapper
+      data-component-name="Search/MobileSearchTrigger"
+      onClick={onClick}
+      className={className}
+    >
       <SearchIcon />
     </Wrapper>
   );
 }
 
 const SearchIcon = styled(ThemeSearchIcon)`
-  width: 20px;
-  height: 20px;
-  fill: #8d8d8d;
+  width: var(--mobile-menu-search-icon-size);
+  height: var(--mobile-menu-search-icon-size);
+  fill: var(--navbar-text-color);
 `;
 
 const Wrapper = styled.div`
   display: block;
   user-select: none;
+  height: var(--mobile-menu-search-icon-size);
 
   ${({ theme }) => theme.mediaQueries.small} {
     display: none;

package/src/components/Search/Popover.tsx

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 
-export const Popover = styled.div.attrs(() => ({
+export const Popover = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/Popover',
+  className,
 }))`
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   min-width: 100%;
   max-width: 90vw;
   max-height: 400px;

package/src/components/Search/RecentSearches.tsx

@@ -6,7 +6,13 @@ import { ClearIcon as ThemeClearIcon } from '@theme/components/Search/ClearIcon'
 import { useRecentSearches } from '@portal/search';
 import { useTranslate } from '@portal/hooks';
 
-export function RecentSearches({ onSelect }: { onSelect: (value: string) => void }) {
+export function RecentSearches({
+  onSelect,
+  className,
+}: {
+  onSelect: (value: string) => void;
+  className?: string;
+}) {
   const { items, removeSearchHistoryItem } = useRecentSearches();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -27,7 +33,7 @@ export function RecentSearches({ onSelect }: { onSelect: (value: string) => void
   };
 
   return (
-    <Wrapper data-component-name="Search/RecentSearches">
+    <Wrapper data-component-name="Search/RecentSearches" className={className}>
       <Title data-translation-key={translationKeys.title}>
         {translate(translationKeys.title, 'Recent searches')}
       </Title>
@@ -82,7 +88,7 @@ const ClearIcon = styled(ThemeClearIcon)`
   display: inline;
   width: 10px;
   height: 10px;
-  fill: var(--search-item-active-text-color))
+  fill: var(--search-item-active-text-color);
 `;
 
 const Item = styled.div`

package/src/components/Search/Search.tsx

@@ -8,7 +8,7 @@ import { MobileSearchTrigger } from '@theme/components/Search/MobileSearchTrigge
 import { SearchDialog } from '@theme/components/Search/SearchDialog';
 import { useThemeConfig } from '@theme/hooks';
 
-export function Search(): JSX.Element {
+export function Search({ className }: { className?: string }): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
   const themeSettings = useThemeConfig();
   const location = useLocation();
@@ -33,7 +33,7 @@ export function Search(): JSX.Element {
   useEffect(onClose, [location, onClose]);
 
   return (
-    <Wrapper data-component-name="Search/Search">
+    <Wrapper data-component-name="Search/Search" className={className}>
       <SearchTrigger onClick={() => setIsOpen(true)} />
       <MobileSearchTrigger onClick={() => setIsOpen(true)} />
 

package/src/components/Search/SearchDialog.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import type { MouseEvent } from 'react';
 
+import { concatClassNames } from '@theme/utils';
 import { useFuseSearch } from '@portal/search';
 import { InputWrapper } from '@theme/components/Search/InputWrapper';
 import { SearchItem } from '@theme/components/Search/SearchItem';
@@ -14,7 +15,13 @@ import { SuggestedPages } from '@theme/components/Search/SuggestedPages';
 import { CancelSearch } from '@theme/components/Search/CancelSearch';
 import { useDialogHotKeys } from '@theme/hooks/useDialogHotKeys';
 
-export const SearchDialog = ({ onClose }: { onClose: () => void }): JSX.Element => {
+export const SearchDialog = ({
+  onClose,
+  className,
+}: {
+  onClose: () => void;
+  className?: string;
+}): JSX.Element => {
   const { query, setQuery, items, isLoading } = useFuseSearch();
   const modalRef = useRef<HTMLDivElement>(null);
   const { translate } = useTranslate();
@@ -45,7 +52,7 @@ export const SearchDialog = ({ onClose }: { onClose: () => void }): JSX.Element
       data-component-name="Search/SearchDialog"
       ref={modalRef}
       onClick={handleOverlayClick}
-      className="overlay"
+      className={concatClassNames('overlay', className)}
     >
       <Container>
         <TopContainer>
@@ -105,7 +112,7 @@ const Overlay = styled.div`
   width: 100vw;
   height: 100vh;
   background: var(--modal-overlay-background-color);
-  z-index: 10000;
+  z-index: var(--z-index-overlay);
   display: flex;
   align-items: center;
   justify-content: center;