From f2fb13b0c79b433c9d3d34b729d240c03452a9d7 Mon Sep 17 00:00:00 2001
From: Jeff Merrick <jeff@wireform.io>
Date: Wed, 18 Oct 2023 14:09:07 -0500
Subject: [PATCH] docs(website): styling and other tweaks to main navbar

---
 docs-website/docusaurus.config.js             | 22 ++++++++---------
 docs-website/src/styles/global.scss           | 24 +++++++++----------
 .../DocsVersionDropdownNavbarItem.js          |  4 ++++
 .../src/theme/NavbarItem/styles.module.scss   |  8 +++++++
 4 files changed, 35 insertions(+), 23 deletions(-)
 create mode 100644 docs-website/src/theme/NavbarItem/styles.module.scss

diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js
index 92b15f14b6774..c216ee97336f4 100644
--- a/docs-website/docusaurus.config.js
+++ b/docs-website/docusaurus.config.js
@@ -50,33 +50,33 @@ module.exports = {
           position: "right",
         },
         {
-          type: 'dropdown',
-          label: 'Resources',
-          position: 'right',
+          type: "dropdown",
+          label: "Resources",
+          position: "right",
           items: [
             {
-              to: "https://demo.datahubproject.io/",
+              href: "https://demo.datahubproject.io/",
               label: "Demo",
             },
             {
-              to: "https://blog.datahubproject.io/",
+              href: "https://blog.datahubproject.io/",
               label: "Blog",
             },
             {
-              to: "https://feature-requests.datahubproject.io/roadmap",
+              href: "https://feature-requests.datahubproject.io/roadmap",
               label: "Roadmap",
             },
             {
-              to: "https://slack.datahubproject.io",
+              href: "https://slack.datahubproject.io",
               label: "Slack",
             },
             {
-              to: "https://github.com/datahub-project/datahub",
-              label: "Github",
+              href: "https://github.com/datahub-project/datahub",
+              label: "GitHub",
             },
             {
-              to: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
-              label: "Youtube",
+              href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
+              label: "YouTube",
             },
           ],
         },
diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss
index de18e4ec5b0c7..16e3893ed08b7 100644
--- a/docs-website/src/styles/global.scss
+++ b/docs-website/src/styles/global.scss
@@ -144,26 +144,26 @@ div[class^="announcementBar"] {
 
 /** Navbar */
 
-@media only screen and (max-width: 1050px) {
-  .navbar__toggle {
-    display: inherit;
-  }
-  .navbar__item {
-  }
-}
-
 .navbar {
   .navbar__logo {
     height: 3rem;
   }
 
   .navbar__link {
-     align-items: center;
-     margin: 0 1rem 0;
-     padding: 0;
+    align-items: center;
+    margin: 0 1rem 0;
+    padding: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  .dropdown > .navbar__link:after {
+    top: -1px;
+    border-width: 0.3em 0.3em 0;
+    margin-left: 0.4em;
   }
+
   .navbar__link--active {
-    border-bottom: 2px solid var(--ifm-navbar-link-hover-color);
+    border-bottom-color: var(--ifm-navbar-link-hover-color);
   }
   .navbar__item {
     padding: 0.25rem 0;
diff --git a/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js b/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
index cc04ab23d3cf3..661d64392e67f 100644
--- a/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
+++ b/docs-website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
@@ -6,6 +6,9 @@ import { translate } from "@docusaurus/Translate";
 import { useLocation } from "@docusaurus/router";
 import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem";
 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,
@@ -60,6 +63,7 @@ export default function DocsVersionDropdownNavbarItem({
   return (
     <DropdownNavbarItem
       {...props}
+      className={styles.versionNavItem}
       mobile={mobile}
       label={dropdownLabel}
       to={false} // This component is Swizzled to disable the link here
diff --git a/docs-website/src/theme/NavbarItem/styles.module.scss b/docs-website/src/theme/NavbarItem/styles.module.scss
new file mode 100644
index 0000000000000..d533115a9c9f0
--- /dev/null
+++ b/docs-website/src/theme/NavbarItem/styles.module.scss
@@ -0,0 +1,8 @@
+.versionNavItem {
+  margin-left: 0 !important;
+  padding: 0.2em 1em !important;
+  display: block;
+  border-radius: var(--ifm-button-border-radius) !important;
+  color: var(--ifm-menu-color-active);
+  background: var(--ifm-menu-color-background-active);
+}