From 85f13f440651396bd14cc69502e319be2a367dc1 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Tue, 1 Jul 2025 14:36:57 +0200
Subject: [PATCH 1/9] feat: header facelift

---
 apify-docs-theme/src/config.js                |  24 +-
 apify-docs-theme/src/theme/Footer/index.jsx   |  16 +-
 .../src/theme/Footer/index.module.css         |  83 +++++-
 apify-docs-theme/src/theme/Layout/index.jsx   |   3 -
 .../src/theme/Navbar/CTA/index.jsx            |   7 +
 .../src/theme/Navbar/CTA/styles.module.css    |  57 ++++
 .../src/theme/Navbar/Content/index.jsx        |   8 +-
 .../theme/Navbar/Content/styles.module.css    |   8 -
 .../Navbar/MobileSidebar/Header/index.jsx     |  42 +++
 apify-docs-theme/src/theme/SearchBar/index.js |   1 +
 .../src/theme/SearchBar/styles.css            |  92 +++++-
 apify-docs-theme/src/theme/custom.css         | 279 ++++++++++++------
 12 files changed, 480 insertions(+), 140 deletions(-)
 create mode 100644 apify-docs-theme/src/theme/Navbar/CTA/index.jsx
 create mode 100644 apify-docs-theme/src/theme/Navbar/CTA/styles.module.css
 delete mode 100644 apify-docs-theme/src/theme/Navbar/Content/styles.module.css
 create mode 100644 apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx

diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js
index f0a098a0a..2a9e06553 100644
--- a/apify-docs-theme/src/config.js
+++ b/apify-docs-theme/src/config.js
@@ -137,20 +137,6 @@ const themeConfig = {
                     },
                 ],
             },
