Refine website desktop navbar layout

Author: pchalamet

website/docusaurus.config.ts

@@ -116,16 +116,16 @@ const config: Config = {
           label: 'Documentation',
           position: 'left',
         },
+        {type: 'search', position: 'right'},
         ...(showVersionDropdown
           ? [
               {
                 type: 'docsVersionDropdown' as const,
-                position: 'left' as const,
+                position: 'right' as const,
                 dropdownActiveClassDisabled: true,
               },
             ]
           : []),
-        {type: 'search', position: 'right'},
         {
           href: 'https://github.com/MagnusOpera/Terrabuild',
           label: 'GitHub',

website/src/theme/Navbar/Content/index.tsx

@@ -0,0 +1,81 @@
+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';
+
+function useNavbarItems() {
+  return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
+  return (
+    <>
+      {items.map((item, i) => (
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            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},
+            )
+          }>
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+export default function NavbarContent(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const hasSearchItem = items.some((item) => item.type === 'search');
+  const rightItemsWithoutSearch = rightItems.filter((item) => item.type !== 'search');
+
+  return (
+    <div className="navbar__inner tb-navbar-inner">
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerLeft,
+          'navbar__items tb-navbar-left',
+        )}>
+        {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+        <NavbarLogo />
+        <NavbarItems items={leftItems} />
+      </div>
+
+      {hasSearchItem && (
+        <div className="tb-navbar-center">
+          <NavbarSearch className="tb-navbar-search">
+            <SearchBar />
+          </NavbarSearch>
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerRight,
+          'navbar__items navbar__items--right tb-navbar-right',
+        )}>
+        <NavbarItems items={rightItemsWithoutSearch} />
+        <NavbarColorModeToggle />
+      </div>
+    </div>
+  );
+}

website/theme/custom.css

@@ -275,4 +275,52 @@
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
   }
+
+  .tb-navbar-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .tb-navbar-left,
+  .tb-navbar-right {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .tb-navbar-right {
+    justify-content: flex-end;
+    gap: 0.35rem;
+  }
+
+  .tb-navbar-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(38rem, calc(100vw - 34rem));
+    z-index: 1;
+  }
+
+  .tb-navbar-search,
+  .tb-navbar-search .navbar__search,
+  .tb-navbar-search .searchBarContainer_V7YW,
+  .tb-navbar-search .navbar__search-input,
+  .tb-navbar-search .DocSearch-Button {
+    width: 100%;
+  }
+
+  .tb-navbar-search {
+    padding: 0;
+  }
+
+  .tb-navbar-search .navbar__search,
+  .tb-navbar-search .searchBarContainer_V7YW {
+    max-width: none;
+    padding: 0;
+  }
+
+  .tb-navbar-search .DocSearch-Button {
+    min-width: 30rem;
+  }
 }