feat: overhaul navbar titles & add slack logo and button

docs-website/docusaurus.config.js

@@ -52,16 +52,10 @@ module.exports = {
   },
 
   themeConfig: {
-    ...(!isSaas && {
-      announcementBar: {
-        id: "announcement",
-        content:
-          '<div><img src="/img/acryl-logo-white-mark.svg" /><p><strong>DataHub Cloud</strong><span> &nbsp;Acryl Data delivers an easy to consume DataHub platform for the enterprise</span></p></div> <a href="https://www.acryldata.io/datahub-sign-up?utm_source=datahub&utm_medium=referral&utm_campaign=acryl_signup" target="_blank" class="button button--primary">Sign Up for DataHub Cloud&nbsp;→</a>',
-        backgroundColor: "#070707",
-        textColor: "#ffffff",
-        isCloseable: false,
-      },
-    }),
+    colorMode: {
+      disableSwitch: true,
+      defaultMode: 'light',
+    },
     navbar: {
       title: null,
       logo: {
@@ -70,28 +64,54 @@ module.exports = {
         srcDark: `img/${isSaas ? "acryl" : "datahub"}-logo-color-dark-horizontal.svg`,
       },
       items: [
+        // {
+        //   type: "dropdown",
+        //   label: "Product",
+        //   position: "right",
+        //   items: [
+        //     {
+        //       href: "/",
+        //       label: "DataHub Core",
+        //     },
+        //     {
+        //       to: "/cloud",
+        //       label: "DataHub Cloud",
+        //     },    
+        //   ],
+        // },
         {
-          to: "docs/",
-          activeBasePath: "docs",
-          label: "Docs",
-          position: "right",
-        },
-        {
-          to: "/cloud",
-          activeBasePath: "cloud",
-          label: "Cloud",
+          to: "/integrations",
+          activeBasePath: "integrations",
+          label: "Integrations",
           position: "right",
         },
         {
-          to: "/learn",
-          activeBasePath: "learn",
+          type: "dropdown",
           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",
+            },
+          ]
         },
         {
-          to: "/integrations",
-          activeBasePath: "integrations",
-          label: "Integrations",
+          to: "docs/",
+          activeBasePath: "docs",
+          label: "Docs",
           position: "right",
         },
         {
@@ -101,19 +121,19 @@ module.exports = {
           items: [
             {
               to: "/slack",
-              label: "Join Slack",
+              label: "DataHub Slack",
             },
             {
               href: "https://forum.datahubproject.io/",
-              label: "Community Forum",
+              label: "DataHub Discourse",
             },
             {
               to: "/events",
-              label: "Events",
+              label: "Upcoming Events",
             },
             {
               to: "/champions",
-              label: "Champions",
+              label: "DataHub Champions",
             },
             {
               label: "Share Your Journey",
@@ -122,86 +142,21 @@ module.exports = {
           ],
         },
         {
-          type: "dropdown",
-          label: "Resources",
+          href: "/slack",
+          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",
-          position: "left",
-          dropdownActiveClassDisabled: true,
-            dropdownItemsAfter: [
-                {
-                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",
-                },
-            ],
+          href: "/cloud",
+          html: "<div class='button button--primary button--md'>Try DataHub Cloud Free</div>",
+          position: "right",
         },
       ],
     },
@@ -326,6 +281,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: {