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(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);