enable search and adjust navbar icon buttons

packages/docusaurus-playground/docusaurus.config.js

@@ -58,6 +58,9 @@ const config = {
       },
       navbar: {
         items: [
+          {
+            type: 'search',
+          },
           {
             label: 'About',
             to: '/docs',

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -244,6 +244,10 @@
   :root {
     --ifm-background-color: rgb(var(--lsd-surface-primary));
   }
+
+  .navbar__color-mode-toggle {
+    display: none !important;
+  }
 }
 
 body {

packages/logos-docusaurus-theme/src/client/theme/ColorModeToggle/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
-import clsx from 'clsx'
-import useIsBrowser from '@docusaurus/useIsBrowser'
+import { IconButton } from '@acid-info/lsd-react'
 import { translate } from '@docusaurus/Translate'
-import IconLightMode from '@theme/Icon/LightMode'
+import useIsBrowser from '@docusaurus/useIsBrowser'
 import IconDarkMode from '@theme/Icon/DarkMode'
+import IconLightMode from '@theme/Icon/LightMode'
+import clsx from 'clsx'
+import React from 'react'
 import styles from './styles.module.scss'
 
 function ColorModeToggle({ className, buttonClassName, value, onChange }) {
@@ -29,30 +30,30 @@ function ColorModeToggle({ className, buttonClassName, value, onChange }) {
             }),
     },
   )
+
   return (
-    <div className={clsx(styles.toggle, className)}>
-      <button
-        className={clsx(
-          'clean-btn',
-          styles.toggleButton,
-          !isBrowser && styles.toggleButtonDisabled,
-          buttonClassName,
-        )}
-        type="button"
-        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
-        disabled={!isBrowser}
-        title={title}
-        aria-label={title}
-        aria-live="polite"
-      >
-        <IconLightMode
-          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
-        />
-        <IconDarkMode
-          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
-        />
-      </button>
-    </div>
+    <IconButton
+      className={clsx(
+        'clean-btn',
+        styles.toggle,
+        className,
+        !isBrowser && styles.toggleButtonDisabled,
+        buttonClassName,
+      )}
+      type="button"
+      onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+      disabled={!isBrowser}
+      title={title}
+      aria-label={title}
+      aria-live="polite"
+    >
+      <IconLightMode
+        className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+      />
+      <IconDarkMode
+        className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+      />
+    </IconButton>
   )
 }
 

packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx

@@ -1,3 +1,4 @@
+import { IconButtonGroup } from '@acid-info/lsd-react'
 import { ErrorCauseBoundary, useThemeConfig } from '@docusaurus/theme-common'
 import {
   splitNavbarItems,
@@ -6,12 +7,11 @@ import {
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
 import NavbarLogo from '@theme/Navbar/Logo'
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'
-import NavbarSearch from '@theme/Navbar/Search'
 import NavbarItem from '@theme/NavbarItem'
 import SearchBar from '@theme/SearchBar'
 import clsx from 'clsx'
 import React from 'react'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -43,9 +43,11 @@ ${JSON.stringify(item, null, 2)}`,
 
 export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar()
-  const items = useNavbarItems()
-  const [leftItems, rightItems] = splitNavbarItems(items)
-  const searchBarItem = items.find((item) => item.type === 'search')
+  const allItems = useNavbarItems()
+  const [leftItems, rightItems] = splitNavbarItems(
+    allItems.filter((item) => !['search'].includes(item.type ?? '')),
+  )
+  const searchBarItem = allItems.find((item) => item.type === 'search')
 
   return (
     <div className="navbar__inner">
@@ -57,15 +59,17 @@ export default function NavbarContent() {
       </div>
       <div className="navbar__right-items">
         <NavbarItems items={rightItems} />
-        <NavbarColorModeToggle
-          className={clsx(styles.colorModeToggle, 'navbar__color-mode-toggle')}
-        />
-        {!searchBarItem && (
-          <NavbarSearch>
-            <SearchBar />
-          </NavbarSearch>
-        )}
-        {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+
+        <IconButtonGroup className={styles.iconButtonGroup} size="medium">
+          <NavbarColorModeToggle
+            className={clsx(
+              styles.colorModeToggle,
+              'navbar__color-mode-toggle',
+            )}
+          />
+          {searchBarItem && <SearchBar />}
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+        </IconButtonGroup>
       </div>
     </div>
   )

packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.scss

@@ -13,3 +13,12 @@ Hide color mode toggle in small viewports
   justify-content: flex-end;
   white-space: nowrap;
 }
+
+.iconButtonGroup {
+  :global {
+    button:not(:last-child) {
+      margin-right: -1px !important;
+      border-right: 1px solid !important;
+    }
+  }
+}