-            {
-                href: 'https://github.com/apify',
-                label: 'GitHub',
-                title: 'Apify on GitHub',
-                position: 'right',
-                className: 'icon',
-            },
-            {
-                href: 'https://discord.com/invite/jyEM2PRvMU',
-                label: 'Discord',
-                title: 'Chat on Discord',
-                position: 'right',
-                className: 'icon',
-            },
         ],
     },
     colorMode: {
@@ -256,6 +242,10 @@ const themeConfig = {
                         label: 'GitHub',
                         href: 'https://github.com/apify',
                     },
+                    {
+                        href: 'https://discord.com/invite/jyEM2PRvMU',
+                        label: 'Discord',
+                    },
                     {
                         label: 'Trust Center',
                         href: 'https://trust.apify.com',
@@ -274,9 +264,15 @@ const themeConfig = {
         appId: 'N8EOCSBQGH',
         apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
         indexName: 'test_test_apify_sdk',
+        placeholder: 'Search documentation',
         algoliaOptions: {
             facetFilters: ['version:VERSION'],
         },
+        translations: {
+            button: {
+                buttonText: 'Search documentation...',
+            },
+        },
     },
     hubspot: {
         accountId: '19497222',
diff --git a/apify-docs-theme/src/theme/Footer/index.jsx b/apify-docs-theme/src/theme/Footer/index.jsx
index fb5b24ee1..3d2dbb939 100644
--- a/apify-docs-theme/src/theme/Footer/index.jsx
+++ b/apify-docs-theme/src/theme/Footer/index.jsx
@@ -1,5 +1,6 @@
 import { useThemeConfig } from '@docusaurus/theme-common';
 import LinkItem from '@theme/Footer/LinkItem';
+import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -8,7 +9,7 @@ import styles from './index.module.css';
 function FooterLinksColumn({ column }) {
     return (
         <>
-            <div className={styles.footerTitle}>{column.title}</div>
+            <div className={styles.title}>{column.title}</div>
             <ul className={clsx(styles.footerItem, 'clean-list')}>
                 {column.items.map((item, i) => (
                     <li key={i} className="footer__item">
@@ -28,8 +29,8 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className="container padding-horiz--lg">
-                <div className="row" style={{ justifyContent: 'space-between' }}>
+            <div className={styles.container}>
+                <div className={clsx("row", styles.top)}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
                             <FooterLinksColumn {...{ column }} />
@@ -37,12 +38,15 @@ function Footer() {
                     ))
                     }
                 </div>
-                <div className="row padding-vert--md padding-top--lg">
-                    <div className="col padding-vert--md col--6">
+                <div className={clsx("row", styles.bottom)}>
+                    <div className="col col--6">
                         <a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
-                            <span className={styles.footerLogo}></span>
+                            <span className={styles.logo}></span>
                         </a>
                     </div>
+                    <div className="col col--6">
+                        <ColorModeToggle className={styles.toggle} />
+                    </div>
                 </div>
             </div>
         </footer>
diff --git a/apify-docs-theme/src/theme/Footer/index.module.css b/apify-docs-theme/src/theme/Footer/index.module.css
index 108e2774d..7e60bc76e 100644
--- a/apify-docs-theme/src/theme/Footer/index.module.css
+++ b/apify-docs-theme/src/theme/Footer/index.module.css
@@ -1,5 +1,14 @@
 .footer {
-    padding-top: 64px;
+    padding: 4rem 1.6rem 8rem;
+    border-top: 1px solid var(--color-neutral-separator-subtle);
+}
+
+.container {
+    max-width: var(--max-layout-width);
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
 }
 
 .builtBy {
@@ -33,20 +42,31 @@
     fill: #6f7490;
 }
 
-.footerTitle {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #8d92af;
-    margin-bottom: 20px;
+.title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.4rem;
+    margin-bottom: 1.6rem;
+}
+
+.top {
+    justify-content: space-between;
+}
+
+.bottom {
+    padding-top: 8rem;
+
+    :global(.col) {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.toggle {
+    margin-left: auto;
 }
 
-.footerLogo {
+.logo {
     display: inline-block;
     width: 90px;
     height: 24px;
@@ -54,8 +74,43 @@
     background-repeat: no-repeat;
 }
 
-html[data-theme='dark'] .footerLogo {
+html[data-theme='dark'] .logo {
     background-image: url('/img/footer-apify-logo-white.svg');
 }
 
+@media (max-width: 996px) {
+    .footer {
+        padding: 3.2rem 1.6rem;
+    }
+
+    .container {
+        flex-direction: column-reverse;
+    }
+
+    .bottom {
+        padding-top: 0;
+        gap: 1.6rem;
+    }
+
+    .toggle {
+        margin-left: unset;
+    }
+
+    .top {
+        padding: 3.2rem 0;
+        gap: 3.2rem;
+        text-align: center;
+    }
+
+    .top::before {
+        width: 100%;
+        height: 1px;
+        margin: 0 -1.6rem;
+        padding: 0 1.6rem;
+        content: '';
+        display: block;
+        background-color: var(--color-neutral-separator-subtle);
+    }
+}
+
 /** dummy comment just to trigger theme publishing 3 */
diff --git a/apify-docs-theme/src/theme/Layout/index.jsx b/apify-docs-theme/src/theme/Layout/index.jsx
index b9dd7d750..cb6f104b0 100644
--- a/apify-docs-theme/src/theme/Layout/index.jsx
+++ b/apify-docs-theme/src/theme/Layout/index.jsx
@@ -2,17 +2,14 @@ import { useLocation } from '@docusaurus/router';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { usePluginData } from '@docusaurus/useGlobalData';
 import React from 'react';
 
 export default function LayoutWrapper(props) {
-    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
     const baseUrl = useBaseUrl('/');
     const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
 
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',
diff --git a/apify-docs-theme/src/theme/Navbar/CTA/index.jsx b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx
new file mode 100644
index 000000000..6b3195ee0
--- /dev/null
+++ b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx
@@ -0,0 +1,7 @@
+import styles from '../CTA/styles.module.css';
+
+export default function NavbarCTA() {
+    return (
+      <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
+    );
+}
diff --git a/apify-docs-theme/src/theme/Navbar/CTA/styles.module.css b/apify-docs-theme/src/theme/Navbar/CTA/styles.module.css
new file mode 100644
index 000000000..ddec458e5
--- /dev/null
+++ b/apify-docs-theme/src/theme/Navbar/CTA/styles.module.css
@@ -0,0 +1,57 @@
+.getStarted {
+  all: unset;
+  height: 4rem;
+  padding: 0.8rem 1.6rem !important;
+  background-color: var(--color-primary-black-action);
+  border-radius: 2rem;
+  color: var(--color-neutral-text-on-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 2.4rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  position: relative;
+  text-align: center;
+  transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--button-gradient);
+    opacity: 0.4;
+    border-radius: inherit;
+    transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  }
+
+  &:hover {
+    background-color: var(--color-primary-black-action-hover);
+    color: var(--color-neutral-text-on-primary);
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+:global(.navbar-sidebar) .getStarted {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .getStarted {
+    width: 100%;
+  }
+
+  :global(.navbar__inner) .getStarted {
+    display: none;
+  }
+
+  :global(.navbar-sidebar) .getStarted {
+    display: block;
+  }
+}
diff --git a/apify-docs-theme/src/theme/Navbar/Content/index.jsx b/apify-docs-theme/src/theme/Navbar/Content/index.jsx
index 60d3e8a50..25d297b4d 100644
--- a/apify-docs-theme/src/theme/Navbar/Content/index.jsx
+++ b/apify-docs-theme/src/theme/Navbar/Content/index.jsx
@@ -4,7 +4,6 @@ import {
     splitNavbarItems,
 } from '@docusaurus/theme-common/internal';
 import { usePluginData } from '@docusaurus/useGlobalData';
-import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarSearch from '@theme/Navbar/Search';
@@ -12,7 +11,7 @@ import NavbarItem from '@theme/NavbarItem';
 import React from 'react';
 
 import SearchBar from '../../SearchBar';
-import styles from './styles.module.css';
+import NavbarCTA from '../CTA';
 
 function NavbarItems({ items }) {
     return (
@@ -72,6 +71,7 @@ export default function NavbarContent() {
     const { navbar: { items } } = useThemeConfig();
     const [leftItems, rightItems] = splitNavbarItems(items);
     const searchBarItem = items.find((item) => item.type === 'search');
+
     return (
         <div
             style={{
@@ -85,20 +85,20 @@ export default function NavbarContent() {
             <NavbarContentLayout
                 left={
                     <>
-                        <NavbarMobileSidebarToggle />
                         <NavbarLogo />
                         <NavbarItems items={leftItems} />
                     </>
                 }
                 right={
                     <>
-                        <NavbarColorModeToggle className={styles.colorModeToggle} />
                         <NavbarItems items={rightItems} />
                         {!searchBarItem && (
                             <NavbarSearch>
                                 <SearchBar />
                             </NavbarSearch>
                         )}
+                        <NavbarCTA />
+                        <NavbarMobileSidebarToggle />
                     </>
                 }
             />
diff --git a/apify-docs-theme/src/theme/Navbar/Content/styles.module.css b/apify-docs-theme/src/theme/Navbar/Content/styles.module.css
deleted file mode 100644
index 4c9471e10..000000000
--- a/apify-docs-theme/src/theme/Navbar/Content/styles.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-Hide color mode toggle in small viewports
- */
-@media (max-width: 996px) {
-  .colorModeToggle {
-    display: none;
-  }
-}
diff --git a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
new file mode 100644
index 000000000..a1f84ed7c
--- /dev/null
+++ b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
@@ -0,0 +1,42 @@
+import { useNavbarMobileSidebar, useThemeConfig } from '@docusaurus/theme-common/internal';
+
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import React from 'react';
+
+import SearchBar from '../../../SearchBar';
+import NavbarCTA from '../../CTA';
+
+export default function NavbarMobileSidebarHeader() {
+    const mobileSidebar = useNavbarMobileSidebar();
+
+    const { navbar: { items } } = useThemeConfig();
+    const searchBarItem = items.find((item) => item.type === 'search');
+
+    return (
+      <>
+        <div className="navbar-sidebar__brand">
+          <NavbarLogo />
+          <button
+              type="button"
+              className="clean-btn navbar-sidebar__close"
+              onClick={() => mobileSidebar.toggle()}
+              aria-label="Close navigation bar"
+          >
+              <IconClose />
+          </button>
+        </div>
+        <div className="navbar-sidebar__actions">
+          <div className="navbar-sidebar__actions__container">
+            <NavbarCTA />
+            {!searchBarItem && (
+                <NavbarSearch>
+                    <SearchBar />
+                </NavbarSearch>
+            )}
+          </div>
+        </div>
+      </>
+    );
+}
diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
index e208f776b..26d45b2af 100644
--- a/apify-docs-theme/src/theme/SearchBar/index.js
+++ b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -5,6 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, { useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
+import './styles.css';
 
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).
diff --git a/apify-docs-theme/src/theme/SearchBar/styles.css b/apify-docs-theme/src/theme/SearchBar/styles.css
index fdf8dff9a..290fc86fd 100644
--- a/apify-docs-theme/src/theme/SearchBar/styles.css
+++ b/apify-docs-theme/src/theme/SearchBar/styles.css
@@ -4,9 +4,97 @@
 }
 
 .DocSearch-Button {
+  height: 4rem;
   margin: 0;
-  transition: all var(--ifm-transition-fast)
-    var(--ifm-transition-timing-default);
+  padding: 0.8rem 1.2rem;
+  background-color: var(--color-Neutral_BackgroundMuted);
+  border: 1px solid var(--color-neutral-field-border);
+  border-radius: 6px;
+  color: var(--color-neutral-text-placeholder);
+  /* Annoying, but needed */
+  /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
+  font-family: inherit;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
+    color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.navbar-sidebar .DocSearch-Button {
+  display: none;
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Button {
+      width: 100%;
+    }
+
+    .DocSearch-Button-Placeholder {
+      display: block;
+    }
+
+    .navbar__inner .DocSearch-Button {
+      display: none;
+    }
+
+    .navbar-sidebar .DocSearch-Button {
+      display: flex;
+    }
+}
+
+.DocSearch-Button:hover {
+  box-shadow: none;
+  background-color: var(--color-Neutral_BackgroundMuted);
+  color: var(--color-neutral-icon);
+}
+
+.DocSearch-Search-Icon {
+  display: none;
+}
+
+.DocSearch-Button-Placeholder {
+  color: inherit;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  padding: 0;
+  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.DocSearch-Button-Keys {
+  width: 3rem;
+  min-width: unset;
+  height: 2rem;
+  background-color: var(--color-neutral-background-subtle);
+  border: 1px solid var(--color-neutral-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+}
+
+.DocSearch-Button-Key {
+  top: unset;
+  width: unset;
+  min-width: 0.8rem;
+  height: unset;
+  margin: unset;
+  padding: unset;
+  background: unset;
+  border-radius: unset;
+  box-shadow: unset;
+  color: var(--color-neutral-text-subtle);
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.DocSearch-Button-Key:first-child {
+  width: 1.2rem;
+  height: 1.2rem;
+  font-size: 1.6rem;
+  line-height: 1.2rem;
 }
 
 .DocSearch-Container {
diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index d40c58bcf..438c5964b 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -14,7 +14,6 @@ html[data-theme='dark'] {
     --ifm-heading-color: #f2f3fb;
     --ifm-navbar-link-color: #f2f3fb;
 
-    /* TODO set this conditionally to 123px when there is second level nav */
     --ifm-navbar-height: 68px;
     --ifm-line-height-base: 1.65;
 
@@ -80,6 +79,9 @@ html[data-theme='dark'] {
     --color-primary-action: #5990ff;
     --color-primary-action-hover: #80a9ff;
     --color-primary-action-active: #3970d7;
+    --color-primary-black-action: #ffffff;
+    --color-primary-black-action-hover: #d1d5e4;
+    --color-primary-black-action-active: #f3f4fa;
     --color-primary-field-border-active: #3970d7;
     --color-primary-chip-background: #1a3a78;
     --color-primary-chip-background-hover: #194594;
@@ -120,6 +122,7 @@ html[data-theme='dark'] {
     --color-danger-chip-background: #672523;
     --color-danger-chip-background-hover: #812420;
     --color-danger-chip-text: #fe9e8a;
+    --button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 :root {
@@ -143,6 +146,7 @@ html[data-theme='dark'] {
     --ifm-code-padding-horizontal: 6.4px;
     --ifm-code-padding-vertical: 3.2px;
 
+    --ifm-navbar-height: 68px;
     --ifm-global-spacing: 1.6rem !important;
 
     --ifm-color-primary-lightest: #5d9df1;
@@ -160,7 +164,7 @@ html[data-theme='dark'] {
     --ifm-footer-background-color: #272c3d;
     --ifm-footer-title-color: #60626e;
     --ifm-footer-link-color: #6b6e80;
-    --max-layout-width: 1440px;
+    --max-layout-width: 1200px;
 
     --ifm-code-background: var(--ifm-pre-background);
 
@@ -236,6 +240,9 @@ html[data-theme='dark'] {
     --color-primary-action: #1672eb;
     --color-primary-action-hover: #5290f9;
     --color-primary-action-active: #1a57da;
+    --color-primary-black-action: #272d3e;
+    --color-primary-black-action-hover: #2b3143;
+    --color-primary-black-action-active: #0a0b0f;
     --color-primary-field-border-active: #1672eb;
     --color-primary-chip-background: #e1eaff;
     --color-primary-chip-background-hover: #d8e2ff;
@@ -276,6 +283,7 @@ html[data-theme='dark'] {
     --color-danger-chip-background: #ffe3dc;
     --color-danger-chip-background-hover: #fedad1;
     --color-danger-chip-text: #bb0401;
+    --button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 .markdown h1,
@@ -346,19 +354,51 @@ body {
     font-weight: 600;
 }
 
-.navbar__item {
-    font-weight: 500;
-}
-
 .navbar__sub--title > a {
     font-weight: 600;
 }
 
+footer .clean-list {
+    margin-bottom: 0;
+}
+
+footer .row {
+    margin: unset;
+}
+
+footer .col {
+    padding: unset;
+}
+
 .footer__title {
     font-size: 20px;
     font-weight: 600;
 }
 
+.footer__item {
+    margin-bottom: 1.6rem;
+}
+
+.footer__item:last-child {
+    margin-bottom: 0;
+}
+
+.footer__link-item {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+@media (max-width: 996px) {
+    .footer__link-item {
+        margin: 0 auto;
+    }
+}
+
+.footer__link-item svg[class*=iconExternalLink] {
+    margin-left: unset;
+}
+
 .footer__bottom a {
     opacity: 0.75;
 }
@@ -367,24 +407,20 @@ body {
     color: var(--ifm-footer-title-color);
 }
 
-footer .col {
-    margin-bottom: 32px;
-}
-
 .navbar__title {
     /* Replaced by SVG */
     display: none;
 }
 
 .navbar__inner {
-    /* .container */
-    padding: 10px var(--ifm-spacing-horizontal);
     width: 100%;
+    height: var(--ifm-navbar-height);
+    padding: 0 var(--ifm-spacing-horizontal);
     background: var(--color-Neutral_Background);
 }
 
 .navbar__container {
-    max-width: calc(var(--max-layout-width) - 32px);
+    max-width: var(--max-layout-width);
     display: flex;
     margin: 0 auto;
     width: 100%;
@@ -395,43 +431,6 @@ footer .col {
     display: none;
 }
 
-.dropdown__link {
-    font-size: 14px;
-
-}
-
-.DocSearch-Button-Placeholder {
-    font-size: 14px !important;
-}
-
-html .DocSearch-Button {
-    border-radius: 6px !important;
-    font-weight: 400 !important;
-    background: #f9fafd;
-    border: 1px solid #c1c6dd;
-
-    /* Annoying, but needed */
-    /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
-    font-family: inherit;
-}
-
-html .DocSearch-Button .DocSearch-Search-Icon {
-    color: var(--docsearch-muted-color);
-}
-
-html[data-theme="dark"] .DocSearch-Button {
-    background: none;
-    border: 1px solid var(--docsearch-muted-color);
-}
-
-html[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
-    color: var(--docsearch-muted-color);
-}
-
-.DocSearch-Button:hover {
-    box-shadow: none !important;
-}
-
 .navbar {
     padding: 0;
     /* height: fit-content; */
@@ -520,7 +519,11 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .navbar__items {
-    gap: 6px;
+    gap: 0.4rem;
+}
+
+.navbar__items--right {
+    gap: 1.6rem;
 }
 
 .navbar__item, .menu__link, .navbar__link {
@@ -533,11 +536,12 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .menu__link:hover {
-    background: var(--color-Neutral_Hover) !important;
+    background: var(--color-Neutral_Hover);
+    color: unset;
 }
 
 .menu__link--active:hover {
-    background: var(--color-neutral-overflow) !important;
+    background: var(--color-neutral-overflow);
 }
 
 .navbar__link:hover, .navbar__link--active:hover {
@@ -560,6 +564,11 @@ aside .icon svg[class*=iconExternalLink] {
     justify-content: center;
 }
 
+.navbar-sidebar__item {
+    width: 100%;
+    padding: 1.6rem var(--ifm-spacing-horizontal);
+}
+
 header.hero div[class^=heroButtons] {
     justify-content: inherit;
 }
@@ -632,29 +641,103 @@ aside button[class*="collapseSidebarButton"] svg {
     height: 20px;
 }
 
-nav.navbar .dropdown__menu {
+.navbar .dropdown--hoverable::after {
+    top: 100%;
+    width: 100%;
+    height: 0.6rem;
+    content: '';
+    display: block;
+    position: absolute;
+}
+
+.navbar .dropdown__menu {
+    top: calc(100% + 0.6rem);
     min-width: 96px;
-    padding-top: 1rem;
+    padding: 0.8rem;
+    border: 1px solid var(--color-neutral-border);
+    border-radius: 12px;
+    box-shadow: none;
 }
 
-.navbar__logo {
-    display: none;
-    width: 176px;
-    height: 48px;
+.navbar .dropdown__link {
+    margin: unset;
+    padding: 0.8rem;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
 }
 
-.navbar-sidebar .navbar__logo {
-    display: initial;
+.navbar .dropdown__link svg[class*=iconExternalLink] {
+    margin-left: unset;
 }
 
-.navbar-sidebar .toggle_theme-src-theme-ColorModeToggle-styles-module {
-    display: none;
+.navbar__toggle,
+.navbar-sidebar__close {
+    width: 3.6rem;
+    height: 3.6rem;
+    margin: unset;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
 }
 
-.navbar-sidebar div[class*="toggle_apify-docs"] {
+@media (max-width: 996px) {
+    .navbar__toggle {
+        display: flex;
+    }
+}
+
+.navbar__toggle svg {
+    width: 2rem;
+    height: 2rem;
+}
+
+.navbar-sidebar__close svg {
+    width: 1.6rem;
+    height: 1.6rem;
+}
+
+.navbar-sidebar {
+    width: 100vw;
+}
+
+.navbar-sidebar__brand {
+    height: var(--ifm-navbar-height);
+    padding: 0 var(--ifm-spacing-horizontal);
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+.navbar-sidebar__actions {
+    width: 100%;
+    padding: 0 var(--ifm-spacing-horizontal);
     display: none;
 }
 
+@media (max-width: 768px) {
+    .navbar-sidebar__actions {
+        display: block;
+    }
+}
+
+.navbar-sidebar__actions__container {
+    width: 100%;
+    padding: 1.6rem 0;
+    border-bottom: 1px solid rgb(224, 224, 224);
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+}
+
+.navbar__logo {
+    width: 152px;
+    height: 28px;
+    margin-right: unset;
+}
+
 .navbar__link.subnav {
     font-size: 12.8px;
     padding: 5px;
@@ -819,26 +902,57 @@ div[class*="searchBox"] {
     position: unset;
 }
 
-.menu__link.navbar__item {
-    padding: 4px 8px;
+.navbar__brand {
+    margin-right: 2rem;
+}
+
+@media (max-width: 996px) {
+    .navbar__brand {
+        margin-right: auto;
+    }
 }
 
 .menu__link, .menu__list-item > .navbar__item {
     display: flex;
 }
 
+.menu__link--sublist,
+.menu__list-item > .menu__link,
+.navbar__item.navbar__link,
+.navbar__item > .navbar__link {
+    padding: 0.8rem 1.2rem;
+    border-radius: 2rem;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+    font-weight: 500;
+}
+
+.menu__list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.menu__list .menu__list {
+    padding-left: 1.6rem;
+}
+
+.menu__list .menu__list .menu__list-item {
+    margin-top: 0.4rem;
+}
+
+.menu__list-item {
+    display: flex;
+    flex-direction: column;
+}
+
 .theme-doc-sidebar-item-category .menu__list-item-collapsible,
 .theme-doc-sidebar-item-link {
     display: flex;
     align-items: center;
 }
 
-@media (min-width: 480px) {
-    .navbar__logo {
-        display: initial;
-    }
-}
-
 @media (min-width: 997px) {
     .navbar__sub {
         display: block;
@@ -849,12 +963,6 @@ div[class*="searchBox"] {
     }
 }
 
-@media (min-width: 1130px) {
-    .navbar__items {
-        gap: 20px;
-    }
-}
-
 /* @media (min-width: 997px) and (max-width: 1250px) {
     .navbar__items--right a.icon {
         display: none;
@@ -1837,19 +1945,12 @@ iframe[src*="youtube"] {
     --ifm-button-size-multiplier: 1.5;
 }
 
+div[class^="navbarSearchContainer"] {
+    padding: 0;
+}
+
 @media (max-width: 996px) {
     div[class^="navbarSearchContainer"] {
         position: static;
     }
-
-    div[class^="navbarSearchContainer"] button {
-        margin-left: 5px;
-    }
-}
-
-@media (max-width: 768px) {
-    .DocSearch-Button-Keys,
-    .DocSearch-Button-Placeholder {
-        display: none !important;
-    }
 }

From 6ad011169632e17d6849b6fda2bae1b1860c3e32 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 2 Jul 2025 11:32:05 +0200
Subject: [PATCH 2/9] fix: linter

---
 apify-docs-theme/src/theme/Footer/index.jsx   |  4 +-
 apify-docs-theme/src/theme/Layout/index.jsx   |  5 --
 .../src/theme/Navbar/CTA/index.jsx            |  4 +-
 .../Navbar/MobileSidebar/Header/index.jsx     | 47 +++++++++----------
 apify-docs-theme/src/theme/SearchBar/index.js |  3 +-
 5 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/apify-docs-theme/src/theme/Footer/index.jsx b/apify-docs-theme/src/theme/Footer/index.jsx
index 3d2dbb939..019c15474 100644
--- a/apify-docs-theme/src/theme/Footer/index.jsx
+++ b/apify-docs-theme/src/theme/Footer/index.jsx
@@ -30,7 +30,7 @@ function Footer() {
     return (
         <footer className={clsx(styles.footer, style)}>
             <div className={styles.container}>
-                <div className={clsx("row", styles.top)}>
+                <div className={clsx('row', styles.top)}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
                             <FooterLinksColumn {...{ column }} />
@@ -38,7 +38,7 @@ function Footer() {
                     ))
                     }
                 </div>
-                <div className={clsx("row", styles.bottom)}>
+                <div className={clsx('row', styles.bottom)}>
                     <div className="col col--6">
                         <a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
                             <span className={styles.logo}></span>
diff --git a/apify-docs-theme/src/theme/Layout/index.jsx b/apify-docs-theme/src/theme/Layout/index.jsx
index cb6f104b0..8c467b0e6 100644
--- a/apify-docs-theme/src/theme/Layout/index.jsx
+++ b/apify-docs-theme/src/theme/Layout/index.jsx
@@ -1,13 +1,8 @@
-import { useLocation } from '@docusaurus/router';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 
 export default function LayoutWrapper(props) {
-    const baseUrl = useBaseUrl('/');
-    const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
-
     return (
         <div style={{
             margin: 0,
diff --git a/apify-docs-theme/src/theme/Navbar/CTA/index.jsx b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx
index 6b3195ee0..08e427b78 100644
--- a/apify-docs-theme/src/theme/Navbar/CTA/index.jsx
+++ b/apify-docs-theme/src/theme/Navbar/CTA/index.jsx
@@ -1,7 +1,7 @@
-import styles from '../CTA/styles.module.css';
+import styles from './styles.module.css';
 
 export default function NavbarCTA() {
     return (
-      <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
+        <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
     );
 }
diff --git a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
index a1f84ed7c..befeb058a 100644
--- a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
+++ b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
@@ -1,5 +1,4 @@
 import { useNavbarMobileSidebar, useThemeConfig } from '@docusaurus/theme-common/internal';
-
 import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
 import NavbarSearch from '@theme/Navbar/Search';
@@ -15,28 +14,28 @@ export default function NavbarMobileSidebarHeader() {
     const searchBarItem = items.find((item) => item.type === 'search');
 
     return (
-      <>
-        <div className="navbar-sidebar__brand">
-          <NavbarLogo />
-          <button
-              type="button"
-              className="clean-btn navbar-sidebar__close"
-              onClick={() => mobileSidebar.toggle()}
-              aria-label="Close navigation bar"
-          >
-              <IconClose />
-          </button>
-        </div>
-        <div className="navbar-sidebar__actions">
-          <div className="navbar-sidebar__actions__container">
-            <NavbarCTA />
-            {!searchBarItem && (
-                <NavbarSearch>
-                    <SearchBar />
-                </NavbarSearch>
-            )}
-          </div>
-        </div>
-      </>
+        <>
+            <div className="navbar-sidebar__brand">
+                <NavbarLogo />
+                <button
+                    type="button"
+                    className="clean-btn navbar-sidebar__close"
+                    onClick={() => mobileSidebar.toggle()}
+                    aria-label="Close navigation bar"
+                >
+                    <IconClose />
+                </button>
+            </div>
+            <div className="navbar-sidebar__actions">
+                <div className="navbar-sidebar__actions__container">
+                    <NavbarCTA />
+                    {!searchBarItem && (
+                        <NavbarSearch>
+                            <SearchBar />
+                        </NavbarSearch>
+                    )}
+                </div>
+            </div>
+        </>
     );
 }
diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
index 26d45b2af..d42753a89 100644
--- a/apify-docs-theme/src/theme/SearchBar/index.js
+++ b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -1,3 +1,5 @@
+import './styles.css';
+
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -5,7 +7,6 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, { useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
-import './styles.css';
 
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).

From 8175151bce7d254fa912ceea484764f147c4d66e Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 2 Jul 2025 11:46:22 +0200
Subject: [PATCH 3/9] fix: style overrides

---
 apify-docs-theme/src/theme/SearchBar/index.js | 6 ++++--
 apify-docs-theme/src/theme/custom.css         | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
index d42753a89..064c46ed6 100644
--- a/apify-docs-theme/src/theme/SearchBar/index.js
+++ b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -1,5 +1,4 @@
-import './styles.css';
-
+// eslint-disable-next-line simple-import-sort/imports
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -8,6 +7,9 @@ import React, { useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
 
+// needs to be imported as the last thing, so that it can override the default styles
+import './styles.css';
+
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).
  */
diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index 438c5964b..18db006e7 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -664,11 +664,16 @@ aside button[class*="collapseSidebarButton"] svg {
     padding: 0.8rem;
     font-size: 1.2rem;
     line-height: 1.6rem;
+    border-radius: 0.8rem;
     display: flex;
     align-items: center;
     gap: 0.4rem;
 }
 
+.navbar .dropdown__link:hover {
+    background: var(--color-Neutral_Hover);
+}
+
 .navbar .dropdown__link svg[class*=iconExternalLink] {
     margin-left: unset;
 }

From f90c4d27cfdf9798b1f801c6fc9d1a86a5ec30c7 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 2 Jul 2025 14:58:02 +0200
Subject: [PATCH 4/9] fix: sidebar & secondary menu

---
 apify-docs-theme/src/theme/Layout/index.jsx |  8 +++
 apify-docs-theme/src/theme/custom.css       | 76 ++++++++++-----------
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/apify-docs-theme/src/theme/Layout/index.jsx b/apify-docs-theme/src/theme/Layout/index.jsx
index 8c467b0e6..08793f0b2 100644
--- a/apify-docs-theme/src/theme/Layout/index.jsx
+++ b/apify-docs-theme/src/theme/Layout/index.jsx
@@ -1,10 +1,18 @@
+import { useLocation } from '@docusaurus/router';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { usePluginData } from '@docusaurus/useGlobalData';
 import React from 'react';
 
 export default function LayoutWrapper(props) {
+    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const baseUrl = useBaseUrl('/');
+    const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
+
     return (
         <div style={{
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',
diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index 18db006e7..ddea045a1 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -14,7 +14,6 @@ html[data-theme='dark'] {
     --ifm-heading-color: #f2f3fb;
     --ifm-navbar-link-color: #f2f3fb;
 
-    --ifm-navbar-height: 68px;
     --ifm-line-height-base: 1.65;
 
     --ifm-code-background: var(--ifm-pre-background) !important;
@@ -136,6 +135,7 @@ html[data-theme='dark'] {
     --ifm-font-weight-semibold: 600;
     --ifm-font-color-base: #242736;
 
+    --ifm-navbar-sidebar-width: 100vw;
     --ifm-navbar-item-padding-horizontal: 28px;
     --ifm-navbar-link-color: #41465d;
     --ifm-navbar-shadow: none;
@@ -146,7 +146,6 @@ html[data-theme='dark'] {
     --ifm-code-padding-horizontal: 6.4px;
     --ifm-code-padding-vertical: 3.2px;
 
-    --ifm-navbar-height: 68px;
     --ifm-global-spacing: 1.6rem !important;
 
     --ifm-color-primary-lightest: #5d9df1;
@@ -414,11 +413,16 @@ footer .col {
 
 .navbar__inner {
     width: 100%;
-    height: var(--ifm-navbar-height);
+    height: 68px;
     padding: 0 var(--ifm-spacing-horizontal);
     background: var(--color-Neutral_Background);
 }
 
+.navbar__sub {
+    padding: 0.8rem var(--ifm-spacing-horizontal);
+    height: 58px;
+}
+
 .navbar__container {
     max-width: var(--max-layout-width);
     display: flex;
@@ -519,6 +523,7 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .navbar__items {
+    height: calc(100% -68px);
     gap: 0.4rem;
 }
 
@@ -527,11 +532,10 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .navbar__item, .menu__link, .navbar__link {
-    border-radius: 8px;
     color: var(--color-Neutral_TextMuted);
-    padding: 4px 8px;
-    font-size: 14px;
-    line-height: 24.4px;
+    padding: 0;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
     transition: all ease-in 0.12s;
 }
 
@@ -558,7 +562,8 @@ aside .icon svg[class*=iconExternalLink] {
     display: flex;
     align-items: center;
     width: 200px;
-    padding-right: 8px;
+    margin-right: 1.6rem;
+    padding-right: 2rem;
     position: relative;
     border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
     justify-content: center;
@@ -602,7 +607,6 @@ article .card h2 {
 }
 
 .tsd-kind-icon,
-.menu__link,
 .table-of-contents__link {
     text-overflow: ellipsis;
     display: inline-block !important;
@@ -630,7 +634,7 @@ article .card h2 {
 }
 
 .menu__link--sublist-caret:after {
-    height: 2.5rem;
+    height: 2.4rem;
 }
 
 aside button[class*="collapseSidebarButton"] svg {
@@ -708,8 +712,12 @@ aside button[class*="collapseSidebarButton"] svg {
     width: 100vw;
 }
 
+.navbar-sidebar__items {
+    height: calc(100vh - 68px);
+}
+
 .navbar-sidebar__brand {
-    height: var(--ifm-navbar-height);
+    height: 68px;
     padding: 0 var(--ifm-spacing-horizontal);
     display: flex;
     align-items: center;
@@ -812,7 +820,6 @@ html .plugin-docs .theme-doc-markdown h3 {
     display: none;
 }
 
-.theme-doc-sidebar-menu .menu__link,
 .theme-doc-toc-desktop .table-of-contents .toc-highlight {
     height: auto;
     background: none;
@@ -822,10 +829,6 @@ html .plugin-docs .theme-doc-markdown h3 {
     margin-top: 0;
 }
 
-.theme-doc-sidebar-menu .menu__link:hover {
-    background: inherit;
-}
-
 .theme-doc-sidebar-menu .menu__link {
     font-weight: 400;
 }
@@ -834,15 +837,6 @@ html .plugin-docs .theme-doc-markdown h3 {
     font-weight: 700;
 }
 
-.theme-doc-sidebar-menu .menu__list-item-collapsible {
-    background: none;
-    border-radius: 0.8rem;
-}
-
-.theme-doc-sidebar-menu .menu__list-item-collapsible:hover {
-    background: var(--color-Neutral_Hover);
-}
-
 .theme-doc-sidebar-menu .menu__list-item-collapsible--active:hover {
     background: var(--color-neutral-overflow);
 }
@@ -873,7 +867,6 @@ html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-cont
     color: #f2f3fb;
 }
 
-.theme-doc-sidebar-menu .menu__link:hover,
 .theme-doc-sidebar-menu .menu__link--active,
 .theme-doc-toc-desktop .table-of-contents .table-of-contents__link:hover,
 .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
@@ -921,10 +914,12 @@ div[class*="searchBox"] {
     display: flex;
 }
 
-.menu__link--sublist,
 .menu__list-item > .menu__link,
+.menu__list-item-collapsible,
+.menu__list-item-collapsible > .menu__link,
 .navbar__item.navbar__link,
-.navbar__item > .navbar__link {
+.navbar__item > .navbar__link,
+.navbar-sidebar__back {
     padding: 0.8rem 1.2rem;
     border-radius: 2rem;
     font-size: 1.4rem;
@@ -932,6 +927,10 @@ div[class*="searchBox"] {
     font-weight: 500;
 }
 
+.menu__list-item-collapsible {
+    padding: unset;
+}
+
 .menu__list {
     width: 100%;
     display: flex;
@@ -940,6 +939,7 @@ div[class*="searchBox"] {
 }
 
 .menu__list .menu__list {
+    margin-top: unset;
     padding-left: 1.6rem;
 }
 
@@ -947,13 +947,18 @@ div[class*="searchBox"] {
     margin-top: 0.4rem;
 }
 
-.menu__list-item {
-    display: flex;
-    flex-direction: column;
+.menu__caret {
+    margin-right: 0.8rem;
 }
 
-.theme-doc-sidebar-item-category .menu__list-item-collapsible,
-.theme-doc-sidebar-item-link {
+.navbar-sidebar__back {
+    width: 100%;
+    margin: unset;
+}
+
+.theme-doc-sidebar-item-category
+.theme-doc-sidebar-item-link,
+.menu__list-item-collapsible {
     display: flex;
     align-items: center;
 }
@@ -1129,11 +1134,6 @@ aside li.section-header > .menu__list {
     padding-left: 0;
 }
 
-.theme-doc-sidebar-menu > li.section-header > ul > li.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible:hover,
-.theme-doc-sidebar-menu > li.section-header > ul > li.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible--active {
-    background: inherit !important;
-}
-
 .theme-doc-sidebar-menu > li.section-header > ul > li.theme-doc-sidebar-item-category-level-2 {
     margin-bottom: 1rem;
 }

From 5028d01ba7b8aa7ea2892373e625e114d2412409 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Wed, 2 Jul 2025 15:35:31 +0200
Subject: [PATCH 5/9] fix: menu link overflow

---
 apify-docs-theme/src/theme/custom.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index ddea045a1..45410cb74 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -606,6 +606,7 @@ article .card h2 {
     margin-top: 0;
 }
 
+.menu__link,
 .tsd-kind-icon,
 .table-of-contents__link {
     text-overflow: ellipsis;

From 76af1ee429b44243e389a567a782dd0236cfc6bc Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Thu, 3 Jul 2025 10:26:32 +0200
Subject: [PATCH 6/9] fix: code review comments

---
 apify-docs-theme/src/config.js                |  7 ++
 .../src/theme/Footer/index.module.css         |  6 +-
 .../Navbar/MobileSidebar/Header/index.jsx     |  2 +-
 apify-docs-theme/src/theme/SearchBar/index.js |  1 +
 apify-docs-theme/src/theme/custom.css         | 71 ++++++++++++-------
 5 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js
index 2a9e06553..8c385c2d0 100644
--- a/apify-docs-theme/src/config.js
+++ b/apify-docs-theme/src/config.js
@@ -137,6 +137,13 @@ const themeConfig = {
                     },
                 ],
             },
+            {
+                href: 'https://discord.com/invite/jyEM2PRvMU',
+                label: 'Discord',
+                title: 'Chat on Discord',
+                position: 'right',
+                className: 'icon',
+            },
         ],
     },
     colorMode: {
diff --git a/apify-docs-theme/src/theme/Footer/index.module.css b/apify-docs-theme/src/theme/Footer/index.module.css
index 7e60bc76e..07c0ddc20 100644
--- a/apify-docs-theme/src/theme/Footer/index.module.css
+++ b/apify-docs-theme/src/theme/Footer/index.module.css
@@ -4,7 +4,7 @@
 }
 
 .container {
-    max-width: var(--max-layout-width);
+    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
     width: 100%;
     margin: 0 auto;
     display: flex;
@@ -90,6 +90,10 @@ html[data-theme='dark'] .logo {
     .bottom {
         padding-top: 0;
         gap: 1.6rem;
+
+        :global(.col) {
+            justify-content: center;
+        }
     }
 
     .toggle {
diff --git a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
index befeb058a..1edc00a5f 100644
--- a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
+++ b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
@@ -20,7 +20,7 @@ export default function NavbarMobileSidebarHeader() {
                 <button
                     type="button"
                     className="clean-btn navbar-sidebar__close"
-                    onClick={() => mobileSidebar.toggle()}
+                    onClick={mobileSidebar.toggle}
                     aria-label="Close navigation bar"
                 >
                     <IconClose />
diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
index 064c46ed6..109a20e34 100644
--- a/apify-docs-theme/src/theme/SearchBar/index.js
+++ b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -8,6 +8,7 @@ import React, { useCallback } from 'react';
 import { ApifySearch } from '@apify/docs-search-modal';
 
 // needs to be imported as the last thing, so that it can override the default styles
+// TODO: update simple-import-sort to allow importing css as last.
 import './styles.css';
 
 /**
diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index 45410cb74..216a12ce2 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -163,7 +163,8 @@ html[data-theme='dark'] {
     --ifm-footer-background-color: #272c3d;
     --ifm-footer-title-color: #60626e;
     --ifm-footer-link-color: #6b6e80;
-    --max-layout-width: 1200px;
+    --ifm-spacing-horizontal: 2.4rem;
+    --max-layout-width: 1440px;
 
     --ifm-code-background: var(--ifm-pre-background);
 
@@ -424,7 +425,7 @@ footer .col {
 }
 
 .navbar__container {
-    max-width: var(--max-layout-width);
+    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
     display: flex;
     margin: 0 auto;
     width: 100%;
@@ -629,13 +630,25 @@ article .card h2 {
     color: #f2f3fb;
 }
 
-.menu__caret:before,
-.menu__link--sublist:after {
-    float: right;
+.menu__caret {
+    margin-right: 0.8rem;
+    padding: 0.6rem;
+}
+
+.menu__caret,
+.menu__link--sublist-caret {
+    border-radius: 1.2rem;
+}
+
+.menu__caret:before {
+    width: 1.2rem;
+    height: 1.2rem;
 }
 
 .menu__link--sublist-caret:after {
+    width: 2rem;
     height: 2.4rem;
+    float: right;
 }
 
 aside button[class*="collapseSidebarButton"] svg {
@@ -928,28 +941,45 @@ div[class*="searchBox"] {
     font-weight: 500;
 }
 
+.navbar__item.navbar__link.icon {
+    padding: 0.8rem;
+    font-size: 0;
+    line-height: 0;
+    flex-shrink: 0;
+}
+
+@media (max-width: 996px) {
+    .navbar__item.navbar__link.icon {
+        font-size: 1.4rem;
+        line-height: 2.4rem;
+        font-weight: 500;
+    }
+
+    .menu__link.icon::before {
+        display: none;
+    }
+    
+    .navbar__inner .navbar__item.navbar__link.icon {
+        display: none;
+    }
+}
+
+
 .menu__list-item-collapsible {
     padding: unset;
 }
 
 .menu__list {
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
 }
 
-.menu__list .menu__list {
-    margin-top: unset;
-    padding-left: 1.6rem;
-}
-
-.menu__list .menu__list .menu__list-item {
+.menu__list > .menu__list-item {
     margin-top: 0.4rem;
 }
 
-.menu__caret {
-    margin-right: 0.8rem;
+.menu__list .menu__list {
+    margin-top: unset;
+    padding-left: 1.6rem;
 }
 
 .navbar-sidebar__back {
@@ -997,11 +1027,6 @@ html .theme-doc-sidebar-container {
     border: 0;
 }
 
-html .theme-doc-sidebar-container button {
-    border: 0;
-    border-radius: 10px;
-}
-
 html .table-of-contents {
     border-left: 0;
 }
@@ -1135,10 +1160,6 @@ aside li.section-header > .menu__list {
     padding-left: 0;
 }
 
-.theme-doc-sidebar-menu > li.section-header > ul > li.theme-doc-sidebar-item-category-level-2 {
-    margin-bottom: 1rem;
-}
-
 .beta-chip {
     display: inline-block;
     border: 1px solid #ccc;

From baf53afd11b5ffa7d2a9ae6b3f700870fe56bb1c Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Thu, 3 Jul 2025 12:47:18 +0200
Subject: [PATCH 7/9] fix: double scrollbar

---
 apify-docs-theme/src/theme/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css
index 216a12ce2..693902e06 100644
--- a/apify-docs-theme/src/theme/custom.css
+++ b/apify-docs-theme/src/theme/custom.css
@@ -727,7 +727,7 @@ aside button[class*="collapseSidebarButton"] svg {
 }
 
 .navbar-sidebar__items {
-    height: calc(100vh - 68px);
+    height: calc(100vh - 197px);
 }
 
 .navbar-sidebar__brand {

From 4b260820879878b9f9dfb46d3ccfad50c6e67a86 Mon Sep 17 00:00:00 2001
From: katzino <katzino@gmail.com>
Date: Thu, 3 Jul 2025 12:47:34 +0200
Subject: [PATCH 8/9] fix: close mobile menu on search click

---
 .../Navbar/MobileSidebar/Header/index.jsx     |  7 ++++++-
 apify-docs-theme/src/theme/SearchBar/index.js | 20 +++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
index 1edc00a5f..4a3256356 100644
--- a/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
+++ b/apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx
@@ -13,6 +13,11 @@ export default function NavbarMobileSidebarHeader() {
     const { navbar: { items } } = useThemeConfig();
     const searchBarItem = items.find((item) => item.type === 'search');
 
+    function onSearchClick(event) {
+        event.preventDefault();
+        mobileSidebar.toggle();
+    }
+
     return (
         <>
             <div className="navbar-sidebar__brand">
@@ -31,7 +36,7 @@ export default function NavbarMobileSidebarHeader() {
                     <NavbarCTA />
                     {!searchBarItem && (
                         <NavbarSearch>
-                            <SearchBar />
+                            <SearchBar onClick={onSearchClick} />
                         </NavbarSearch>
                     )}
                 </div>
diff --git a/apify-docs-theme/src/theme/SearchBar/index.js b/apify-docs-theme/src/theme/SearchBar/index.js
index 109a20e34..e26aec750 100644
--- a/apify-docs-theme/src/theme/SearchBar/index.js
+++ b/apify-docs-theme/src/theme/SearchBar/index.js
@@ -40,7 +40,7 @@ export function Link(props) {
     return <a {...props}>{props.children}</a>;
 }
 
-export default function SearchBar() {
+export default function SearchBar({ onClick }) {
     const { siteConfig } = useDocusaurusContext();
     const location = useLocation();
     const history = useHistory();
@@ -62,13 +62,17 @@ export default function SearchBar() {
 
     return (
         <BrowserOnly>
-            {() => <ApifySearch
-                algoliaAppId={siteConfig.themeConfig.algolia.appId}
-                algoliaIndexName='test_test_apify_sdk'
-                algoliaKey={siteConfig.themeConfig.algolia.apiKey}
-                filters={`version:${getVersion()}`}
-                navigate={navigate}
-            />}
+            {() => (
+                <div onClick={onClick}>
+                    <ApifySearch
+                        algoliaAppId={siteConfig.themeConfig.algolia.appId}
+                        algoliaIndexName='test_test_apify_sdk'
+                        algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+                        filters={`version:${getVersion()}`}
+                        navigate={navigate}
+                    />
+                </div>
+            )}
         </BrowserOnly>
     );
 }

From ecf78187cfae653c51b7f54b529d8c8c0069070c Mon Sep 17 00:00:00 2001
From: Tomas Katz <katzino@gmail.com>
Date: Fri, 4 Jul 2025 12:21:39 +0200
Subject: [PATCH 9/9] fix: button text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Martin Adámek <banan23@gmail.com>
---
 apify-docs-theme/src/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apify-docs-theme/src/config.js b/apify-docs-theme/src/config.js
index 8c385c2d0..f4ebd53f2 100644
--- a/apify-docs-theme/src/config.js
+++ b/apify-docs-theme/src/config.js
@@ -277,7 +277,7 @@ const themeConfig = {
         },
         translations: {
             button: {
-                buttonText: 'Search documentation...',
+                buttonText: 'Search documentation…',
             },
         },
     },