feat: auto focus search bar when sidebar is shown (close #1269) (#1304)

feat: auto focus search bar when sidebar is shown

web/src/components/HomeSidebar.tsx

@@ -32,6 +32,10 @@ export const toggleHomeSidebar = (show?: boolean) => {
   if (show) {
     sidebarEl.classList.add("show");
     maskEl.classList.add("show");
+
+    // auto focus search bar when sidebar is shown
+    const inputEl = sidebarEl.querySelector("#mobile-search-bar") as HTMLInputElement;
+    inputEl?.focus();
   } else {
     sidebarEl.classList.remove("show");
     maskEl.classList.remove("show");

web/src/components/SearchBar.tsx

@@ -54,6 +54,7 @@ const SearchBar = () => {
       <input
         className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
         type="text"
+        id="mobile-search-bar"
         placeholder="Search memos"
         ref={inputRef}
         value={queryText}