From 3d23368577bcad0972873a06f8d75ba8193b481a Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Sun, 17 Aug 2025 22:48:38 +0200
Subject: [PATCH] fix: UX on pathname change

---
 .../organisms/Navbar/components/Search/index.tsx         | 9 ++++++++-
 src/components/organisms/Navbar/index.tsx                | 8 +++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index 93c94c1..1bc5603 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/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);
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index f5fb61a..f9cb57a 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/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);