\n {currentStore?.name || 'Storefront Builder'}\n

\n\n {/* Desktop Navigation */}\n

\n {navItems.map((item) => (\n onViewChange(item.id)}\n />\n ))}\n

\n\n {/* Action Buttons */}\n

\n {/* Voice Toggle */}\n \n \n {/* Store Selector */}\n {currentStore && (\n

\n \n

\n )}\n\n {/* Mobile Menu Button */}\n \n

\n \n

\n\n {/* Mobile Menu */}\n {isMenuOpen && (\n

\n {navItems.map((item) => (\n {\n onViewChange(item.id);\n setIsMenuOpen(false);\n }}\n className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${\n currentView === item.id\n ? 'bg-white/20 text-white'\n : 'text-white/80 hover:bg-white/10 hover:text-white'\n }`}\n >\n {item.icon}\n {item.label}\n \n ))}\n

\n )}\n

\n );\n}\n\ninterface NavItemProps {\n item: { id: string; label: string; icon: string };\n isActive: boolean;\n onClick: () => void;\n}\n\nfunction NavItem({ item, isActive, onClick }: NavItemProps) {\n const itemRef = useRef(null);\n\n useEffect(() => {\n if (!window.gsap || !itemRef.current) return;\n\n const button = itemRef.current;\n\n const handleMouseEnter = () => {\n window.gsap.to(button, {\n scale: 1.05,\n y: -2,\n duration: 0.2,\n ease: \"power2.out\"\n });\n };\n\n const handleMouseLeave = () => {\n window.gsap.to(button, {\n scale: 1,\n y: 0,\n duration: 0.2,\n ease: \"power2.out\"\n });\n };\n\n button.addEventListener('mouseenter', handleMouseEnter);\n button.addEventListener('mouseleave', handleMouseLeave);\n\n return () => {\n button.removeEventListener('mouseenter', handleMouseEnter);\n button.removeEventListener('mouseleave', handleMouseLeave);\n };\n }, []);\n\n return (\n \n {item.icon}\n {item.label}\n \n );\n}\n\nfunction VoiceButton({ onClick }: { onClick: () => void }) {\n const buttonRef = useRef(null);\n\n useEffect(() => {\n if (!window.gsap || !buttonRef.current) return;\n\n // Pulsing animation\n window.gsap.to(buttonRef.current, {\n scale: 1.1,\n duration: 1.5,\n ease: \"power2.inOut\",\n yoyo: true,\n repeat: -1\n });\n }, []);\n\n return (\n \n 🎤\n \n );\n}\n\ninterface StoreSelectorProps {\n currentStore: Store;\n onStoreSelect: (store: Store) => void;\n}\n\nfunction StoreSelector({ currentStore, onStoreSelect }: StoreSelectorProps) {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n

\n setIsOpen(!isOpen)}\n className=\"flex items-center space-x-2 px-4 py-2 bg-white/10 rounded-lg text-white hover:bg-white/20 transition-colors\"\n >\n {currentStore.name}\n \n \n\n {isOpen && (\n

\n Current Store\n

\n {currentStore.name}\n

\n {currentStore.description}\n

\n )}\n

\n );\n}","deleted","label",[167,168,169,149],"frontend","components","shared","permalink","https://www.val.town/x/Danchi/vibeCoding_PLP/code/frontend/components/shared/Navigation.tsx","extension","actionData","errors"]