@apify/docs-theme 1.0.5 → 1.0.7

package/package.json

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

package/src/config.js

@@ -139,7 +139,7 @@ const themeConfig = ({
         additionalLanguages: ['docker', 'log'],
     },
     metadata: [],
-    image: 'img/apify_og_SDK.png',
+    image: 'https://apify.com/img/og/docs.png',
     footer: {
         links: [
             {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useThemeConfig } from '@docusaurus/theme-common';
 import { usePluginData } from '@docusaurus/useGlobalData';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {
     splitNavbarItems,
 } from '@docusaurus/theme-common/internal';
@@ -16,9 +15,7 @@ import styles from './styles.module.css';
 function NavbarItems({ items }) {
     return (
         <>
-            {items.map((item, i) => (
-                <NavbarItem {...item} key={i}/>
-            ))}
+            {items.map((item, i) => <NavbarItem {...item} key={i}/>)}
         </>
     );
 }
@@ -29,8 +26,10 @@ function NavbarContentLayout({
 }) {
     return (
         <div className="navbar__inner">
-            <div className="navbar__items">{left}</div>
-            <div className="navbar__items navbar__items--right">{right}</div>
+            <div className="navbar__container">
+                <div className="navbar__items">{left}</div>
+                <div className="navbar__items navbar__items--right">{right}</div>
+            </div>
         </div>
     );
 }
@@ -39,15 +38,14 @@ function SubNavbar() {
     const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
     return (
         subNavbar ? (
-            <div className="navbar__inner">
-                <div className="navbar__items">
-                    <NavbarItems items={[
-                        {
-                            label: subNavbar.title,
-                            to: '/',
-                        },
-                        ...subNavbar.items,
-                    ]}/>
+            <div className="navbar__inner navbar__sub">
+                <div className="navbar__container">
+                    <div className="navbar__items">
+                        <div className="navbar__sub--title">
+                            <NavbarItem label={subNavbar.title} to="/"/>
+                        </div>
+                        <NavbarItems items={subNavbar.items}/>
+                    </div>
                 </div>
             </div>
         ) : null
@@ -62,7 +60,7 @@ export default function NavbarContent() {
         <div
             style={{
                 width: '100%',
-                height: '100%',
+                height: 'fit-content',
                 alignItems: 'center',
                 display: 'flex',
                 flexDirection: 'column',

package/src/theme/NavbarItem/NavbarNavLink.jsx

@@ -3,7 +3,8 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import { useLocation } from '@docusaurus/router';
-import { isRegexpStringMatch } from '@docusaurus/theme-common';
+import { isRegexpStringMatch, useThemeConfig } from '@docusaurus/theme-common';
+import { usePluginData } from '@docusaurus/useGlobalData';
 
 export default function NavbarNavLink({
     activeBasePath,
@@ -16,6 +17,9 @@ export default function NavbarNavLink({
     prependBaseUrlToHref,
     ...props
 }) {
+    const { navbar: { items = [] } } = useThemeConfig();
+    const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const allItems = [...items, ...(subNavbar?.items || [])];
     const location = useLocation();
     // TODO all this seems hacky
     // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
@@ -39,13 +43,21 @@ export default function NavbarNavLink({
                 </>
             ),
         };
+
+    // If the item is a dropdown, look for any of its children that match the current path
+    const dropDownHasActiveItem = location.pathname !== '/' && allItems
+        .filter((item) => item.type === 'dropdown')
+        .filter((item) => item.label === label)
+        .reduce((nestedItems, item) => [...nestedItems, ...item.items], [])
+        .some((item) => (item.to || item.href).endsWith(location.pathname));
+
     if (href) {
         return (
             <Link
                 href={prependBaseUrlToHref ? normalizedHref : href}
                 {...props}
                 {...(activeBaseUrl && {
-                    className: location.pathname.startsWith(`/${activeBasePath}`)
+                    className: location.pathname.startsWith(`/${activeBasePath}`) || dropDownHasActiveItem
                         ? 'navbar__item navbar__link navbar__link--active'
                         : 'navbar__item navbar__link',
                 })}
@@ -53,17 +65,19 @@ export default function NavbarNavLink({
             />
         );
     }
+
     return (
         <Link
             to={toUrl}
             isNavLink
             {...((activeBasePath || activeBaseRegex) && {
                 isActive: (_match, location) => (activeBaseRegex
-                    ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                    ? isRegexpStringMatch(activeBaseRegex, location.pathname) || dropDownHasActiveItem
                     : location.pathname.startsWith(activeBaseUrl)),
             })}
             {...props}
             {...linkContentProps}
+            isActive={() => true}
         />
     );
 }

package/src/theme/custom.css

@@ -16,6 +16,14 @@ html[data-theme='dark'] {
 
     --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
     --docsearch-text-color: #8d92af;
+
+    --color-Neutral_Background: #1A1B21;
+    --color-Neutral_BackgroundMuted: #252832;
+    --color-Neutral_SeparatorSubtle: #343847;
+    --color-Neutral_ChipBackgroundActive: #8C93A8;
+    --color-Neutral_Text: #F3F4FA;
+    --color-Neutral_TextMuted: #B2B8CC;
+    --color-Neutral_Hover: #2A2D39;
 }
 
 :root {
@@ -56,6 +64,14 @@ html[data-theme='dark'] {
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
     --ifm-heading-color: #242736;
+
+    --color-Neutral_Background: #ffffff;
+    --color-Neutral_BackgroundMuted: #f8f9fc;
+    --color-Neutral_SeparatorSubtle: #e0e3f2;
+    --color-Neutral_ChipBackgroundActive: #C1C6DD;
+    --color-Neutral_Text: #242836;
+    --color-Neutral_TextMuted: #3F475D;
+    --color-Neutral_Hover: #F2F3FB;
 }
 
 @font-face {
@@ -85,13 +101,21 @@ html[data-theme='dark'] {
 
 .navbar__inner {
     /* .container */
+    padding: 10px var(--ifm-spacing-horizontal);
+    width: 100%;
+    background: var(--color-Neutral_Background);
+}
+
+.navbar__container {
     max-width: calc(var(--max-layout-width) - 32px);
-    padding: 0 var(--ifm-spacing-horizontal);
+    display: flex;
+    margin: 0 auto;
     width: 100%;
 }
 
 .navbar__item.dropdown {
     padding: 0;
+    display: none;
 }
 
 .DocSearch-Button-Placeholder {
@@ -127,6 +151,8 @@ html[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
 }
 
 .navbar {
+    padding: 0;
+    /* height: fit-content; */
     height: auto;
 }
 
@@ -161,14 +187,20 @@ aside > div > a > b {
     position: relative;
     vertical-align: top;
     width: 0.4em;
-    top: 9px;
+    top: 7px;
     transform: rotate(135deg);
+    transition: all ease-in 0.2s;
+    margin-right: 6px;
+}
+
+.dropdown:hover .navbar__link::after {
+    transform: rotate(-45deg);
+    top: 10px;
 }
 
 .navbar .icon {
     font-size: 0;
     padding: 4px;
-    margin-left: 20px;
     line-height: 0;
 }
 
@@ -201,6 +233,46 @@ aside svg[class*=iconExternalLink] {
     display: none;
 }
 
+.navbar__items {
+    gap: 6px;
+}
+
+.navbar__item, .menu__link {
+    border-radius: 8px;
+    color: var(--color-Neutral_TextMuted);
+    padding: 4px 8px;
+    font-size: 14px;
+    line-height: 24.4px;
+    transition: all ease-in 0.2s;
+}
+
+.navbar__link:hover, .navbar__link--active:hover {
+    color: unset;
+}
+
+.navbar__sub {
+    display: none;
+    background-color: var(--color-Neutral_BackgroundMuted);
+    border: 1px solid var(--color-Neutral_SeparatorSubtle);
+}
+
+.navbar__sub--title {
+    display: flex;
+    align-items: center;
+    width: 160px;
+    justify-content: flex-end;
+    margin-right: 40px;
+    position: relative;
+}
+
+.navbar__sub--title::after {
+    content: "";
+    height: 20px;
+    border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
+    position: absolute;
+    right: -32px;
+}
+
 header.hero div[class^=heroButtons] {
     justify-content: inherit;
 }
@@ -233,11 +305,24 @@ nav.navbar .dropdown__menu {
 }
 
 .navbar__logo {
+    display: none;
     width: 11rem;
     height: 3rem;
     padding: 10px 0;
 }
 
+.navbar-sidebar .navbar__logo {
+    display: initial;
+}
+
+.navbar-sidebar .toggle_theme-src-theme-ColorModeToggle-styles-module {
+    display: none;
+}
+
+.navbar-sidebar div[class*="toggle_apify-docs"] {
+    display: none;
+}
+
 .navbar__link.subnav {
     font-size: 0.8em;
     padding: 5px;
@@ -292,6 +377,10 @@ html.plugin-docs .theme-doc-markdown h3 {
     line-height: 24px;
 }
 
+.navbar-sidebar .menu__link.icon {
+    display: none;
+}
+
 .theme-doc-sidebar-menu .menu__link,
 .theme-doc-toc-desktop .table-of-contents .toc-highlight {
     height: auto;
@@ -311,8 +400,7 @@ html.plugin-docs .theme-doc-markdown h3 {
     font-weight: 700;
 }
 
-.theme-doc-sidebar-menu .menu__list-item-collapsible,
-.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
+.theme-doc-sidebar-menu .menu__list-item-collapsible {
     background: none;
 }
 
@@ -320,6 +408,18 @@ html.plugin-docs .theme-doc-markdown h3 {
     font-weight: 700;
 }
 
+.navbar__link--active,
+.theme-doc-sidebar-menu.menu__list .menu__link--active,
+.theme-doc-sidebar-menu.menu__list .menu__list-item-collapsible--active
+ {
+    color: var(--color-Neutral_Text);
+    background: var(--color-Neutral_ChipBackgroundActive);
+}
+
+.navbar__link:not(.navbar__link--active):hover {
+    background: var(--color-Neutral_Hover);
+}
+
 html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
 html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
     color: #b3b8d2;
@@ -345,11 +445,65 @@ html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-cont
     display: none;
 }
 
-@media (min-width: 997px) and (max-width: 1250px) {
+nav.navbar {
+    transition: transform var(--ifm-transition-slow) ease;
+}
+
+nav.navbar[class*="navbarHidden"]{
+    transform: translate3d(0, calc(-210%), 0);
+}
+
+.navbar__items--right a.icon,
+div[class*="colorModeToggle"]
+{
+    display: initial;
+}
+
+div[class*="searchBox"] {
+    padding-left: 0;
+    position: unset;
+}
+
+.menu__link.navbar__item {
+    padding: 4px 8px;
+}
+
+.menu__list-item {
+    min-height: 33px;
+}
+
+.menu__link, .menu__list-item > .navbar__item {
+    display: flex;
+}
+
+@media (min-width: 480px) { 
+    .navbar__logo {
+        display: initial;
+    }
+}
+
+
+@media (min-width: 997px) {
+    .navbar__sub {
+        display: block;
+    }
+
+    .navbar__item.dropdown {
+        display: flex;
+    }
+}
+
+@media (min-width: 1130px) {
+    .navbar__items {
+        gap: 20px;
+    }
+}
+
+/* @media (min-width: 997px) and (max-width: 1250px) {
     .navbar__items--right a.icon {
         display: none;
     }
-}
+} */
 
 @media (min-width: 997px) and (max-width: 1130px) {
     .navbar__link.changelog {