feat: add search functionality to mobile navigation (#4487)

docs/components/mobile-search-icon.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useSearchContext } from "fumadocs-ui/provider";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface MobileSearchIconProps {
+	className?: string;
+}
+
+export function MobileSearchIcon({ className }: MobileSearchIconProps) {
+	const { setOpenSearch } = useSearchContext();
+
+	const handleSearchClick = () => {
+		setOpenSearch(true);
+	};
+
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			aria-label="Search"
+			onClick={handleSearchClick}
+			className={cn(
+				"flex ring-0 shrink-0 md:hidden size-9 hover:bg-transparent",
+				className,
+			)}
+		>
+			<Search className="size-4" />
+		</Button>
+	);
+}

docs/components/nav-bar.tsx

@@ -6,6 +6,7 @@ import { Logo } from "./logo";
 import LogoContextMenu from "./logo-context-menu";
 import DarkPng from "../public/branding/better-auth-logo-dark.png";
 import WhitePng from "../public/branding/better-auth-logo-light.png";
+import { MobileSearchIcon } from "@/components/mobile-search-icon";
 export const Navbar = () => {
 	const logoAssets = {
 		darkSvg: `
@@ -97,6 +98,7 @@ export const Navbar = () => {
 							</svg>
 						</NavLink>
 					</ul>
+					<MobileSearchIcon />
 					<ThemeToggle />
 					<NavbarMobileBtn />
 				</div>

docs/components/nav-mobile.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ChevronRight, Menu } from "lucide-react";
+import { ChevronRight, Menu, Search } from "lucide-react";
 import Link from "next/link";
 import { Fragment, createContext, useContext, useState } from "react";
 import {
@@ -11,6 +11,7 @@ import {
 import { contents, examples } from "./sidebar-content";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
+import { useSearchContext } from "fumadocs-ui/provider";
 
 interface NavbarMobileContextProps {
 	isOpen: boolean;

docs/components/search-dialog.tsx

@@ -37,11 +37,11 @@ export function CustomSearchDialog(props: SharedProps) {
 			{...props}
 		>
 			<SearchDialogOverlay />
-			<SearchDialogContent>
+			<SearchDialogContent className="mt-12 md:mt-0">
 				<SearchDialogHeader>
 					<SearchDialogIcon />
 					<SearchDialogInput />
-					<SearchDialogClose />
+					<SearchDialogClose className="hidden md:block" />
 				</SearchDialogHeader>
 				<SearchDialogList items={query.data !== "empty" ? query.data : null} />
 				<SearchDialogFooter>