design: refactor docs navbar (#8975)

Co-authored-by: Jeff Merrick <jeff@wireform.io>
This commit is contained in:
Hyejin Yoon 2023-10-25 09:40:28 +09:00 committed by GitHub
parent ca331f58bd
commit 9a59c452bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 41 deletions

View File

@ -57,44 +57,41 @@ module.exports = {
position: "right",
},
{
to: "https://demo.datahubproject.io/",
label: "Demo",
position: "right",
},
{
href: "https://blog.datahubproject.io/",
label: "Blog",
position: "right",
},
{
href: "https://feature-requests.datahubproject.io/roadmap",
label: "Roadmap",
type: "dropdown",
label: "Resources",
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://slack.datahubproject.io",
label: "Slack",
},
{
href: "https://github.com/datahub-project/datahub",
label: "GitHub",
},
{
href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
label: "YouTube",
},
],
},
{
type: "docsVersionDropdown",
position: "right",
position: "left",
dropdownActiveClassDisabled: true,
},
{
href: "https://slack.datahubproject.io",
"aria-label": "Slack",
position: "right",
className: "item__icon item__slack",
},
{
href: "https://github.com/datahub-project/datahub",
"aria-label": "GitHub",
position: "right",
className: "item__icon item__github",
},
{
href: "https://www.youtube.com/channel/UC3qFQC5IiwR5fvWEqi_tJ5w",
"aria-label": "YouTube",
position: "right",
className: "item__icon item__youtube",
},
],
},
footer: {

View File

@ -144,20 +144,29 @@ div[class^="announcementBar"] {
/** Navbar */
@media only screen and (max-width: 1050px) {
.navbar__toggle {
display: inherit;
}
.navbar__item {
display: none;
}
}
.navbar {
.navbar__logo {
height: 3rem;
}
.navbar__link {
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-color: var(--ifm-navbar-link-hover-color);
}
.navbar__item {
padding: 0.25rem 0;
svg[class*="iconExternalLink"] {
display: none;
}

View File

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

View File

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