|
| 1 | +diff --git a/docs/website/src/theme/Navbar/Content/index.tsx b/docs/website/src/theme/Navbar/Content/index.tsx |
| 2 | +index 43f2a1e73..2c98c10ac 100644 |
| 3 | +--- a/docs/website/src/theme/Navbar/Content/index.tsx |
| 4 | ++++ b/docs/website/src/theme/Navbar/Content/index.tsx |
| 5 | +@@ -1,29 +1,24 @@ |
| 6 | +-import React, { type ReactNode } from "react"; |
| 7 | +-import clsx from "clsx"; |
| 8 | +-import { |
| 9 | +- useThemeConfig, |
| 10 | +- ErrorCauseBoundary, |
| 11 | +- ThemeClassNames, |
| 12 | +-} from "@docusaurus/theme-common"; |
| 13 | ++import React from "react"; |
| 14 | ++import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common"; |
| 15 | + import { |
| 16 | + splitNavbarItems, |
| 17 | + useNavbarMobileSidebar, |
| 18 | + } from "@docusaurus/theme-common/internal"; |
| 19 | +-import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem"; |
| 20 | ++import NavbarItem from "@theme/NavbarItem"; |
| 21 | + import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; |
| 22 | + import SearchBar from "@theme/SearchBar"; |
| 23 | + import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; |
| 24 | + import NavbarLogo from "@theme/Navbar/Logo"; |
| 25 | + import NavbarSearch from "@theme/Navbar/Search"; |
| 26 | +- |
| 27 | + import styles from "./styles.module.css"; |
| 28 | ++import Discord from "../../../components/icons/Discord"; |
| 29 | ++import Github from "../../../components/icons/Github"; |
| 30 | + |
| 31 | + function useNavbarItems() { |
| 32 | + // TODO temporary casting until ThemeConfig type is improved |
| 33 | +- return useThemeConfig().navbar.items as NavbarItemConfig[]; |
| 34 | ++ return useThemeConfig().navbar.items; |
| 35 | + } |
| 36 | +- |
| 37 | +-function NavbarItems({ items }: { items: NavbarItemConfig[] }): ReactNode { |
| 38 | ++function NavbarItems({ items }) { |
| 39 | + return ( |
| 40 | + <> |
| 41 | + {items.map((item, i) => ( |
| 42 | +@@ -44,57 +39,28 @@ ${JSON.stringify(item, null, 2)}`, |
| 43 | + </> |
| 44 | + ); |
| 45 | + } |
| 46 | +- |
| 47 | +-function NavbarContentLayout({ |
| 48 | +- left, |
| 49 | +- right, |
| 50 | +-}: { |
| 51 | +- left: ReactNode; |
| 52 | +- right: ReactNode; |
| 53 | +-}) { |
| 54 | ++function NavbarContentLayout({ left, right }) { |
| 55 | + return ( |
| 56 | + <div className="navbar__inner"> |
| 57 | +- <div |
| 58 | +- className={clsx( |
| 59 | +- ThemeClassNames.layout.navbar.containerLeft, |
| 60 | +- "navbar__items", |
| 61 | +- )} |
| 62 | +- > |
| 63 | +- {left} |
| 64 | +- </div> |
| 65 | +- <div |
| 66 | +- className={clsx( |
| 67 | +- ThemeClassNames.layout.navbar.containerRight, |
| 68 | +- "navbar__items navbar__items--right", |
| 69 | +- )} |
| 70 | +- > |
| 71 | +- {right} |
| 72 | +- </div> |
| 73 | ++ <div className="navbar__items">{left}</div> |
| 74 | ++ <div className="navbar__items navbar__items--right">{right}</div> |
| 75 | + </div> |
| 76 | + ); |
| 77 | + } |
| 78 | +- |
| 79 | +-export default function NavbarContent(): ReactNode { |
| 80 | ++export default function NavbarContent() { |
| 81 | + const mobileSidebar = useNavbarMobileSidebar(); |
| 82 | +- |
| 83 | + const items = useNavbarItems(); |
| 84 | + const [leftItems, rightItems] = splitNavbarItems(items); |
| 85 | +- |
| 86 | + const searchBarItem = items.find((item) => item.type === "search"); |
| 87 | +- |
| 88 | + return ( |
| 89 | + <NavbarContentLayout |
| 90 | + left={ |
| 91 | +- // TODO stop hardcoding items? |
| 92 | + <> |
| 93 | +- {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />} |
| 94 | + <NavbarLogo /> |
| 95 | + <NavbarItems items={leftItems} /> |
| 96 | + </> |
| 97 | + } |
| 98 | + right={ |
| 99 | +- // TODO stop hardcoding items? |
| 100 | +- // Ask the user to add the respective navbar items => more flexible |
| 101 | + <> |
| 102 | + <NavbarItems items={rightItems} /> |
| 103 | + <NavbarColorModeToggle className={styles.colorModeToggle} /> |
| 104 | +@@ -103,6 +69,23 @@ export default function NavbarContent(): ReactNode { |
| 105 | + <SearchBar /> |
| 106 | + </NavbarSearch> |
| 107 | + )} |
| 108 | ++ <a |
| 109 | ++ href="https://github.com/input-output-hk/mithril/" |
| 110 | ++ target="_blank" |
| 111 | ++ rel="noopener noreferrer" |
| 112 | ++ className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden" |
| 113 | ++ > |
| 114 | ++ <Github /> |
| 115 | ++ </a> |
| 116 | ++ <a |
| 117 | ++ href="https://discord.gg/5kaErDKDRq" |
| 118 | ++ target="_blank" |
| 119 | ++ rel="noopener noreferrer" |
| 120 | ++ className="hover:text-[var(--ifm-navbar-link-hover-color)] mx-3 py-1 laptop:flex hidden" |
| 121 | ++ > |
| 122 | ++ <Discord /> |
| 123 | ++ </a> |
| 124 | ++ {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />} |
| 125 | + </> |
| 126 | + } |
| 127 | + /> |
| 128 | +diff --git a/docs/website/src/theme/Navbar/Content/styles.module.css b/docs/website/src/theme/Navbar/Content/styles.module.css |
| 129 | +index 9f080ff96..4c9471e10 100644 |
| 130 | +--- a/docs/website/src/theme/Navbar/Content/styles.module.css |
| 131 | ++++ b/docs/website/src/theme/Navbar/Content/styles.module.css |
| 132 | +@@ -6,11 +6,3 @@ Hide color mode toggle in small viewports |
| 133 | + display: none; |
| 134 | + } |
| 135 | + } |
| 136 | +- |
| 137 | +-/* |
| 138 | +-Restore some Infima style that broke with CSS Cascade Layers |
| 139 | +-See https://github.com/facebook/docusaurus/pull/11142 |
| 140 | +- */ |
| 141 | +-:global(.navbar__items--right) > :last-child { |
| 142 | +- padding-right: 0; |
| 143 | +-} |
0 commit comments