close drawer on command action

Author: mehdibha

www/src/components/mobile-nav.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import Link from "next/link";
 import type { PageTree } from "fumadocs-core/server";
 import { AlignLeftIcon, PanelLeftCloseIcon, SearchIcon } from "lucide-react";
@@ -21,6 +22,7 @@ export const MobileNav = ({
   className?: string;
   items: PageTree.Node[];
 }) => {
+  const [isOpen, setOpen] = React.useState(false);
   return (
     <header
       className={cn(
@@ -29,7 +31,7 @@ export const MobileNav = ({
       )}
     >
       <div className="max-w-(--breakpoint-2xl) container flex h-14 w-full items-center justify-between">
-        <DialogRoot>
+        <DialogRoot isOpen={isOpen} onOpenChange={setOpen}>
           <Button variant="quiet" size="sm" shape="square">
             <AlignLeftIcon />
           </Button>
@@ -65,7 +67,11 @@ export const MobileNav = ({
                     </Button>
                   </div>
                   <div className="p-2">
-                    <SearchCommand>
+                    <SearchCommand
+                      onAction={() => {
+                        setOpen(false);
+                      }}
+                    >
                       <Button
                         prefix={<SearchIcon />}
                         variant="outline"

www/src/components/search-command.tsx

@@ -23,11 +23,13 @@ import { searchConfig } from "@/config";
 interface SearchCommandProps {
   keyboardShortcut?: boolean;
   children: React.ReactNode;
+  onAction?: () => void;
 }
 
 export function SearchCommand({
   keyboardShortcut,
   children,
+  onAction,
 }: SearchCommandProps) {
   const { search, setSearch, query } = useDocsSearch({ type: "fetch" });
   const results =
@@ -48,7 +50,11 @@ export function SearchCommand({
 
   return (
     <SearchCommandDialog keyboardShortcut={keyboardShortcut} trigger={children}>
-      <Command inputValue={search} onInputChange={setSearch} className="h-72">
+      <Command
+        inputValue={search}
+        onInputChange={setSearch}
+        className="h-72"
+      >
         <div className="p-1">
           <SearchFieldRoot placeholder="Search" autoFocus className="w-full">
             <InputRoot className="focus-within:ring-1">
@@ -57,7 +63,13 @@ export function SearchCommand({
             </InputRoot>
           </SearchFieldRoot>
         </div>
-        <MenuContent className="h-full overflow-y-scroll py-1">
+        <MenuContent
+          onAction={() => {
+            setSearch("");
+            onAction?.();
+          }}
+          className="h-full overflow-y-scroll py-1"
+        >
           {results.map((group) => (
             <MenuSection key={group.id} title={group.name}>
               {group.results.map((item) => (