Skip to content

Commit 7c4f4fc

Browse files
emattiaemattia
authored
Update header (#142)
* update logos * drop r docs * add slack + github links * swizzle navbar * update navbar with logos * fix navbar logo alignment * fix logo placement for different screen sizes * handle dark/light styling better
1 parent 3d24d5a commit 7c4f4fc

13 files changed

+273
-95
lines changed

‎docusaurus.config.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,13 @@ const config = {
7171
type: "doc",
7272
position: "left",
7373
docId: "index",
74-
label: "Python Docs",
75-
},
76-
{
77-
type: "doc",
78-
position: "left",
79-
docId: "v/r/README",
80-
label: "R Docs",
74+
label: "Documentation",
8175
},
8276
{
8377
href: "https://outerbounds.com/docs/admin",
8478
position: "left",
85-
label: "Admin Docs",
86-
},
79+
label: "Deployment Guide",
80+
}
8781
],
8882
hideOnScroll: true,
8983
},

‎src/css/custom.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,7 @@ html[data-theme="dark"] p > img {
138138
--docsearch-primary-color: var(--ifm-color-primary);
139139
--docsearch-highlight-color: var(--ifm-color-primary);
140140
}
141+
142+
html[data-theme='dark'] .githubLogo {
143+
content: url('/img/github-dark.svg');
144+
}

‎src/theme/Navbar/Content/index.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react';
2+
import {useThemeConfig} from '@docusaurus/theme-common';
3+
4+
import {
5+
splitNavbarItems,
6+
useNavbarMobileSidebar,
7+
} from '@docusaurus/theme-common/internal';
8+
import NavbarItem from '@theme/NavbarItem';
9+
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
10+
import SearchBar from '@theme/SearchBar';
11+
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
12+
import NavbarLogo from '@theme/Navbar/Logo';
13+
import NavbarSearch from '@theme/Navbar/Search';
14+
import styles from './styles.module.css';
15+
16+
function useNavbarItems() {
17+
// TODO temporary casting until ThemeConfig type is improved
18+
return useThemeConfig().navbar.items;
19+
}
20+
function NavbarItems({items}) {
21+
return (
22+
<>
23+
{items.map((item, i) => (
24+
<NavbarItem {...item} key={i} />
25+
))}
26+
</>
27+
);
28+
}
29+
function NavbarContentLayout({left, right}) {
30+
return (
31+
<div className="navbar__inner">
32+
<div className="navbar__items">{left}</div>
33+
<div className="navbar__items navbar__items--right">
34+
{right}
35+
</div>
36+
</div>
37+
);
38+
}
39+
export default function NavbarContent() {
40+
const mobileSidebar = useNavbarMobileSidebar();
41+
const items = useNavbarItems();
42+
const [leftItems, rightItems] = splitNavbarItems(items);
43+
const searchBarItem = items.find((item) => item.type === 'search');
44+
45+
return (
46+
<NavbarContentLayout
47+
left={
48+
<>
49+
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
50+
<NavbarLogo />
51+
<NavbarItems items={leftItems} />
52+
</>
53+
}
54+
right={
55+
<>
56+
<div
57+
style={{
58+
display: 'flex',
59+
alignItems: 'center',
60+
}}
61+
>
62+
<div
63+
className={styles.responsivePadding}
64+
style={{
65+
display: 'flex',
66+
alignItems: 'center',
67+
gap: '0.75rem',
68+
}}
69+
>
70+
<a
71+
href="https://github.com/Netflix/metaflow"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
aria-label="GitHub"
75+
>
76+
<img src="/img/github.svg" alt="GitHub" className={`${styles.logo} githubLogo`}/>
77+
78+
</a>
79+
<a
80+
href="http://slack.outerbounds.co/"
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
aria-label="Slack"
84+
>
85+
<img
86+
className={styles.logo}
87+
src="/img/slack.svg"
88+
alt="Slack"
89+
/>
90+
</a>
91+
</div>
92+
93+
{/* Color mode toggle */}
94+
<NavbarColorModeToggle className={styles.colorModeToggle} />
95+
96+
{/* Search bar (if no search item in config) */}
97+
{!searchBarItem && (
98+
<NavbarSearch>
99+
<SearchBar />
100+
</NavbarSearch>
101+
)}
102+
103+
</div>
104+
105+
</>
106+
107+
}
108+
/>
109+
);
110+
}

