Description:
Implement the wishlist menu accessible via the heart icon in the header.
Requirements:
- Place heart (wishlist) icon in header (right side, next to user + search + cart icons)
- On click → slide-in panel from the right (40% of viewport width)
- Panel behavior:
- Close on clicking ❌ (top-right) or outside overlay
- Panel content:
- If wishlist is empty → show friendly message like:
"Your wishlist is empty. Start adding your favorite supplements!"
- If wishlist has items:
- Show list of products with:
- Thumbnail image
- Title + price
- Selected flavor (if applicable)
- Heart icon → clicking removes product from wishlist
- Bottom of panel: “Add All to Cart” button
- Only visible if there are items in wishlist
Acceptance Criteria:
- Panel opens/closes correctly
- Products can be added/removed from wishlist
- “Add All to Cart” button appears only if wishlist has products
- Empty wishlist shows UX-friendly message
- Responsive design
Assets:



⚠️ For Hacktoberfest, wishlist should be stored in local storage. Backend API integration will come later.
Description:
Implement the wishlist menu accessible via the heart icon in the header.
Requirements:
Acceptance Criteria:
Assets: