@apify/docs-theme 1.0.179 → 1.0.180

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.179",
+    "version": "1.0.180",
     "description": "",
     "main": "./src/index.js",
     "files": [

package/src/config.js

@@ -137,6 +137,13 @@ 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',
@@ -249,10 +256,6 @@ 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',
@@ -271,15 +274,9 @@ const themeConfig = {
         appId: 'N8EOCSBQGH',
         apiKey: 'e97714a64e2b4b8b8fe0b01cd8592870', // search only (public) API key
         indexName: 'apify_sdk_v2',
-        placeholder: 'Search documentation',
         algoliaOptions: {
             facetFilters: ['version:VERSION'],
         },
-        translations: {
-            button: {
-                buttonText: 'Search documentation…',
-            },
-        },
     },
     hubspot: {
         accountId: '19497222',

package/src/theme/Footer/index.jsx

@@ -1,6 +1,5 @@
 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';
 
@@ -9,7 +8,7 @@ import styles from './index.module.css';
 function FooterLinksColumn({ column }) {
     return (
         <>
-            <div className={styles.title}>{column.title}</div>
+            <div className={styles.footerTitle}>{column.title}</div>
             <ul className={clsx(styles.footerItem, 'clean-list')}>
                 {column.items.map((item, i) => (
                     <li key={i} className="footer__item">
@@ -29,8 +28,8 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className={styles.container}>
-                <div className={clsx('row', styles.top)}>
+            <div className="container padding-horiz--lg">
+                <div className="row" style={{ justifyContent: 'space-between' }}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>
                             <FooterLinksColumn {...{ column }} />
@@ -38,15 +37,12 @@ function Footer() {
                     ))
                     }
                 </div>
-                <div className={clsx('row', styles.bottom)}>
-                    <div className="col col--6">
+                <div className="row padding-vert--md padding-top--lg">
+                    <div className="col padding-vert--md col--6">
                         <a href="https://apify.com" target={'_blank'} rel={'dofollow noreferrer'}>
-                            <span className={styles.logo}></span>
+                            <span className={styles.footerLogo}></span>
                         </a>
                     </div>
-                    <div className="col col--6">
-                        <ColorModeToggle className={styles.toggle} />
-                    </div>
                 </div>
             </div>
         </footer>

package/src/theme/Footer/index.module.css

@@ -1,14 +1,5 @@
 .footer {
-    padding: 4rem 1.6rem 8rem;
-    border-top: 1px solid var(--color-neutral-separator-subtle);
-}
-
-.container {
-    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
-    width: 100%;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
+    padding-top: 64px;
 }
 
 .builtBy {
@@ -42,31 +33,20 @@
     fill: #6f7490;
 }
 
-.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;
+.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;
 }
 
-.logo {
+.footerLogo {
     display: inline-block;
     width: 90px;
     height: 24px;
@@ -74,47 +54,8 @@
     background-repeat: no-repeat;
 }
 
-html[data-theme='dark'] .logo {
+html[data-theme='dark'] .footerLogo {
     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;
-
-        :global(.col) {
-            justify-content: center;
-        }
-    }
-
-    .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 */

package/src/theme/Layout/index.jsx

@@ -12,7 +12,7 @@ export default function LayoutWrapper(props) {
 
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',

package/src/theme/Navbar/Content/index.jsx

@@ -4,6 +4,7 @@ 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';
@@ -11,7 +12,7 @@ import NavbarItem from '@theme/NavbarItem';
 import React from 'react';
 
 import SearchBar from '../../SearchBar';
-import NavbarCTA from '../CTA';
+import styles from './styles.module.css';
 
 function NavbarItems({ items }) {
     return (
@@ -71,7 +72,6 @@ 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 />
                     </>
                 }
             />

package/src/theme/Navbar/Content/styles.module.css

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

package/src/theme/SearchBar/index.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line simple-import-sort/imports
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -7,10 +6,6 @@ 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';
-
 /**
  * Tests whether the given href is pointing to the current docusaurus instance (so we can use the router link).
  */
@@ -40,7 +35,7 @@ export function Link(props) {
     return <a {...props}>{props.children}</a>;
 }
 
-export default function SearchBar({ onClick }) {
+export default function SearchBar() {
     const { siteConfig } = useDocusaurusContext();
     const location = useLocation();
     const history = useHistory();
@@ -62,17 +57,13 @@ export default function SearchBar({ onClick }) {
 
     return (
         <BrowserOnly>
-            {() => (
-                <div onClick={onClick}>
-                    <ApifySearch
-                        algoliaAppId={siteConfig.themeConfig.algolia.appId}
-                        algoliaIndexName='apify_sdk_v2'
-                        algoliaKey={siteConfig.themeConfig.algolia.apiKey}
-                        filters={`version:${getVersion()}`}
-                        navigate={navigate}
-                    />
-                </div>
-            )}
+            {() => <ApifySearch
+                algoliaAppId={siteConfig.themeConfig.algolia.appId}
+                algoliaIndexName='apify_sdk_v2'
+                algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+                filters={`version:${getVersion()}`}
+                navigate={navigate}
+            />}
         </BrowserOnly>
     );
 }

package/src/theme/SearchBar/styles.css

@@ -4,97 +4,9 @@
 }
 
 .DocSearch-Button {
-  height: 4rem;
   margin: 0;
-  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;
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
 }
 
 .DocSearch-Container {

package/src/theme/custom.css

@@ -14,6 +14,8 @@ 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;
 
     --ifm-code-background: var(--ifm-pre-background) !important;
@@ -78,9 +80,6 @@ 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;
@@ -121,7 +120,6 @@ 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 {
@@ -135,7 +133,6 @@ 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;
@@ -163,7 +160,6 @@ html[data-theme='dark'] {
     --ifm-footer-background-color: #272c3d;
     --ifm-footer-title-color: #60626e;
     --ifm-footer-link-color: #6b6e80;
-    --ifm-spacing-horizontal: 2.4rem;
     --max-layout-width: 1440px;
 
     --ifm-code-background: var(--ifm-pre-background);
@@ -240,9 +236,6 @@ 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;
@@ -283,7 +276,6 @@ 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,
@@ -354,20 +346,12 @@ body {
     font-weight: 600;
 }
 
-.navbar__sub--title > a {
-    font-weight: 600;
-}
-
-footer .clean-list {
-    margin-bottom: 0;
-}
-
-footer .row {
-    margin: unset;
+.navbar__item {
+    font-weight: 500;
 }
 
-footer .col {
-    padding: unset;
+.navbar__sub--title > a {
+    font-weight: 600;
 }
 
 .footer__title {
@@ -375,30 +359,6 @@ footer .col {
     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;
 }
@@ -407,25 +367,24 @@ footer .col {
     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: 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: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
+    max-width: calc(var(--max-layout-width) - 32px);
     display: flex;
     margin: 0 auto;
     width: 100%;
@@ -436,6 +395,43 @@ 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; */
@@ -524,29 +520,24 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .navbar__items {
-    height: calc(100% -68px);
-    gap: 0.4rem;
-}
-
-.navbar__items--right {
-    gap: 1.6rem;
+    gap: 6px;
 }
 
 .navbar__item, .menu__link, .navbar__link {
+    border-radius: 8px;
     color: var(--color-Neutral_TextMuted);
-    padding: 0;
-    font-size: 1.4rem;
-    line-height: 2.4rem;
+    padding: 4px 8px;
+    font-size: 14px;
+    line-height: 24.4px;
     transition: all ease-in 0.12s;
 }
 
 .menu__link:hover {
-    background: var(--color-Neutral_Hover);
-    color: unset;
+    background: var(--color-Neutral_Hover) !important;
 }
 
 .menu__link--active:hover {
-    background: var(--color-neutral-overflow);
+    background: var(--color-neutral-overflow) !important;
 }
 
 .navbar__link:hover, .navbar__link--active:hover {
@@ -563,18 +554,12 @@ aside .icon svg[class*=iconExternalLink] {
     display: flex;
     align-items: center;
     width: 200px;
-    margin-right: 1.6rem;
-    padding-right: 2rem;
+    padding-right: 8px;
     position: relative;
     border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
     justify-content: center;
 }
 
-.navbar-sidebar__item {
-    width: 100%;
-    padding: 1.6rem var(--ifm-spacing-horizontal);
-}
-
 header.hero div[class^=heroButtons] {
     justify-content: inherit;
 }
@@ -607,8 +592,8 @@ article .card h2 {
     margin-top: 0;
 }
 
-.menu__link,
 .tsd-kind-icon,
+.menu__link,
 .table-of-contents__link {
     text-overflow: ellipsis;
     display: inline-block !important;
@@ -630,25 +615,13 @@ article .card h2 {
     color: #f2f3fb;
 }
 
-.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__caret:before,
+.menu__link--sublist:after {
+    float: right;
 }
 
 .menu__link--sublist-caret:after {
-    width: 2rem;
-    height: 2.4rem;
-    float: right;
+    height: 2.5rem;
 }
 
 aside button[class*="collapseSidebarButton"] svg {
@@ -659,110 +632,27 @@ aside button[class*="collapseSidebarButton"] svg {
     height: 20px;
 }
 
-.navbar .dropdown--hoverable::after {
-    top: 100%;
-    width: 100%;
-    height: 0.6rem;
-    content: '';
-    display: block;
-    position: absolute;
-}
-
-.navbar .dropdown__menu {
-    top: calc(100% + 0.6rem);
+nav.navbar .dropdown__menu {
     min-width: 96px;
-    padding: 0.8rem;
-    border: 1px solid var(--color-neutral-border);
-    border-radius: 12px;
-    box-shadow: none;
-}
-
-.navbar .dropdown__link {
-    margin: unset;
-    padding: 0.8rem;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    border-radius: 0.8rem;
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
+    padding-top: 1rem;
 }
 
-.navbar .dropdown__link:hover {
-    background: var(--color-Neutral_Hover);
-}
-
-.navbar .dropdown__link svg[class*=iconExternalLink] {
-    margin-left: unset;
-}
-
-.navbar__toggle,
-.navbar-sidebar__close {
-    width: 3.6rem;
-    height: 3.6rem;
-    margin: unset;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-}
-
-@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__items {
-    height: calc(100vh - 197px);
-}
-
-.navbar-sidebar__brand {
-    height: 68px;
-    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);
+.navbar__logo {
     display: none;
+    width: 176px;
+    height: 48px;
 }
 
-@media (max-width: 768px) {
-    .navbar-sidebar__actions {
-        display: block;
-    }
+.navbar-sidebar .navbar__logo {
+    display: initial;
 }
 
-.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-sidebar .toggle_theme-src-theme-ColorModeToggle-styles-module {
+    display: none;
 }
 
-.navbar__logo {
-    width: 152px;
-    height: 28px;
-    margin-right: unset;
+.navbar-sidebar div[class*="toggle_apify-docs"] {
+    display: none;
 }
 
 .navbar__link.subnav {
@@ -834,6 +724,7 @@ 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;
@@ -843,6 +734,10 @@ 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;
 }
@@ -851,6 +746,15 @@ 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);
 }
@@ -881,6 +785,7 @@ 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 {
@@ -914,84 +819,24 @@ div[class*="searchBox"] {
     position: unset;
 }
 
-.navbar__brand {
-    margin-right: 2rem;
-}
-
-@media (max-width: 996px) {
-    .navbar__brand {
-        margin-right: auto;
-    }
+.menu__link.navbar__item {
+    padding: 4px 8px;
 }
 
 .menu__link, .menu__list-item > .navbar__item {
     display: flex;
 }
 
-.menu__list-item > .menu__link,
-.menu__list-item-collapsible,
-.menu__list-item-collapsible > .menu__link,
-.navbar__item.navbar__link,
-.navbar__item > .navbar__link,
-.navbar-sidebar__back {
-    padding: 0.8rem 1.2rem;
-    border-radius: 2rem;
-    font-size: 1.4rem;
-    line-height: 2.4rem;
-    font-weight: 500;
-}
-
-.navbar__item.navbar__link.icon {
-    padding: 0.8rem;
-    font-size: 0;
-    line-height: 0;
-    flex-shrink: 0;
+.theme-doc-sidebar-item-category .menu__list-item-collapsible,
+.theme-doc-sidebar-item-link {
+    display: flex;
+    align-items: center;
 }
 
-@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;
+@media (min-width: 480px) {
+    .navbar__logo {
+        display: initial;
     }
-    
-    .navbar__inner .navbar__item.navbar__link.icon {
-        display: none;
-    }
-}
-
-
-.menu__list-item-collapsible {
-    padding: unset;
-}
-
-.menu__list {
-    width: 100%;
-}
-
-.menu__list > .menu__list-item {
-    margin-top: 0.4rem;
-}
-
-.menu__list .menu__list {
-    margin-top: unset;
-    padding-left: 1.6rem;
-}
-
-.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;
 }
 
 @media (min-width: 997px) {
@@ -1004,6 +849,12 @@ 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;
@@ -1027,6 +878,11 @@ 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;
 }
@@ -1160,6 +1016,15 @@ 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;
+}
+
 .beta-chip {
     display: inline-block;
     border: 1px solid #ccc;
@@ -1972,12 +1837,19 @@ 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;
+    }
 }

package/src/theme/Navbar/CTA/index.jsx

@@ -1,7 +0,0 @@
-import styles from './styles.module.css';
-
-export default function NavbarCTA() {
-    return (
-        <a href="https://console.apify.com" className={styles.getStarted}>Get started</a>
-    );
-}

package/src/theme/Navbar/CTA/styles.module.css

@@ -1,57 +0,0 @@
-.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;
-  }
-}

package/src/theme/Navbar/MobileSidebar/Header/index.jsx

@@ -1,46 +0,0 @@
-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');
-
-    function onSearchClick(event) {
-        event.preventDefault();
-        mobileSidebar.toggle();
-    }
-
-    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 onClick={onSearchClick} />
-                        </NavbarSearch>
-                    )}
-                </div>
-            </div>
-        </>
-    );
-}