components/Header.tsx

@@ -4,6 +4,7 @@ import Logo from '@/data/logo.svg'
 import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
+import SearchButton from './SearchButton'
 
 const Header = () => {
   return (
@@ -24,20 +25,19 @@ const Header = () => {
           </div>
         </Link>
       </div>
-      <div className="flex items-center text-base leading-5">
+      <div className="flex items-center leading-5 space-x-4 sm:space-x-6">
-        <div className="hidden sm:block">
+        {headerNavLinks
-          {headerNavLinks
+          .filter((link) => link.href !== '/')
-            .filter((link) => link.href !== '/')
+          .map((link) => (
-            .map((link) => (
+            <Link
-              <Link
+              key={link.title}
-                key={link.title}
+              href={link.href}
-                href={link.href}
+              className="hidden sm:block font-medium text-gray-900 dark:text-gray-100"
-                className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
+            >
-              >
+              {link.title}
-                {link.title}
+            </Link>
-              </Link>
+          ))}
-            ))}
+        <SearchButton />
-        </div>
         <ThemeSwitch />
         <MobileNav />
       </div>

components/MobileNav.tsx

@@ -20,17 +20,13 @@ const MobileNav = () => {
   }
 
   return (
-    <div className="sm:hidden">
+    <>
-      <button
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
-        className="ml-1 mr-1 h-8 w-8 rounded py-1"
-        aria-label="Toggle Menu"
-        onClick={onToggleNav}
-      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="text-gray-900 dark:text-gray-100"
+          className="text-gray-900 dark:text-gray-100 h-8 w-8"
         >
           <path
             fillRule="evenodd"
@@ -45,11 +41,7 @@ const MobileNav = () => {
         }`}
       >
         <div className="flex justify-end">
-          <button
+          <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
-            className="mr-5 mt-11 h-8 w-8 rounded"
-            aria-label="Toggle Menu"
-            onClick={onToggleNav}
-          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
@@ -78,7 +70,7 @@ const MobileNav = () => {
           ))}
         </nav>
       </div>
-    </div>
+    </>
   )
 }
 

components/SearchButton.tsx

@@ -0,0 +1,34 @@
+import { AlgoliaButton } from 'pliny/search/AlgoliaButton'
+import { KBarButton } from 'pliny/search/KBarButton'
+import siteMetadata from '@/data/siteMetadata'
+
+const SearchButton = () => {
+  if (
+    siteMetadata.search &&
+    (siteMetadata.search.provider === 'algolia' || siteMetadata.search.provider === 'kbar')
+  ) {
+    const SearchButtonWrapper =
+      siteMetadata.search.provider === 'algolia' ? AlgoliaButton : KBarButton
+
+    return (
+      <SearchButtonWrapper aria-label="Search">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="text-gray-900 dark:text-gray-100 h-6 w-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          />
+        </svg>
+      </SearchButtonWrapper>
+    )
+  }
+}
+
+export default SearchButton

components/ThemeSwitch.tsx

@@ -17,14 +17,13 @@ const ThemeSwitch = () => {
   return (
     <button
       aria-label="Toggle Dark Mode"
-      className="ml-1 mr-1 h-8 w-8 rounded p-1 sm:ml-4"
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
-        className="text-gray-900 dark:text-gray-100"
+        className="text-gray-900 dark:text-gray-100 h-6 w-6"
       >
         {mounted && theme === 'dark' ? (
           <path

package.json

@@ -23,7 +23,7 @@
     "next": "13.4.12",
     "next-contentlayer": "0.3.4",
     "next-themes": "^0.2.1",
-    "pliny": "0.1.0",
+    "pliny": "0.1.1",
     "postcss": "^8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",

yarn.lock

@@ -7024,9 +7024,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kbar@npm:0.1.0-beta.40":
+"kbar@npm:0.1.0-beta.41":
-  version: 0.1.0-beta.40
+  version: 0.1.0-beta.41
-  resolution: "kbar@npm:0.1.0-beta.40"
+  resolution: "kbar@npm:0.1.0-beta.41"
   dependencies:
     "@radix-ui/react-portal": ^1.0.1
     command-score: ^0.1.2
@@ -7036,7 +7036,7 @@ __metadata:
   peerDependencies:
     react: ^16.0.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 0c2cbe520e48ba210cbcfd04529178a772c112ea8e674953bbb6343f74109bf3fd3cb8d23bb4235093f04018b28e8e2e485852d23c39dfe96eab6189cc82c361
+  checksum: 4ce40d59c27b0a9367fbface0780f906c20109bc279b038041e51b0f97fee50261599fda8cfc5ba8e45550589639517f580935ec6443e835081057d9bb5a6e54
   languageName: node
   linkType: hard
 
@@ -8951,9 +8951,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pliny@npm:0.1.0":
+"pliny@npm:0.1.1":
-  version: 0.1.0
+  version: 0.1.1
-  resolution: "pliny@npm:0.1.0"
+  resolution: "pliny@npm:0.1.1"
   dependencies:
     "@docsearch/react": ^3.5.0
     "@giscus/react": ^2.3.0
@@ -8963,7 +8963,7 @@ __metadata:
     github-slugger: ^1.4.0
     image-size: 1.0.0
     js-yaml: 4.1.0
-    kbar: 0.1.0-beta.40
+    kbar: 0.1.0-beta.41
     next-contentlayer: ^0.3.4
     next-themes: ^0.2.1
     remark: ^14.0.2
@@ -8972,7 +8972,7 @@ __metadata:
     next: ">=13.0.0"
     react: ^17.0.2 || ^18.0.0
     react-dom: ^17.0.2 || ^18.0.0
-  checksum: 73b121459a512f75e54160f40d4054685e9ddf134915ecd96a08babe98bfe66eec447abdf93ee8f1d2c3c5b205a0426c44534509e7a51858503703cef3f7f49d
+  checksum: 6d1ff65e4684ceb06983c6ecb94fa29b1b2da9047a2ba2c23bbad1126ba9e6f9cfd24e663e2fe828a3397bfa673088796f5cf932a78e2b900525f9190a231182
   languageName: node
   linkType: hard
 
@@ -10728,7 +10728,7 @@ __metadata:
     next: 13.4.12
     next-contentlayer: 0.3.4
     next-themes: ^0.2.1
-    pliny: 0.1.0
+    pliny: 0.1.1
     postcss: ^8.4.24
     prettier: ^3.0.0
     prettier-plugin-tailwindcss: ^0.4.1