docs: restructure platform sidebar navigation top nav v2

apify-docs-theme/src/config.js

@@ -20,91 +20,102 @@ const themeConfig = {
         },
         items: [
             {
-                label: 'Academy',
-                href: `${absoluteUrl}/academy`,
-                activeBasePath: 'academy',
+                label: 'Get started',
+                href: `${absoluteUrl}/platform/get-started`,
+                activeBasePath: 'platform/get-started',
                 position: 'left',
                 target: '_self',
                 rel: 'dofollow',
             },
             {
-                label: 'Platform',
-                href: `${absoluteUrl}/platform`,
-                className: 'navbar__active',
-                activeBasePath: 'platform',
+                label: 'Actors',
+                href: `${absoluteUrl}/platform/actors`,
+                activeBasePath: 'platform/actors',
                 position: 'left',
                 target: '_self',
                 rel: 'dofollow',
             },
             {
-                label: 'API',
-                type: 'dropdown',
-                to: `${absoluteUrl}/api`,
+                label: 'Storage',
+                href: `${absoluteUrl}/platform/storage`,
+                activeBasePath: 'platform/storage',
+                position: 'left',
+                target: '_self',
+                rel: 'dofollow',
+            },
+            {
+                label: 'Proxy',
+                href: `${absoluteUrl}/platform/proxy`,
+                activeBasePath: 'platform/proxy',
+                position: 'left',
+                target: '_self',
+                rel: 'dofollow',
+            },
+            {
+                label: 'Integrations',
+                href: `${absoluteUrl}/platform/integrations`,
+                activeBasePath: 'platform/integrations',
+                position: 'left',
+                target: '_self',
+                rel: 'dofollow',
+            },
+            {
+                label: 'Account',
+                href: `${absoluteUrl}/platform/account`,
+                activeBasePath: 'platform/account',
+                position: 'left',
                 target: '_self',
                 rel: 'dofollow',
+            },
+            {
+                label: 'API',
+                href: `${absoluteUrl}/api/v2`,
                 activeBasePath: 'api',
                 position: 'left',
+                target: '_self',
+                rel: 'dofollow',
+            },
+            {
+                label: 'Resources',
+                type: 'dropdown',
+                position: 'left',
                 items: [
                     {
-                        label: 'Reference',
-                        href: `${absoluteUrl}/api/v2`,
+                        label: 'Academy',
+                        href: `${absoluteUrl}/academy`,
                         target: '_self',
                         rel: 'dofollow',
                     },
                     {
-                        label: 'Client for JavaScript',
-                        href: `${absoluteUrl}/api/client/js/docs`,
+                        label: 'SDK for JavaScript',
+                        href: `${absoluteUrl}/sdk/js/docs/overview`,
                         target: '_self',
                         rel: 'dofollow',
                     },
                     {
-                        label: 'Client for Python',
-                        href: `${absoluteUrl}/api/client/python/docs/overview`,
+                        label: 'SDK for Python',
+                        href: `${absoluteUrl}/sdk/python/docs/overview`,
                         target: '_self',
                         rel: 'dofollow',
                     },
-                ],
-            },
-            {
-                label: 'SDK',
-                type: 'dropdown',
-                to: `${absoluteUrl}/sdk`,
-                activeBasePath: 'sdk',
-                position: 'left',
-                target: '_self',
-                rel: 'dofollow',
-                items: [
                     {
-                        label: 'SDK for JavaScript',
-                        href: `${absoluteUrl}/sdk/js/docs/overview`,
+                        label: 'API Client for JavaScript',
+                        href: `${absoluteUrl}/api/client/js/docs`,
                         target: '_self',
                         rel: 'dofollow',
                     },
                     {
-                        html: 'SDK for Python',
-                        href: `${absoluteUrl}/sdk/python/docs/overview`,
+                        label: 'API Client for Python',
+                        href: `${absoluteUrl}/api/client/python/docs/overview`,
+                        target: '_self',
+                        rel: 'dofollow',
+                    },
+                    {
+                        label: 'CLI',
+                        href: `${absoluteUrl}/cli/docs`,
                         target: '_self',
                         rel: 'dofollow',
                     },
-                ],
-            },
-            {
-                label: 'CLI',
-                href: `${absoluteUrl}/cli/docs`,
-                position: 'left',
-                activeBasePath: 'cli',
-                target: '_self',
-                rel: 'dofollow',
-            },
-            {
-                label: 'Open source',
-                type: 'dropdown',
-                to: `${absoluteUrl}/open-source`,
-                activeBasePath: 'open-source',
-                target: '_self',
-                position: 'left',
-                className: 'navbar__item',
-                items: [
                     {
                         label: 'Crawlee',
                         href: 'https://crawlee.dev',

apify-docs-theme/src/theme/Layout/index.jsx

@@ -1,19 +1,26 @@
 import Head from '@docusaurus/Head';
 import { useLocation } from '@docusaurus/router';
+import { isRegexpStringMatch } from '@docusaurus/theme-common';
 // 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 { options } = usePluginData('@apify/docs-theme');
     const baseUrl = useBaseUrl('/');
-    const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '').trim();
+    const location = useLocation();
+    const currentPath = location.pathname.replace(new RegExp(`^${baseUrl}`), '').trim();
     const shouldRenderAlternateLink = currentPath && currentPath !== '404';
 
     const alternateMarkdownLink = useBaseUrl(`/${currentPath}.md`, { absolute: true });
 
+    const subNavbars = options.subNavbars ?? (options.subNavbar ? [options.subNavbar] : []);
+    const hasActiveSubNavbar = subNavbars.some(
+        (nav) => !nav.pathRegex || isRegexpStringMatch(nav.pathRegex, location.pathname),
+    );
+
     return (
         <>
             <Head>
@@ -25,7 +32,7 @@
             </Head>
             <div
                 style={{
-                    '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
+                    '--ifm-navbar-height': hasActiveSubNavbar && !currentPath.startsWith('api/v2') ? '126px' : '68px',
                     margin: 0,
                     padding: 0,
                     boxSizing: 'border-box',

apify-docs-theme/src/theme/Navbar/Content/index.jsx

@@ -45,27 +45,30 @@ function SubNavbarTitle({ titleIcon, title }) {
 }
 
 function SubNavbar() {
-    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const { options } = usePluginData('@apify/docs-theme');
     const location = useLocation();
 
-    return (
-        subNavbar && (!subNavbar?.pathRegex || isRegexpStringMatch(subNavbar.pathRegex, location.pathname)) ? (
-            <div className="navbar__inner navbar__sub">
-                <div className="navbar__container">
-                    <div className="navbar__items">
-                        <div className="navbar__sub--title">
-                            <NavbarItem
-                                label={<SubNavbarTitle title={subNavbar.title} titleIcon={subNavbar.titleIcon} />}
-                                to={subNavbar.to ?? '/'}
-                                activeBaseRegex='(?!)'
-                            />
-                        </div>
-                        <NavbarItems items={subNavbar.items} />
+    const subNavbars = options.subNavbars ?? (options.subNavbar ? [options.subNavbar] : []);
+    const activeSubNavbar = subNavbars.find(
+        (nav) => !nav.pathRegex || isRegexpStringMatch(nav.pathRegex, location.pathname),
+    );
+
+    return activeSubNavbar ? (
+        <div className="navbar__inner navbar__sub">
+            <div className="navbar__container">
+                <div className="navbar__items">
+                    <div className="navbar__sub--title">
+                        <NavbarItem
+                            label={<SubNavbarTitle title={activeSubNavbar.title} titleIcon={activeSubNavbar.titleIcon} />}
+                            to={activeSubNavbar.to ?? '/'}
+                            activeBaseRegex='(?!)'
+                        />
                     </div>
+                    <NavbarItems items={activeSubNavbar.items} />
                 </div>
             </div>
-        ) : null
-    );
+        </div>
+    ) : null;
 }
 
 export default function NavbarContent() {

apify-docs-theme/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.jsx

@@ -1,4 +1,5 @@
-import { useThemeConfig } from '@docusaurus/theme-common';
+import { useLocation } from '@docusaurus/router';
+import { isRegexpStringMatch, useThemeConfig } from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import NavbarItem from '@theme/NavbarItem';
@@ -15,19 +16,26 @@ export default function NavbarMobilePrimaryMenu() {
     // Should we allow providing a different list of items?
     const items = useNavbarItems();
     const baseUrl = useBaseUrl('/');
-    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const { options } = usePluginData('@apify/docs-theme');
+    const location = useLocation();
+
+    const subNavbars = options.subNavbars ?? (options.subNavbar ? [options.subNavbar] : []);
+    const activeSubNavbar = subNavbars.find(
+        (nav) => !nav.pathRegex || isRegexpStringMatch(nav.pathRegex, location.pathname),
+    );
+
     return (
         <>
             {
-                subNavbar ? <>
+                activeSubNavbar ? <>
                     <ul className="menu__list" style={{ marginBottom: '16px', borderBottom: '1px solid #e0e0e0', paddingBottom: '16px' }}>
                         <NavbarItem
                             key={'title'}
                             mobile
                             href={baseUrl}
-                            label={subNavbar.title}
+                            label={activeSubNavbar.title}
                         />
-                        {subNavbar.items.map((item, i) => (
+                        {activeSubNavbar.items.map((item, i) => (
                             <NavbarItem
                                 style={{ paddingLeft: '16px' }}
                                 key={i}

docusaurus.config.js

@@ -84,27 +84,29 @@ module.exports = {
             require.resolve('./apify-docs-theme'),
             /** @type {import('./apify-docs-theme/types').ThemeOptions} */
             ({
-                subNavbar: {
-                    title: 'Academy',
-                    pathRegex: '/academy',
-                    to: '/academy',
-                    items: [
-                        {
-                            label: 'Courses',
-                            to: `/academy`,
-                            activeBaseRegex: `${[
-                                'academy$',
-                                ...collectSlugs(join(__dirname, 'sources', 'academy', 'webscraping')),
-                                ...collectSlugs(join(__dirname, 'sources', 'academy', 'platform')),
-                            ].join('$|')}$`,
-                        },
-                        {
-                            label: 'Tutorials',
-                            to: `/academy/tutorials`,
-                            activeBaseRegex: `${collectSlugs(join(__dirname, 'sources', 'academy', 'tutorials')).join('$|')}$`,
-                        },
-                    ],
-                },
+                subNavbars: [
+                    {
+                        title: 'Academy',
+                        pathRegex: '/academy',
+                        to: '/academy',
+                        items: [
+                            {
+                                label: 'Courses',
+                                to: `/academy`,
+                                activeBaseRegex: `${[
+                                    'academy$',
+                                    ...collectSlugs(join(__dirname, 'sources', 'academy', 'webscraping')),
+                                    ...collectSlugs(join(__dirname, 'sources', 'academy', 'platform')),
+                                ].join('$|')}$`,
+                            },
+                            {
+                                label: 'Tutorials',
+                                to: `/academy/tutorials`,
+                                activeBaseRegex: `${collectSlugs(join(__dirname, 'sources', 'academy', 'tutorials')).join('$|')}$`,
+                            },
+                        ],
+                    },
+                ],
             }),
         ],
         'docusaurus-theme-openapi-docs',