feat: add second navbar (#11471)

docs-website/docusaurus.config.js

@@ -85,24 +85,36 @@ module.exports = {
           label: "Docs",
           position: "right",
         },
-        {
-          to: "/cloud",
-          activeBasePath: "cloud",
-          html: "Cloud",
-          position: "right",
-        },
-        {
-          to: "/learn",
-          activeBasePath: "learn",
-          label: "Learn",
-          position: "right",
-        },
         {
           to: "/integrations",
           activeBasePath: "integrations",
           label: "Integrations",
           position: "right",
         },
+        {
+          type: "dropdown",
+          activeBasePath: "learn",
+          label: "Learn",
+          position: "right",
+          items: [
+            {
+              to: "/learn",
+              label: "Use Cases",
+            },
+            {
+              to: "/adoption-stories",
+              label: "Adoption Stories",
+            },
+            {
+              href: "https://blog.datahubproject.io/",
+              label: "Blog",
+            },
+            {
+              href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
+              label: "YouTube",
+            },
+          ],
+        },
         {
           type: "dropdown",
           label: "Community",
@@ -131,87 +143,29 @@ module.exports = {
           ],
         },
         {
-          type: "dropdown",
+          href: "/slack",
-          label: "Resources",
+          html: `
+            <style>
+              .slack-logo:hover {
+                opacity: 0.8;
+              }
+            </style>
+            <img class='slack-logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg', alt='slack', height='20px' style='margin: 10px 0 0 0;'/>
+          `,
           position: "right",
-          items: [
-            {
-              href: "https://demo.datahubproject.io/",
-              label: "Demo",
-            },
-            {
-              href: "https://blog.datahubproject.io/",
-              label: "Blog",
-            },
-            {
-              href: "https://feature-requests.datahubproject.io/roadmap",
-              label: "Roadmap",
-            },
-            {
-              href: "https://github.com/datahub-project/datahub",
-              label: "GitHub",
-            },
-            {
-              href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
-              label: "YouTube",
-            },
-            {
-              href: "/adoption-stories",
-              label: "Adoption Stories",
-            },
-            {
-              href: "https://www.youtube.com/playlist?list=PLdCtLs64vZvErAXMiqUYH9e63wyDaMBgg",
-              label: "DataHub Basics",
-            },
-          ],
         },
         {
-          type: "docsVersionDropdown",
+          href: "/cloud",
-          position: "left",
+          html: `
-          dropdownActiveClassDisabled: true,
+            <style>
-            dropdownItemsAfter: [
+              .cloud-cta:hover {
-                {
+                opacity: 0.8;
-                type: 'html',
+              }
-                value: '<hr class="dropdown-separator" style="margin: 0.4rem;">',
+            </style>
-                },
+            <div class='cloud-cta button button--primary' alt='try-datahub-cloud' style='font-weight: 700;'>Try DataHub Cloud Free</div>
-                {
+          `,
-                type: 'html',
+          position: "right",
-                value: '<div class="dropdown__link"><b>Archived versions</b></div>',
+        }
-                },
-                {
-                value: `
-                   <a class="dropdown__link" href="https://docs-website-lzxh86531-acryldata.vercel.app/docs/features">0.13.0
-                   <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
-                   </a>
-                   `,
-                type: "html",
-                },
-                {
-                value: `
-                   <a class="dropdown__link" href="https://docs-website-2uuxmgza2-acryldata.vercel.app/docs/features">0.12.1
-                   <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
-                   </a>
-                   `,
-                type: "html",
-                },
-                {
-                value: `
-                   <a class="dropdown__link" href="https://docs-website-irpoe2osc-acryldata.vercel.app/docs/features">0.11.0
-                   <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
-                   </a>
-                   `,
-                type: "html",
-                },
-                {
-                value: `
-                   <a class="dropdown__link" href="https://docs-website-1gv2yzn9d-acryldata.vercel.app/docs/features">0.10.5
-                   <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
-                   </a>
-                   `,
-                type: "html",
-                },
-            ],
-        },
       ],
     },
     footer: {
@@ -335,6 +289,7 @@ module.exports = {
             require.resolve("./src/styles/global.scss"),
             require.resolve("./src/styles/sphinx.scss"),
             require.resolve("./src/styles/config-table.scss"),
+            require.resolve("./src/components/SecondNavbar/styles.module.scss"),
           ],
         },
         pages: {

docs-website/src/components/SecondNavbar/SecondNavbar.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+import { useColorMode } from '@docusaurus/theme-common';
+import SearchBar from '@theme/SearchBar';
+import ColorModeToggle from '@theme/ColorModeToggle';
+import styles from './styles.module.scss';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+function SecondNavbarContent() {
+  const { colorMode, setColorMode } = useColorMode();
+  const location = useLocation();
+  const isDocsPath = location.pathname.startsWith('/docs');
+  if (!isDocsPath) {
+    return null;
+  }
+
+  return (
+    <div className={clsx(styles.secondNavbar, colorMode === 'dark' && styles.darkMode)}>
+      <div className={styles.container}>
+        <div className={styles.versionDropdown}>
+          <DocsVersionDropdownNavbarItem
+            docsPluginId="default"
+            dropdownItemsBefore={[]}
+            dropdownItemsAfter={[]}
+            dropdownActiveClassDisabled={false}
+            mobile={false}
+          />
+        </div>
+        <div className={clsx(styles.navbarItemsRight)}>
+          <div className={styles.colorModeToggle}>
+            <ColorModeToggle
+              className="clean-btn toggleButton_node_modules-@docusaurus-theme-classic-lib-theme-ColorModeToggle-styles-module"
+              title={`Switch between dark and light mode (currently ${colorMode} mode)`}
+              aria-label={`Switch between dark and light mode (currently ${colorMode} mode)`}
+              aria-live="polite"
+              onChange={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}
+            />
+          </div>
+          <div className={styles.searchBox}>
+            <SearchBar />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SecondNavbar() {
+  return (
+      <SecondNavbarContent />
+  );
+}
+
+export default SecondNavbar;

docs-website/src/components/SecondNavbar/styles.module.scss

@@ -0,0 +1,64 @@
+.secondNavbar {
+  background-color: #fff;
+  border-bottom: 1px solid #eaeaea;
+  z-index: 10;
+  color: black;
+
+  &.darkMode {
+    background-color: #000;
+    color: #fff;
+  }
+}
+
+.container,
+.coreCloudSwitch,
+.docsSwitchButton {
+  display: flex;
+  align-items: center;
+  height: 50px;
+}
+
+.container {
+  padding: 0rem 1rem;
+}
+
+.coreCloudSwitch {
+  width: var(--doc-sidebar-width);
+}
+
+.docsSwitchButton {
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  font-size: 1.1rem;
+  color: black;
+  text-decoration: none;
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: none;
+    color: #007bff;
+  }
+}
+
+.activeButton {
+  border-bottom: 2px solid #007bff;
+}
+
+.darkMode .docsSwitchButton {
+  color: white;
+
+  &:hover {
+    color: #4db5ff;
+  }
+}
+
+.searchBox,
+.colorModeToggle {
+  padding: 0.5rem 1rem;
+}
+
+.navbarItemsRight {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+}

docs-website/src/styles/global.scss

@@ -344,6 +344,11 @@ div[class^="announcementBar"] {
   }
 }
 
+/* Hide Searchbar in Nav */
+.navbar--fixed-top .DocSearch {
+  display: none;
+}
+
 /* Search */
 
 [data-theme="light"] .DocSearch {

docs-website/src/theme/Layout/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Layout from '@theme-original/Layout';
+import SecondNavbar from '../../components/SecondNavbar/SecondNavbar';
+
+export default function LayoutWrapper(props) {
+  return (
+    <>
+      <Layout {...props}>
+        <SecondNavbar />
+        {props.children}
+      </Layout>
+    </>
+  );
+}

docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -10,12 +10,13 @@ import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem";
 import styles from "./styles.module.scss";
 
 const getVersionMainDoc = (version) => version.docs.find((doc) => doc.id === version.mainDocId);
+
 export default function DocsVersionDropdownNavbarItem({
   mobile,
-  docsPluginId,
+  docsPluginId = 'default',
-  dropdownActiveClassDisabled,
+  dropdownActiveClassDisabled = false,
-  dropdownItemsBefore,
+  dropdownItemsBefore = [],
-  dropdownItemsAfter,
+  dropdownItemsAfter = [],
   ...props
 }) {
   const { search, hash } = useLocation();
@@ -23,20 +24,60 @@ export default function DocsVersionDropdownNavbarItem({
   const versions = useVersions(docsPluginId);
   const { savePreferredVersionName } = useDocsPreferredVersion(docsPluginId);
   const versionLinks = versions.map((version) => {
-    // We try to link to the same doc, in another version
-    // When not possible, fallback to the "main doc" of the version
     const versionDoc = activeDocContext.alternateDocVersions[version.name] ?? getVersionMainDoc(version);
     return {
       label: version.label,
-      // preserve ?search#hash suffix on version switches
       to: `${versionDoc.path}${search}${hash}`,
       isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };
   });
-  const items = [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter];
+
+  const archivedVersions = [
+    {
+      type: 'html',
+      value: '<hr class="dropdown-separator" style="margin: 0.4rem;">',
+    },
+    {
+      type: 'html',
+      value: '<div class="dropdown__link"><b>Archived versions</b></div>',
+    },
+    {
+      value: `
+         <a class="dropdown__link" href="https://docs-website-lzxh86531-acryldata.vercel.app/docs/features">0.13.0
+         <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+         </a>
+      `,
+      type: "html",
+    },
+    {
+      value: `
+         <a class="dropdown__link" href="https://docs-website-2uuxmgza2-acryldata.vercel.app/docs/features">0.12.1
+         <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+         </a>
+      `,
+      type: "html",
+    },
+    {
+      value: `
+         <a class="dropdown__link" href="https://docs-website-irpoe2osc-acryldata.vercel.app/docs/features">0.11.0
+         <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+         </a>
+      `,
+      type: "html",
+    },
+    {
+      value: `
+         <a class="dropdown__link" href="https://docs-website-1gv2yzn9d-acryldata.vercel.app/docs/features">0.10.5
+         <svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+         </a>
+      `,
+      type: "html",
+    },
+  ];
+
+  const items = [...dropdownItemsBefore, ...versionLinks, ...archivedVersions, ...dropdownItemsAfter];
   const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
-  // Mobile dropdown is handled a bit differently
   const dropdownLabel =
     mobile && items.length > 1
       ? translate({
@@ -46,9 +87,7 @@ export default function DocsVersionDropdownNavbarItem({
         })
       : dropdownVersion.label;
   const dropdownTo = mobile && items.length > 1 ? undefined : getVersionMainDoc(dropdownVersion).path;
-  // We don't want to render a version dropdown with 0 or 1 item. If we build
+
-  // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
-  // We'd rather render a button instead of a dropdown
   if (items.length <= 1) {
     return (
       <DefaultNavbarItem
@@ -66,9 +105,9 @@ export default function DocsVersionDropdownNavbarItem({
       className={styles.versionNavItem}
       mobile={mobile}
       label={dropdownLabel}
-      to={false} // This component is Swizzled to disable the link here
+      to={false}
       items={items}
       isActive={dropdownActiveClassDisabled ? () => false : undefined}
     />
   );
-}
+}