‎src/theme/Navbar/Content/styles.module.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
Hide color mode toggle in small viewports
3+
*/
4+
@media (max-width: 996px) {
5+
.colorModeToggle {
6+
display: none;
7+
}
8+
}
9+
10+
@media (max-width: 768px) {
11+
.responsivePadding {
12+
padding-right: 3.5rem; /* Adjust value for smaller screens */
13+
}
14+
}
15+
16+
@media (min-width: 769px) and (max-width: 995px) {
17+
.responsivePadding {
18+
padding-right: 11rem; /* Default value for larger screens */
19+
}
20+
}
21+
22+
@media (min-width: 996px) {
23+
.responsivePadding {
24+
padding-right: 1rem; /* Default value for widths greater than 996px */
25+
}
26+
}
27+
28+
.logo {
29+
display: block;
30+
width: 20px;
31+
height: 20px;
32+
opacity: 0.75;
33+
}
34+
35+
.logo:hover {
36+
width: 24px;
37+
height: 24px;
38+
opacity: 1;
39+
}

‎src/theme/Navbar/Layout/index.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import {useThemeConfig} from '@docusaurus/theme-common';
4+
import {
5+
useHideableNavbar,
6+
useNavbarMobileSidebar,
7+
} from '@docusaurus/theme-common/internal';
8+
import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
9+
import styles from './styles.module.css';
10+
function NavbarBackdrop(props) {
11+
return (
12+
<div
13+
role="presentation"
14+
{...props}
15+
className={clsx('navbar-sidebar__backdrop', props.className)}
16+
/>
17+
);
18+
}
19+
export default function NavbarLayout({children}) {
20+
const {
21+
navbar: {hideOnScroll, style},
22+
} = useThemeConfig();
23+
const mobileSidebar = useNavbarMobileSidebar();
24+
const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
25+
return (
26+
<nav
27+
ref={navbarRef}
28+
className={clsx(
29+
'navbar',
30+
'navbar--fixed-top',
31+
hideOnScroll && [
32+
styles.navbarHideable,
33+
!isNavbarVisible && styles.navbarHidden,
34+
],
35+
{
36+
'navbar--dark': style === 'dark',
37+
'navbar--primary': style === 'primary',
38+
'navbar-sidebar--show': mobileSidebar.shown,
39+
},
40+
)}>
41+
{children}
42+
<NavbarBackdrop onClick={mobileSidebar.toggle} />
43+
<NavbarMobileSidebar />
44+
</nav>
45+
);
46+
}

‎src/theme/Navbar/Layout/styles.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.navbarHideable {
2+
transition: transform var(--ifm-transition-fast) ease;
3+
}
4+
5+
.navbarHidden {
6+
transform: translate3d(0, calc(-100% - 2px), 0);
7+
}

‎src/theme/Navbar/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import NavbarLayout from '@theme/Navbar/Layout';
3+
import NavbarContent from '@theme/Navbar/Content';
4+
export default function Navbar() {
5+
return (
6+
<NavbarLayout>
7+
<NavbarContent />
8+
</NavbarLayout>
9+
);
10+
}

‎static/.DS_Store

-10 KB
Binary file not shown.

‎static/img/Metaflow_Logo_Horizontal_OneColor_DarkBlue_RGB.svg

Lines changed: 3 additions & 43 deletions
Loading

‎static/img/Metaflow_Logo_Horizontal_OneColor_White_RGB.svg

Lines changed: 3 additions & 43 deletions
Loading

‎static/img/github-dark.svg

Lines changed: 15 additions & 0 deletions
Loading

‎static/img/github.svg

Lines changed: 15 additions & 0 deletions
Loading

‎static/img/slack.svg

Lines changed: 18 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)