nshop-front-m/src/components/layout/navbar/NavbarSearchIcon.tsx

"use client";
import { useState,useEffect } from "react";
import SearchPop from "./SearchPop";
import { usePathname } from "next/navigation";
export default function NavbarSearchIcon() {
  const [searchOpen, setSearchOpen] = useState(false);
    const pathname = usePathname();
  useEffect(() => {
    if (searchOpen) {
      queueMicrotask(() => {
        setSearchOpen(false);
      });
    }
  }, [pathname]);
  return (
    <>
      <div
        className="w-6 h-6 flex items-center justify-center"
        onClick={() => setSearchOpen(true)}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="17.7802734375"
          height="18.7802734375"
          viewBox="0 0 17.7802734375 18.7802734375"
          fill="none"
        >
          <circle
            cx="8.75"
            cy="8.75"
            r="8"
            stroke="rgba(0, 0, 0, 1)"
            strokeWidth="1.5"
          ></circle>
          <path
            stroke="rgba(0, 0, 0, 1)"
            strokeWidth="1.5"
            d="M14.25 15.25L17.25 18.25"
          ></path>
        </svg>
      </div>
      <SearchPop open={searchOpen} onClose={() => setSearchOpen(false)} />
    </>
  );
}