vercel · anthonyshew · Apr 4, 2025 · Apr 4, 2025
@@ -1,36 +1,56 @@
+"use client";
+
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { Menu } from "#/components/icons/menu";
 import { Pages } from "../nav";
 import Link from "next/link";
 import { GithubLogo } from "@/app/_components/logos";
 import { gitHubRepoUrl } from "@/lib/constants";
 import { ThemeSwitcher } from "../nav/theme-switcher";
+import { MagnifyingGlass } from "../icons/magnifying-glass";
+import { useSearchContext } from "fumadocs-ui/provider";
+import { XDotCom } from "../icons/x-dot-com";
 
 export const MobileMenuTopLevel = ({ pages }: { pages: Pages }) => {
+  const { setOpenSearch } = useSearchContext();
+
   return (
-    <Popover>
-      <PopoverTrigger>
-        <Menu />
-      </PopoverTrigger>
-      <PopoverContent className="mr-4">
-        {pages.map((page) => {
-          return (
-            <Link
-              className="block p-1 text-sm hover:text-gray-800 dark:hover:text-gray-1000"
-              href={page.href}
-            >
-              {page.tooltip}
-            </Link>
-          );
-        })}
+    <>
+      <button
+        className="block lg:hidden p-4 pr-2"
+        onClick={() => setOpenSearch(true)}
+      >
+        <MagnifyingGlass />
+      </button>
+      <Popover>
+        <PopoverTrigger className="p-4 pl-2">
+          <Menu />
+        </PopoverTrigger>
+        <PopoverContent className="mr-4">
+          {pages.map((page) => {
+            return (
+              <Link
+                className="block p-1 text-sm hover:text-gray-800 dark:hover:text-gray-1000"
+                href={page.href}
+              >
+                {page.tooltip}
+              </Link>
+            );
+          })}
 
-        <div className="flex flex-row mt-4 items-center justify-between">
-          <Link href={gitHubRepoUrl}>
-            <GithubLogo className="w-5 h-5" />
-          </Link>
-          <ThemeSwitcher />
-        </div>
-      </PopoverContent>
-    </Popover>
+          <div className="flex flex-row mt-4 items-center justify-between">
+            <div className="flex gap-4">
+              <Link href={gitHubRepoUrl}>
+                <GithubLogo className="w-5 h-5" />
+              </Link>
+              <Link href="https://x.com/turborepo">
+                <XDotCom className="w-5 h-5" />
+              </Link>
+            </div>
+            <ThemeSwitcher />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
   );
 };
@@ -72,7 +72,7 @@ export function FeedbackWidget() {
       <Popover.Trigger asChild>
         <Button
           type="button"
-          variant="secondary"
+          variant="outline"
           size="sm"
           aria-label="Open feedback form"
         >

@@ -18,7 +18,7 @@ export const LogoGitHub = ({ className }: { className?: string }) => {
       </g>
       <defs>
         <clipPath id="clip0_872_3147">
-          <rect width="16" height="16" fill="white"></rect>
+          <rect width="16" height="16" fill="currentColor"></rect>
         </clipPath>
       </defs>
     </svg>

@@ -0,0 +1,18 @@
+export const MagnifyingGlass = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.5 6.5C1.5 3.73858 3.73858 1.5 6.5 1.5C9.26142 1.5 11.5 3.73858 11.5 6.5C11.5 9.26142 9.26142 11.5 6.5 11.5C3.73858 11.5 1.5 9.26142 1.5 6.5ZM6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13C8.02469 13 9.42677 12.475 10.5353 11.596L13.9697 15.0303L14.5 15.5607L15.5607 14.5L15.0303 13.9697L11.596 10.5353C12.475 9.42677 13 8.02469 13 6.5C13 2.91015 10.0899 0 6.5 0Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+export const XDotCom = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
@@ -21,6 +21,7 @@ import {
   TurborepoWordmarkDark,
   TurborepoWordmarkLight,
 } from "#/components/icons/turborepo-wordmark";
+import { MagnifyingGlass } from "#/components/icons/magnifying-glass";
 
 export const PAGES = [
   {
@@ -71,12 +72,13 @@ export const Navigation = () => {
 
   return (
     <>
-      <div className="sticky top-0 z-40 flex h-[var(--nav-height)] justify-between border-b bg-background-200 px-4">
+      <div className="sticky top-0 z-40 flex h-[var(--nav-height)] justify-between border-b bg-background-200 px-4 pr-0 md:pr-4">
         <div className="flex w-full select-none flex-row items-center">
           <div className="flex flex-shrink-0 flex-row items-center gap-2">
             <HomeLinks />
           </div>
-          <div className="ml-auto md:hidden">
+
+          <div className="ml-auto flex md:hidden">
             <MobileMenuTopLevel pages={PAGES} />
           </div>
           <div className="hidden md:flex w-full justify-end md:justify-start md:pl-6">
@@ -91,7 +93,7 @@ export const Navigation = () => {
                       <Link
                         href={page.href}
                         className={cn(
-                          "text-sm transition-colors duration-100 hover:text-gray-1000 data-[active=true]:text-gray-1000"
+                          "text-sm transition-colors duration-100 hover:text-gray-900 data-[active=true]:text-gray-1000"
                         )}
                         data-active={pageFromRoute === page.name}
                         scroll={page.href !== "/repo/docs"}
@@ -107,18 +109,25 @@ export const Navigation = () => {
           </div>
         </div>
 
+        <button
+          className="hidden p-4 pr-2 md:pr-4 md:block lg:hidden"
+          onClick={() => setOpenSearch(true)}
+        >
+          <MagnifyingGlass />
+        </button>
+
         <div className="hidden items-center gap-2 md:flex">
           <Button
             aria-label="Search…"
             variant="secondary"
             size="sm"
-            className="group flex-row !font-normal !text-gray-800 hover:!text-gray-1000"
+            className="group flex-row !font-normal !text-gray-800 hover:!text-gray-1000 hidden lg:block"
             onClick={() => {
               setOpenSearch(true);
             }}
           >
             <div className="text-start justify-between flex gap-2 lg:w-20 xl:w-24">
-              <span>Search…</span>
+              <span>Search</span>
               <span className="inline-flex items-center justify-center rounded border border-gray-200 font-sans text-sm group-hover:border-gray-alpha-400">
                 <kbd className="flex h-5 min-h-5 w-fit items-center px-1 py-0 text-center font-sans text-xs">
                   {hotKey.map((k, i) => (
@@ -131,16 +140,15 @@ export const Navigation = () => {
 
           <FeedbackWidget />
           <Button
-            variant="default"
+            variant="secondary"
             asChild
             size="sm"
             // @ts-expect-error
             href="https://github.com/vercel/turborepo"
-            className="hidden xl:flex"
+            className="bg-transparent hover:bg-transparent"
           >
             <a>
               <LogoGitHub className="inline" />
-              <span>GitHub</span>
             </a>
           </Button>
         </div>

@@ -23,7 +23,7 @@ export function SearchDialog(props: SharedProps): JSX.Element {
         ["Blog", "/blog"],
         ["Changelog", `${gitHubRepoUrl}/releases`],
         ["Github", gitHubRepoUrl],
-        ["Vercel Community", "https://vercel.community/tag/turborepo"],
+        ["Community", "https://vercel.community/tag/turborepo"],
       ]}
     />
   );