docs(website): styling and other tweaks to main navbar

datahub-project · Oct 18, 2023 · f2fb13b · f2fb13b
1 parent 6bc8315
commit f2fb13b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+}