mirror of
https://github.com/datahub-project/datahub.git
synced 2025-12-12 10:35:51 +00:00
feat: add second navbar (#11471)
This commit is contained in:
Hyejin Yoon
GitHub
parent
3366cdf79a
commit
f8dd1a6d84
@ -85,24 +85,36 @@ module.exports = {
|
||||
label: "Docs",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
to: "/cloud",
|
||||
activeBasePath: "cloud",
|
||||
html: "Cloud",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
to: "/learn",
|
||||
activeBasePath: "learn",
|
||||
label: "Learn",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
to: "/integrations",
|
||||
activeBasePath: "integrations",
|
||||
label: "Integrations",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
type: "dropdown",
|
||||
activeBasePath: "learn",
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "dropdown",
|
||||
label: "Community",
|
||||
@ -131,87 +143,29 @@ 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: `
|
||||
<style>
|
||||
.cloud-cta:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
<div class='cloud-cta button button--primary' alt='try-datahub-cloud' style='font-weight: 700;'>Try DataHub Cloud Free</div>
|
||||
`,
|
||||
position: "right",
|
||||
}
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
@ -335,6 +289,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: {
|
||||
|
||||
55
docs-website/src/components/SecondNavbar/SecondNavbar.js
Normal file
55
docs-website/src/components/SecondNavbar/SecondNavbar.js
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import clsx from 'clsx';
|
||||
import { useColorMode } from '@docusaurus/theme-common';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import ColorModeToggle from '@theme/ColorModeToggle';
|
||||
import styles from './styles.module.scss';
|
||||
import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
|
||||
|
||||
function SecondNavbarContent() {
|
||||
const { colorMode, setColorMode } = useColorMode();
|
||||
const location = useLocation();
|
||||
const isDocsPath = location.pathname.startsWith('/docs');
|
||||
if (!isDocsPath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.secondNavbar, colorMode === 'dark' && styles.darkMode)}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.versionDropdown}>
|
||||
<DocsVersionDropdownNavbarItem
|
||||
docsPluginId="default"
|
||||
dropdownItemsBefore={[]}
|
||||
dropdownItemsAfter={[]}
|
||||
dropdownActiveClassDisabled={false}
|
||||
mobile={false}
|
||||
/>
|
||||
</div>
|
||||
<div className={clsx(styles.navbarItemsRight)}>
|
||||
<div className={styles.colorModeToggle}>
|
||||
<ColorModeToggle
|
||||
className="clean-btn toggleButton_node_modules-@docusaurus-theme-classic-lib-theme-ColorModeToggle-styles-module"
|
||||
title={`Switch between dark and light mode (currently ${colorMode} mode)`}
|
||||
aria-label={`Switch between dark and light mode (currently ${colorMode} mode)`}
|
||||
aria-live="polite"
|
||||
onChange={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.searchBox}>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SecondNavbar() {
|
||||
return (
|
||||
<SecondNavbarContent />
|
||||
);
|
||||
}
|
||||
|
||||
export default SecondNavbar;
|
||||
64
docs-website/src/components/SecondNavbar/styles.module.scss
Normal file
64
docs-website/src/components/SecondNavbar/styles.module.scss
Normal file
@ -0,0 +1,64 @@
|
||||
.secondNavbar {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
z-index: 10;
|
||||
color: black;
|
||||
|
||||
&.darkMode {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.container,
|
||||
.coreCloudSwitch,
|
||||
.docsSwitchButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0rem 1rem;
|
||||
}
|
||||
|
||||
.coreCloudSwitch {
|
||||
width: var(--doc-sidebar-width);
|
||||
}
|
||||
|
||||
.docsSwitchButton {
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #007bff;
|
||||
}
|
||||
}
|
||||
|
||||
.activeButton {
|
||||
border-bottom: 2px solid #007bff;
|
||||
}
|
||||
|
||||
.darkMode .docsSwitchButton {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: #4db5ff;
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox,
|
||||
.colorModeToggle {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.navbarItemsRight {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
}
|
||||
@ -344,6 +344,11 @@ div[class^="announcementBar"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide Searchbar in Nav */
|
||||
.navbar--fixed-top .DocSearch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
[data-theme="light"] .DocSearch {
|
||||
|
||||
14
docs-website/src/theme/Layout/index.js
Normal file
14
docs-website/src/theme/Layout/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import Layout from '@theme-original/Layout';
|
||||
import SecondNavbar from '../../components/SecondNavbar/SecondNavbar';
|
||||
|
||||
export default function LayoutWrapper(props) {
|
||||
return (
|
||||
<>
|
||||
<Layout {...props}>
|
||||
<SecondNavbar />
|
||||
{props.children}
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -10,12 +10,13 @@ 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,
|
||||
docsPluginId,
|
||||
dropdownActiveClassDisabled,
|
||||
dropdownItemsBefore,
|
||||
dropdownItemsAfter,
|
||||
docsPluginId = 'default',
|
||||
dropdownActiveClassDisabled = false,
|
||||
dropdownItemsBefore = [],
|
||||
dropdownItemsAfter = [],
|
||||
...props
|
||||
}) {
|
||||
const { search, hash } = useLocation();
|
||||
@ -23,20 +24,60 @@ export default function DocsVersionDropdownNavbarItem({
|
||||
const versions = useVersions(docsPluginId);
|
||||
const { savePreferredVersionName } = useDocsPreferredVersion(docsPluginId);
|
||||
const versionLinks = versions.map((version) => {
|
||||
// We try to link to the same doc, in another version
|
||||
// When not possible, fallback to the "main doc" of the version
|
||||
const versionDoc = activeDocContext.alternateDocVersions[version.name] ?? getVersionMainDoc(version);
|
||||
return {
|
||||
label: version.label,
|
||||
// preserve ?search#hash suffix on version switches
|
||||
to: `${versionDoc.path}${search}${hash}`,
|
||||
isActive: () => version === activeDocContext.activeVersion,
|
||||
onClick: () => savePreferredVersionName(version.name),
|
||||
};
|
||||
});
|
||||
const items = [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter];
|
||||
|
||||
const archivedVersions = [
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
const items = [...dropdownItemsBefore, ...versionLinks, ...archivedVersions, ...dropdownItemsAfter];
|
||||
const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
|
||||
// Mobile dropdown is handled a bit differently
|
||||
const dropdownLabel =
|
||||
mobile && items.length > 1
|
||||
? translate({
|
||||
@ -46,9 +87,7 @@ export default function DocsVersionDropdownNavbarItem({
|
||||
})
|
||||
: dropdownVersion.label;
|
||||
const dropdownTo = mobile && items.length > 1 ? undefined : getVersionMainDoc(dropdownVersion).path;
|
||||
// We don't want to render a version dropdown with 0 or 1 item. If we build
|
||||
// the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
|
||||
// We'd rather render a button instead of a dropdown
|
||||
|
||||
if (items.length <= 1) {
|
||||
return (
|
||||
<DefaultNavbarItem
|
||||
@ -66,9 +105,9 @@ export default function DocsVersionDropdownNavbarItem({
|
||||
className={styles.versionNavItem}
|
||||
mobile={mobile}
|
||||
label={dropdownLabel}
|
||||
to={false} // This component is Swizzled to disable the link here
|
||||
to={false}
|
||||
items={items}
|
||||
isActive={dropdownActiveClassDisabled ? () => false : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user