/** * @component MegaMenu * @purpose Navigation bar matching TechShop reference UI with sticky header scroll effect, toggleable floating category dropdown menu when scrolled down (Image 2), and interactive mega flyouts. * @dependencies catalogService, lucide-react */ 'use client'; import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { Menu, ChevronDown, ChevronRight, Percent, Flame, Sparkles, Smartphone, Laptop, Tv, Watch, Camera, Zap } from 'lucide-react'; import { catalogService, CategoryResponse, ProductResponse } from '@/services/api/catalogService'; interface SubCategoryGroup { name: string; items: string[]; } const MEGA_DROPDOWNS: Record = { shop: [ { name: 'Shop Layouts', items: ['Catalog Grid 4-Cols', 'Catalog List View', 'Category Sidebar Filters', 'Deal of the Day'] }, { name: 'Product Types', items: ['Smartphones', 'Laptops & MacBooks', 'Smartwatches & Fitness', 'Wireless Audio'] }, ], categories: [ { name: 'Consumer Electronics', items: ['Smartphones & Accessories', 'Tablets & E-Readers', 'Cameras & Photography', 'Audio & Headphones'] }, { name: 'Computers & Office', items: ['Laptops & Ultraportables', 'Desktop PCs & Gaming', 'Monitors & Displays', 'Chargers & Power Adapters'] }, ], products: [ { name: 'Top Trending', items: ['Apple iPhone 15 Pro Max', 'Sony WH-1000XM5 Headphones', 'Google Pixel 8 Pro', 'Apple Watch Ultra 2'] }, { name: 'Certified Repairs', items: ['OLED Screen Replacement', 'Battery Health Calibration', 'Camera Module Fix', 'Water Damage Restoration'] }, ], }; export function MegaMenu() { const [isSticky, setIsSticky] = useState(false); const [categories, setCategories] = useState([]); const [featuredProducts, setFeaturedProducts] = useState([]); const [categoriesOpen, setCategoriesOpen] = useState(false); const [activeCategory, setActiveCategory] = useState(null); const [activeNavDropdown, setActiveNavDropdown] = useState(null); const dropdownRef = useRef(null); useEffect(() => { catalogService.getCategories().then((res) => { if (Array.isArray(res)) setCategories(res); }); catalogService.getProducts().then((res) => setFeaturedProducts(res.slice(0, 3))); const handleScroll = () => { setIsSticky(window.scrollY > 120); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { setCategoriesOpen(false); setActiveCategory(null); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const categoryList = categories; const getCategoryIcon = (slug: string) => { switch (slug) { case 'cameras': return ; case 'phones': return ; case 'tv-speaker': return ; case 'smart-devices': return ; case 'laptop': return ; case 'chargers-cables': return ; default: return ; } }; return ( ); }