diff --git a/docusaurus.config.js b/docusaurus.config.js index e20b400..55b2711 100644 --- a/docusaurus.config.js +++ b/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', }, ], diff --git a/src/containers/GlobalStore/GlobalStore.tsx b/src/containers/GlobalStore/GlobalStore.tsx index 1be0710..f725281 100644 --- a/src/containers/GlobalStore/GlobalStore.tsx +++ b/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 = diff --git a/src/css/custom.css b/src/css/custom.css index ca9c1f5..15aeb22 100644 --- a/src/css/custom.css +++ b/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; diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx new file mode 100644 index 0000000..aa5940b --- /dev/null +++ b/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) => ( + + ))} + + ) +} + +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 ( +
+
+ +
+ +
+
+
+ +
+
+ + + +
+
+
+ +
+
+ +
+ + {localeDropdown && } +
+
+ ) +} diff --git a/src/theme/Navbar/Content/styles.module.scss b/src/theme/Navbar/Content/styles.module.scss new file mode 100644 index 0000000..c361cbf --- /dev/null +++ b/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; + } +} diff --git a/src/theme/Navbar/index.scss b/src/theme/Navbar/index.scss new file mode 100644 index 0000000..2a282f6 --- /dev/null +++ b/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 { +} diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx new file mode 100644 index 0000000..05ffc9b --- /dev/null +++ b/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 + +export default function NavbarWrapper(props: Props): JSX.Element { + return ( + <> + + + ) +} diff --git a/static/icons/chevron-left.svg b/static/icons/chevron-left.svg new file mode 100644 index 0000000..f1cdcbd --- /dev/null +++ b/static/icons/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/icons/hamburger-menu.svg b/static/icons/hamburger-menu.svg new file mode 100644 index 0000000..fee9118 --- /dev/null +++ b/static/icons/hamburger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/logo.svg b/static/img/logo.svg index 9db6d0d..2263d40 100644 --- a/static/img/logo.svg +++ b/static/img/logo.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + + + + + + + +