customize header layout.

docusaurus.config.js

@@ -59,7 +59,7 @@ const config = {
     ({
       docs: { sidebar: { hideable: true } },
       navbar: {
-        title: 'My Site',
+        title: '',
         logo: {
           alt: 'My Site Logo',
           src: 'img/logo.svg',
@@ -71,10 +71,8 @@ const config = {
             position: 'left',
             label: 'Tutorial',
           },
-          { to: '/blog', label: 'Blog', position: 'left' },
           {
-            href: 'https://github.com/facebook/docusaurus',
-            label: 'GitHub',
+            type: 'localeDropdown',
             position: 'right',
           },
         ],

src/containers/GlobalStore/GlobalStore.tsx

@@ -6,6 +6,7 @@ export namespace GlobalStore {
   }
 
   export type Actions = {
+    toggleSidebar: () => void
     setHiddenSidebar: (payload: any) => void
   }
 
@@ -14,6 +15,9 @@ export namespace GlobalStore {
 
 export const globalStore = new GlobalStore.Store(() => {
   return {
+    toggleSidebar: (payload, state, setState, dispatch) => {
+      setState((state) => void (state.hiddenSidebar = !state.hiddenSidebar))
+    },
     setHiddenSidebar: (payload, state, setState, dispatch) => {
       setState((state) => {
         state.hiddenSidebar =

src/css/custom.css

@@ -29,6 +29,7 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+/* sidebar */
 :root {
   --doc-sidebar-width: 16.66vw !important;
   --doc-sidebar-max-width: 320px;

src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,87 @@
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import {
+  globalStore,
+  selectHiddenSidebar,
+} from '@site/src/containers/GlobalStore'
+import ChevronIcon from '@site/static/icons/chevron-left.svg'
+import HamburgerIcon from '@site/static/icons/hamburger-menu.svg'
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
+import NavbarLogo from '@theme/Navbar/Logo'
+import NavbarSearch from '@theme/Navbar/Search'
+import NavbarItem, { Props as NavbarItemConfig } from '@theme/NavbarItem'
+import SearchBar from '@theme/SearchBar'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.scss'
+
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items as NavbarItemConfig[]
+}
+
+function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element {
+  return (
+    <>
+      {items.map((item, i) => (
+        <NavbarItem {...item} key={i} />
+      ))}
+    </>
+  )
+}
+
+export default function NavbarContent(): JSX.Element {
+  const mobileSidebar = useNavbarMobileSidebar()
+
+  const items = useNavbarItems()
+
+  const dispatch = globalStore.useDispatch()
+  const hiddenDesktopSidebar = globalStore.useSelector(selectHiddenSidebar)
+
+  const localeDropdown = items.find((item) => item.type === 'localeDropdown')
+  const links = items.filter(
+    (item) => item.type === 'doc' || !!(item as any).to,
+  )
+
+  return (
+    <div className={clsx('row', styles.root)}>
+      <div className="col col--2">
+        <button
+          onClick={dispatch.toggleSidebar}
+          className={styles.sidebarButton}
+        >
+          {!hiddenDesktopSidebar ? <ChevronIcon /> : <HamburgerIcon />}
+        </button>
+      </div>
+
+      <div className={clsx('col', styles.headerMiddle)}>
+        <div
+          className={clsx(
+            styles.menu,
+            styles.leftContainer,
+            hiddenDesktopSidebar && styles.shifted,
+          )}
+        >
+          <div className={styles.navbarLogoWrapper}>
+            <NavbarLogo />
+          </div>
+          <div>
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          </div>
+        </div>
+        <div>
+          <nav className={styles.menu}>
+            <NavbarItems items={links} />
+          </nav>
+        </div>
+      </div>
+
+      <div className={clsx('col col--5', styles.headerRight)}>
+        <NavbarColorModeToggle />
+        {localeDropdown && <NavbarItem {...localeDropdown} />}
+      </div>
+    </div>
+  )
+}

src/theme/Navbar/Content/styles.module.scss

@@ -0,0 +1,112 @@
+@use '@site/src/css/utils';
+
+.root {
+  width: 100%;
+  margin: 0;
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: 0;
+  }
+
+  & > div:first-child {
+    max-width: var(--doc-sidebar-max-width);
+  }
+
+  & > .headerMiddle {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
+
+.leftContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  transition: 0.2s;
+  transform: translateX(0);
+
+  &.shifted {
+    transform: translateX(
+      calc(-1 * min(var(--doc-sidebar-max-width), 16.66vw) + 64px)
+    );
+  }
+}
+
+.headerRight {
+  justify-content: flex-end;
+}
+
+.navbarLogoWrapper {
+  & > * {
+    margin: 0;
+  }
+}
+
+.menu {
+  @extend %menu-common;
+
+  display: flex;
+  flex-direction: row;
+}
+
+.sidebarButton {
+  border: none;
+  background: none;
+
+  cursor: pointer;
+
+  @extend %menu-common;
+
+  width: 52px;
+  height: 46px;
+}
+
+%menu-common {
+  padding: 6px;
+  background-color: var(--ifm-background-surface-color);
+  border-radius: 1rem;
+}
+
+@include utils.responsive('lg', 'down') {
+  .root {
+    padding: 0 var(--ifm-spacing-horizontal);
+  }
+
+  .root > * {
+    width: auto;
+    flex: 0 0 auto !important;
+    padding: 0;
+  }
+
+  .headerLeft {
+  }
+
+  .headerMiddle {
+    margin-left: 20px;
+
+    .leftContainer.shifted {
+      transform: none;
+    }
+
+    nav {
+      display: none;
+    }
+  }
+
+  .headerRight {
+    display: none !important;
+  }
+}
+
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}

src/theme/Navbar/index.scss

@@ -0,0 +1,10 @@
+.navbar {
+  --ifm-navbar-height: 3.875rem;
+  --ifm-navbar-background-color: none;
+  --ifm-navbar-shadow: none;
+  --ifm-navbar-padding-horizontal: 0px;
+  --ifm-navbar-padding-vertical: 8px;
+}
+
+:root {
+}

src/theme/Navbar/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Navbar from '@theme-original/Navbar'
+import type NavbarType from '@theme/Navbar'
+import type { WrapperProps } from '@docusaurus/types'
+import './index.scss'
+
+type Props = WrapperProps<typeof NavbarType>
+
+export default function NavbarWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <Navbar {...props} />
+    </>
+  )
+}

static/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7647 5.29407L7.05884 9.99995L11.7647 14.7058" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/icons/hamburger-menu.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="34" viewBox="0 0 40 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 12C9.44772 12 9 12.4477 9 13C9 13.5523 9.44772 14 10 14H30C30.5523 14 31 13.5523 31 13C31 12.4477 30.5523 12 30 12H10ZM10 20C9.44772 20 9 20.4477 9 21C9 21.5523 9.44772 22 10 22H30C30.5523 22 31 21.5523 31 21C31 20.4477 30.5523 20 30 20H10Z" fill="black"/>
+</svg>