-
+
+
+
+
+
+
+
+
);
-};
-
-export default Home;
+}
diff --git a/src/theme/Navbar/ColorModeToggle/index.tsx b/src/theme/Navbar/ColorModeToggle/index.tsx
new file mode 100644
index 000000000..45e106c41
--- /dev/null
+++ b/src/theme/Navbar/ColorModeToggle/index.tsx
@@ -0,0 +1,27 @@
+import React, {type ReactNode} from 'react';
+import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
+import ColorModeToggle from '@theme/ColorModeToggle';
+import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
+
+export default function NavbarColorModeToggle({className}: Props): ReactNode {
+ const navbarStyle = useThemeConfig().navbar.style;
+ const {disableSwitch, respectPrefersColorScheme} = useThemeConfig().colorMode;
+ const {colorModeChoice, setColorMode} = useColorMode();
+
+ if (disableSwitch) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/src/theme/Navbar/ColorModeToggle/styles.module.css b/src/theme/Navbar/ColorModeToggle/styles.module.css
new file mode 100644
index 000000000..7bd077a6b
--- /dev/null
+++ b/src/theme/Navbar/ColorModeToggle/styles.module.css
@@ -0,0 +1,3 @@
+.darkNavbarColorModeToggle:hover {
+ background: var(--ifm-color-gray-800);
+}
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
new file mode 100644
index 000000000..af079baaf
--- /dev/null
+++ b/src/theme/Navbar/Content/index.tsx
@@ -0,0 +1,107 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+ useThemeConfig,
+ ErrorCauseBoundary,
+ ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {
+ splitNavbarItems,
+ useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
+ return (
+ <>
+ {items.map((item, i) => (
+
+ new Error(
+ `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+ {cause: error},
+ )
+ }>
+
+
+ ))}
+
+ );
+}
+
+function NavbarContentLayout({
+ left,
+ right,
+}: {
+ left: ReactNode;
+ right: ReactNode;
+}) {
+ return (
+
+
+ {left}
+
+
+ {right}
+
+
+ );
+}
+
+export default function NavbarContent(): ReactNode {
+ const mobileSidebar = useNavbarMobileSidebar();
+
+ const items = useNavbarItems();
+ const [leftItems, rightItems] = splitNavbarItems(items);
+
+ const searchBarItem = items.find((item) => item.type === 'search');
+
+ return (
+
+ {!mobileSidebar.disabled && }
+
+
+
+ }
+ right={
+ // TODO stop hardcoding items?
+ // Ask the user to add the respective navbar items => more flexible
+ <>
+
+
+ {!searchBarItem && (
+
+
+
+ )}
+
+ }
+ />
+ );
+}
diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css
new file mode 100644
index 000000000..9f080ff96
--- /dev/null
+++ b/src/theme/Navbar/Content/styles.module.css
@@ -0,0 +1,16 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+ .colorModeToggle {
+ display: none;
+ }
+}
+
+/*
+Restore some Infima style that broke with CSS Cascade Layers
+See https://github.com/facebook/docusaurus/pull/11142
+ */
+:global(.navbar__items--right) > :last-child {
+ padding-right: 0;
+}
diff --git a/src/theme/Navbar/Layout/index.tsx b/src/theme/Navbar/Layout/index.tsx
new file mode 100644
index 000000000..9ca34c63e
--- /dev/null
+++ b/src/theme/Navbar/Layout/index.tsx
@@ -0,0 +1,65 @@
+import React, {type ComponentProps, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames, useThemeConfig} from '@docusaurus/theme-common';
+import {
+ useHideableNavbar,
+ useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
+import type {Props} from '@theme/Navbar/Layout';
+
+import styles from './styles.module.css';
+
+function NavbarBackdrop(props: ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export default function NavbarLayout({children}: Props): ReactNode {
+ const {
+ navbar: {hideOnScroll, style},
+ } = useThemeConfig();
+ const mobileSidebar = useNavbarMobileSidebar();
+ const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
+ return (
+
+ );
+}
diff --git a/src/theme/Navbar/Layout/styles.module.css b/src/theme/Navbar/Layout/styles.module.css
new file mode 100644
index 000000000..e72891a44
--- /dev/null
+++ b/src/theme/Navbar/Layout/styles.module.css
@@ -0,0 +1,7 @@
+.navbarHideable {
+ transition: transform var(--ifm-transition-fast) ease;
+}
+
+.navbarHidden {
+ transform: translate3d(0, calc(-100% - 2px), 0);
+}
diff --git a/src/theme/Navbar/Logo/index.tsx b/src/theme/Navbar/Logo/index.tsx
new file mode 100644
index 000000000..72d320a0a
--- /dev/null
+++ b/src/theme/Navbar/Logo/index.tsx
@@ -0,0 +1,12 @@
+import React, {type ReactNode} from 'react';
+import Logo from '@theme/Logo';
+
+export default function NavbarLogo(): ReactNode {
+ return (
+
+ );
+}
diff --git a/src/theme/Navbar/MobileSidebar/Header/index.tsx b/src/theme/Navbar/MobileSidebar/Header/index.tsx
new file mode 100644
index 000000000..dc093540b
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/Header/index.tsx
@@ -0,0 +1,33 @@
+import React, {type ReactNode} from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+
+function CloseButton() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+
+ );
+}
+
+export default function NavbarMobileSidebarHeader(): ReactNode {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/src/theme/Navbar/MobileSidebar/Layout/index.tsx
new file mode 100644
index 000000000..fa88383dc
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -0,0 +1,63 @@
+import React, {version, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
+
+// TODO Docusaurus v4: remove temporary inert workaround
+// See https://github.com/facebook/react/issues/17157
+// See https://github.com/radix-ui/themes/pull/509
+function inertProps(inert: boolean) {
+ const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19;
+ if (isBeforeReact19) {
+ return {inert: inert ? '' : undefined};
+ }
+ return {inert};
+}
+
+function NavbarMobileSidebarPanel({
+ children,
+ inert,
+}: {
+ children: ReactNode;
+ inert: boolean;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default function NavbarMobileSidebarLayout({
+ header,
+ primaryMenu,
+ secondaryMenu,
+}: Props): ReactNode {
+ const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
+ return (
+
+ {header}
+
+
+ {primaryMenu}
+
+
+ {secondaryMenu}
+
+
+
+ {items.map((item, i) => (
+ mobileSidebar.toggle()}
+ key={i}
+ />
+ ))}
+
+ );
+}
diff --git a/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
new file mode 100644
index 000000000..eb4f1e9ff
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
@@ -0,0 +1,32 @@
+import React, {type ComponentProps, type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import Translate from '@docusaurus/Translate';
+
+function SecondaryMenuBackButton(props: ComponentProps<'button'>) {
+ return (
+
+ );
+}
+
+// The secondary menu slides from the right and shows contextual information
+// such as the docs sidebar
+export default function NavbarMobileSidebarSecondaryMenu(): ReactNode {
+ const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0;
+ const secondaryMenu = useNavbarSecondaryMenu();
+ return (
+ <>
+ {/* edge-case: prevent returning to the primaryMenu when it's empty */}
+ {!isPrimaryMenuEmpty && (
+ secondaryMenu.hide()} />
+ )}
+ {secondaryMenu.content}
+
+ );
+}
diff --git a/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
new file mode 100644
index 000000000..d8f9a530d
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
@@ -0,0 +1,23 @@
+import React, {type ReactNode} from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import IconMenu from '@theme/Icon/Menu';
+
+export default function MobileSidebarToggle(): ReactNode {
+ const {toggle, shown} = useNavbarMobileSidebar();
+ return (
+
+ );
+}
diff --git a/src/theme/Navbar/MobileSidebar/index.tsx b/src/theme/Navbar/MobileSidebar/index.tsx
new file mode 100644
index 000000000..6ad1ef045
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/index.tsx
@@ -0,0 +1,44 @@
+import React, {type ReactNode} from 'react';
+import {
+ useLockBodyScroll,
+ useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
+import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
+import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';
+import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';
+
+export default function NavbarMobileSidebar(): ReactNode {
+ const mobileSidebar = useNavbarMobileSidebar();
+ useLockBodyScroll(mobileSidebar.shown);
+
+ // Force render on desktop if we are in the "Citizen" vertical layout mode
+ // We can check window width or just always render it and let CSS hide it if needed.
+ // However, useNavbarMobileSidebar hook might return shouldRender=false on desktop.
+
+ // We override the check.
+ // Note: mobileSidebar.shouldRender is usually true if (mobileSidebar.shown || isMobile)
+ // But on desktop, isMobile is false, and shown is false initially.
+
+ // If we want it to be renderable so we can toggle it via CSS/JS, we should return it.
+ // But wait, if we return it, it might be visible if CSS doesn't hide it.
+ // Our CSS hides it by default on desktop unless .navbar-sidebar--show is present.
+
+ // So let's just render it always, or at least when we want.
+ // But `useLockBodyScroll` might be annoying if it locks body on desktop when we don't want to.
+ // Actually, `mobileSidebar.shown` drives the lock.
+
+ // The issue is `if (!mobileSidebar.shouldRender) return null;`
+ // We will remove this check or modify it.
+
+ // Let's just render it always. The CSS handles visibility.
+ // But we need to be careful about performance? It's fine.
+
+ return (
+ }
+ primaryMenu={}
+ secondaryMenu={}
+ />
+ );
+}
diff --git a/src/theme/Navbar/Search/index.tsx b/src/theme/Navbar/Search/index.tsx
new file mode 100644
index 000000000..4da080c78
--- /dev/null
+++ b/src/theme/Navbar/Search/index.tsx
@@ -0,0 +1,13 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+export default function NavbarSearch({children, className}: Props): ReactNode {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/theme/Navbar/Search/styles.module.css b/src/theme/Navbar/Search/styles.module.css
new file mode 100644
index 000000000..6dfe189df
--- /dev/null
+++ b/src/theme/Navbar/Search/styles.module.css
@@ -0,0 +1,20 @@
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:empty {
+ display: none;
+}
+
+@media (max-width: 996px) {
+ .navbarSearchContainer {
+ position: absolute;
+ right: var(--ifm-navbar-padding-horizontal);
+ }
+}
+
+@media (min-width: 997px) {
+ .navbarSearchContainer {
+ padding: 0 var(--ifm-navbar-item-padding-horizontal);
+ }
+}
diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx
index 26caa47dd..48ce38adb 100644
--- a/src/theme/Navbar/index.tsx
+++ b/src/theme/Navbar/index.tsx
@@ -1,28 +1,11 @@
-import { useLocation } from "@docusaurus/router";
-import type { WrapperProps } from "@docusaurus/types";
-import Navbar from "@theme-original/Navbar";
-import type NavbarType from "@theme/Navbar";
-import { type ReactNode } from "react";
-import { HeroBackground } from "../../components/HeroBackground";
-
-type Props = WrapperProps;
-
-export default function NavbarWrapper(props: Props): ReactNode {
- const location = useLocation();
-
- const combinedClassName = [
- "absolute left-0 w-full text-primary shrink-0 z-1 pointer-events-none transition-all",
- location.pathname === "/" ? "opacity-100" : "opacity-30"
- ]
- .filter(Boolean)
- .join(" ");
-
- return (
-
- );
+import React, {type ReactNode} from 'react';
+import NavbarLayout from '@theme/Navbar/Layout';
+import NavbarContent from '@theme/Navbar/Content';
+
+export default function Navbar(): ReactNode {
+ return (
+
+
+
+ );
}