mirror of
https://github.com/datahub-project/datahub.git
synced 2025-11-02 11:49:23 +00:00
design: refactor docs navbar (#8975)
Co-authored-by: Jeff Merrick <jeff@wireform.io>
This commit is contained in:
parent
ca331f58bd
commit
9a59c452bf
@ -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: {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
8
docs-website/src/theme/NavbarItem/styles.module.scss
Normal file
8
docs-website/src/theme/NavbarItem/styles.module.scss
Normal 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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user