fix: UX on pathname change

src/components/organisms/Navbar/components/Search/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { IoClose, IoSearch } from "react-icons/io5";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SearchResult } from "@/lib/tmdb/types";
 import { TMDB } from "@/lib/tmdb";
 import { SearchInput } from "@/components/atoms/SearchInput";
@@ -10,6 +10,7 @@ import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { Button } from "@/components/atoms/Button";
 import { MovieList } from "@/components/molecules/MovieList";
 import { Spinner } from "@/components/atoms/Spinner";
+import { usePathname } from "next/navigation";
 
 export const Search = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -18,6 +19,12 @@ export const Search = () => {
   const [query, setQuery] = useState("");
   const isLoading = query.length > 2 && !response;
   const { results, total_pages, total_results = 0 } = response ?? {};
+  const pathname = usePathname();
+
+  useEffect(() => {
+    console.log("pathname", pathname);
+    setIsSearchOpen(false);
+  }, [pathname]);
 
   const handleSearch = async (query: string) => {
     setQuery(query);

src/components/organisms/Navbar/index.tsx

@@ -1,8 +1,9 @@
 "use client";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
 import { Search } from "./components/Search";
+import { usePathname } from "next/navigation";
 
 const links = [
   {
@@ -19,6 +20,11 @@ const links = [
 
 export const Navbar = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [pathname]);
 
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);