Search Menu (Header Right-Side)

[Alexandrbig1]

Description:
Implement the search menu accessible via the search icon in the header.

Requirements:

• Place search icon in header (right side, next to user + cart icons)
• On click → slide-in panel from the right (40% of viewport width)
• Panel behavior:
  • Close on clicking ❌ (top-right) or outside overlay
• Inside panel:
  • Input field for searching products
  • Start fetching products after 3+ characters typed
  • Show matching results below input
  • Hover state on results: change background + scale image slightly
• Style with TailwindCSS
• Responsive design

Acceptance Criteria:

• Search panel opens/closes correctly
• Fetch works with mock data / backend API (to be connected later)
• Hover effect works smoothly
• Mobile-friendly

Assets:

⚠️ This feature depends on backend API endpoints (products) as https://corexshoptest.onrender.com/api/products

[krgaurav7]

Assign this to me I will work on this @Alexandrbig1

[Alexandrbig1]

@krgaurav7 thanks for your interest!

[Alexandrbig1]

@krgaurav7, Figma Design

[krgaurav7]

Current status of search bar :- Open and close working properly but there is one bug if i fix that it may harm main repo.

Can I rise PR?

Problem :

"
<a aria-label="Search"
onClick={() => setSearch(!search)}
className="cursor-pointer ">

{(search) &&

SEARCH

<button
className='cursor-pointer'
onClick={() =>{
setSearch(!search);
} }
>x

}

"

I am stuck on this that search is inside when I am going to search it will toggle search and close the search bar.

What I do from here ?