@apify/docs-theme 1.0.180 → 1.0.181

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/docs-theme",
-    "version": "1.0.180",
+    "version": "1.0.181",
     "description": "",
     "main": "./src/index.js",
     "files": [
@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@apify/docs-search-modal": "^1.2.2",
-        "@docusaurus/theme-common": "3.7.0",
+        "@docusaurus/theme-common": "^3.7.0",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "algoliasearch": "^5.19.0",
         "algoliasearch-helper": "^3.22.6",

package/src/config.js

@@ -137,13 +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',
@@ -256,6 +249,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 +271,15 @@ 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,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>

package/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: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
+    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,47 @@
     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;
+
+        :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') ? '123px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
             margin: 0,
             padding: 0,
             boxSizing: 'border-box',

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,59 @@
+.getStarted {
+  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;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  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/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 />
                     </>
                 }
             />

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

@@ -0,0 +1,46 @@
+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>
+        </>
+    );
+}

package/src/theme/SearchBar/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line simple-import-sort/imports
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import RouterLink from '@docusaurus/Link';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -6,6 +7,10 @@ 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).
  */
@@ -35,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();
@@ -57,13 +62,17 @@ export default function SearchBar() {
 
     return (
         <BrowserOnly>
-            {() => <ApifySearch
-                algoliaAppId={siteConfig.themeConfig.algolia.appId}
-                algoliaIndexName='apify_sdk_v2'
-                algoliaKey={siteConfig.themeConfig.algolia.apiKey}
-                filters={`version:${getVersion()}`}
-                navigate={navigate}
-            />}
+            {() => (
+                <div onClick={onClick}>
+                    <ApifySearch
+                        algoliaAppId={siteConfig.themeConfig.algolia.appId}
+                        algoliaIndexName='apify_sdk_v2'
+                        algoliaKey={siteConfig.themeConfig.algolia.apiKey}
+                        filters={`version:${getVersion()}`}
+                        navigate={navigate}
+                    />
+                </div>
+            )}
         </BrowserOnly>
     );
 }

package/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 {

package/src/theme/SearchPage/index.js

@@ -117,6 +117,7 @@ function SearchPageContent() {
     const {
         algolia: { appId, apiKey, indexName },
     } = useAlgoliaThemeConfig();
+    const titleFormatter = useTitleFormatter();
     const documentsFoundPlural = useDocumentsFoundPlural();
     const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
     const [searchQuery, setSearchQuery] = useSearchQueryString();
@@ -295,7 +296,7 @@ function SearchPageContent() {
     return (
         <Layout>
             <Head>
-                <title>{useTitleFormatter(getTitle())}</title>
+                <title>{titleFormatter.format(getTitle())}</title>
                 {/*
          We should not index search pages
           See https://github.com/facebook/docusaurus/pull/3233

package/src/theme/custom.css

@@ -14,8 +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;
 
     --ifm-code-background: var(--ifm-pre-background) !important;
@@ -80,6 +78,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 +121,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 {
@@ -133,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;
@@ -160,6 +163,7 @@ 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);
@@ -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,25 @@ 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: 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) - 32px);
+    max-width: calc(var(--max-layout-width) - var(--ifm-spacing-horizontal) * 2);
     display: flex;
     margin: 0 auto;
     width: 100%;
@@ -395,43 +436,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,24 +524,28 @@ aside .icon svg[class*=iconExternalLink] {
 }
 
 .navbar__items {
-    gap: 6px;
+    gap: 0.4rem;
+}
+
+.navbar__items--right {
+    gap: 1.6rem;
 }
 
 .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;
 }
 
 .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 {
@@ -554,12 +562,18 @@ 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;
 }
 
+.navbar-sidebar__item {
+    width: 100%;
+    padding: 1.6rem var(--ifm-spacing-horizontal);
+}
+
 header.hero div[class^=heroButtons] {
     justify-content: inherit;
 }
@@ -592,8 +606,8 @@ article .card h2 {
     margin-top: 0;
 }
 
-.tsd-kind-icon,
 .menu__link,
+.tsd-kind-icon,
 .table-of-contents__link {
     text-overflow: ellipsis;
     display: inline-block !important;
@@ -615,13 +629,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 {
-    height: 2.5rem;
+    width: 2rem;
+    height: 2.4rem;
+    float: right;
 }
 
 aside button[class*="collapseSidebarButton"] svg {
@@ -632,29 +658,112 @@ 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;
+    border-radius: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
 }
 
-.navbar-sidebar .navbar__logo {
-    display: initial;
+.navbar .dropdown__link:hover {
+    background: var(--color-Neutral_Hover);
 }
 
-.navbar-sidebar .toggle_theme-src-theme-ColorModeToggle-styles-module {
-    display: none;
+.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;
 }
 
-.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__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);
     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;
@@ -724,7 +833,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;
@@ -734,10 +842,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;
 }
@@ -746,15 +850,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);
 }
@@ -785,7 +880,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 {
@@ -819,24 +913,84 @@ 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;
 }
 
-.theme-doc-sidebar-item-category .menu__list-item-collapsible,
-.theme-doc-sidebar-item-link {
-    display: flex;
-    align-items: center;
+.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;
 }
 
-@media (min-width: 480px) {
-    .navbar__logo {
-        display: initial;
+.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%;
+}
+
+.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) {
@@ -849,12 +1003,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;
@@ -878,11 +1026,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;
 }
@@ -1016,15 +1159,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;
-}
-
 .beta-chip {
     display: inline-block;
     border: 1px solid #ccc;
@@ -1837,19 +1971,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;
-    }
 }

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

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