Implement the Shop menu in the header navigation bar

[Alexandrbig1]

Priority: High
Difficulty: Intermediate
Type: Frontend (React + Tailwind)

---

Description

We need to implement the Shop menu in the header navigation bar.
When the user clicks or hovers on Shop, a full dropdown menu should appear, following the design provided.

---

Implementation Details

1. Shop Button in Navbar

   • Add Shop item in header.
   • Add a down arrow icon (▼) by default.
   • When menu is open, arrow should rotate up (▲).
   • Add a hover effect (change color / background as per design).

2. Dropdown Menu

   • Menu takes entire width below navbar (like a mega-menu).
   • Each title link and sub-links should follow the provided Figma design.
   • Use grid or flex layout for clean alignment.

3. Hover Effects for Links

   • On hover over a link → show animated underline:
     • From left to right (0% → 100%).
     • On hover out → underline should animate back right to 0%.
   • Smooth transition (e.g., transition-all duration-300 ease-in-out).

4. Navigation

   • When clicking on a link, navigate to:

     https://corexshoptest.onrender.com/api/collections/:name
     

   • :name must be the clicked link text, converted to lowercase.
   • No need to build the actual collection page — just update the URL.

---

Assets

---

Acceptance Criteria

• Shop button in navbar works with hover & click effects.
• Arrow rotates down/up depending on menu state.
• Menu expands full width below navbar, following design.
• Links have animated underline hover effect.
• Clicking a link updates the URL correctly (lowercase :name).

---

Bonus

• Add keyboard accessibility (open menu with Enter/Space, navigate with arrows).
• Close menu when clicking 'Escape'.
• Smooth menu open/close animation (slide down).

[Sushil010]

Hi @Alexandrbig1, I'd like to work on this issue could you please assign it to me?
I've also requested access to the Figma file. If I'm assigned, could you grant me Figma access as well?

[Alexandrbig1]

Hi @Sushil010, thanks for your interest. I've assigned you to this task. May you request once more for Figma, haven't see you. Thank you. Looking forward to your PR's.

[Sushil010]

@Alexandrbig1 I have got the access I will start working now. Thanks