feat: header facelift

Author: katzino

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',

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

@@ -28,7 +28,7 @@ function Footer() {
     const { links, style } = footer;
     return (
         <footer className={clsx(styles.footer, style)}>
-            <div className="container padding-horiz--lg">
+            <div className={styles.container}>
                 <div className="row" style={{ justifyContent: 'space-between' }}>
                     { links.map((column, i) => (
                         <div key={i} className={`col col--2`}>

apify-docs-theme/src/theme/Footer/index.module.css

@@ -1,5 +1,20 @@
 .footer {
-    padding-top: 64px;
+    padding: 4rem 1.6rem 0;
+    border-top: 1px solid var(--color-neutral-separator-subtle);
+}
+
+.container {
+    max-width: var(--max-layout-width);
+    margin: 0 auto;
+    width: 100%;
+}
+
+:global(.row) {
+    margin: unset;
+}
+
+:global(.col) {
+    padding: unset;
 }
 
 .builtBy {
@@ -34,15 +49,9 @@
 }
 
 .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;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 2.4rem;
     margin-bottom: 20px;
 }
 

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',

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>
+    );
+}

apify-docs-theme/src/theme/Navbar/CTA/styles.module.css

@@ -0,0 +1,49 @@
+.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;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .getStarted {
+    width: 100%;
+  }
+
+  :global(.navbar__inner) .getStarted {
+    display: none;
+  }
+}

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

@@ -4,15 +4,14 @@ 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';
 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 />
                     </>
                 }
             />

apify-docs-theme/src/theme/Navbar/Content/styles.module.css

@@ -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>
+      </>
+    );
+}

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

@@ -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).