feat: implement search bar state management using Jotai atom

Author: kingRayhan

src/components/Navbar/NavbarActions.tsx

@@ -12,14 +12,21 @@ import SocialLoginCard from "../SocialLoginCard";
 import AuthenticatedUserMenu from "./AuthenticatedUserMenu";
 import LanguageSwitcher from "./LanguageSwitcher";
 import Link from "next/link";
+import { useAtom } from "jotai";
+import { searchBarAtom } from "@/store/search-bar.atom";
 
 const NavbarActions: React.FC = () => {
   const { _t } = useTranslation();
   const authSession = useSession();
+  const [, setSearchOpen] = useAtom(searchBarAtom);
 
   return (
     <div className="flex items-center gap-2">
-      <Button variant="ghost" className="md:hidden">
+      <Button
+        variant="ghost"
+        className="md:hidden"
+        onClick={() => setSearchOpen(true)}
+      >
         <SearchIcon size={18} />
       </Button>
       <LanguageSwitcher />

src/components/Navbar/SearchInput.tsx

@@ -16,13 +16,15 @@ import {
   CommandItem,
   CommandList,
 } from "../ui/command";
+import { useAtom } from "jotai";
+import { searchBarAtom } from "@/store/search-bar.atom";
 
 const SearchInput = () => {
   const { _t } = useTranslation();
   const router = useRouter();
   const index = meilisearchClient.index("articles");
 
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useAtom(searchBarAtom);
 
   const debouncedSearch = useDebouncedCallback((query: string) => {
     mutation.mutate(query);

src/store/search-bar.atom.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const searchBarAtom = atom<boolean>(false);