"use client"; import Link from "next/link"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { Search, Bell, User, Menu, X } from "lucide-react"; import { Input } from "@/components/ui/input"; import { useState, useEffect } from "react"; export default function DracinSubMenu() { const pathname = usePathname(); const router = useRouter(); const searchParams = useSearchParams(); const [keyword, setKeyword] = useState(searchParams.get("q") || ""); const [isScrolled, setIsScrolled] = useState(false); const [showMobileMenu, setShowMobileMenu] = useState(false); const [isLangMenuOpen, setIsLangMenuOpen] = useState(false); const [selectedLang, setSelectedLang] = useState("Bahasa (ID)"); // Default to ID useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 0); }; window.addEventListener('scroll', handleScroll); // Read initial language from cookie const getCookie = (name: string) => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop()?.split(';').shift(); } const savedLang = getCookie("dracin_lang"); switch (savedLang) { case 'en': setSelectedLang("English (EN)"); break; case 'ms': setSelectedLang("Melayu (MY)"); break; case 'zh': setSelectedLang("Mandarin (ZH)"); break; default: setSelectedLang("Bahasa (ID)"); // Default IN } const handleClickOutside = (e: MouseEvent) => { const target = e.target as HTMLElement; if (!target.closest('.lang-selector')) { setIsLangMenuOpen(false); } }; window.addEventListener('click', handleClickOutside); return () => { window.removeEventListener('scroll', handleScroll); window.removeEventListener('click', handleClickOutside); }; }, []); const handleLangSelect = (langCode: string, langName: string) => { document.cookie = `dracin_lang=${langCode}; path=/; max-age=31536000`; setSelectedLang(langName); router.refresh(); setIsLangMenuOpen(false); }; const isActive = (path: string) => pathname === path; const handleSearch = (e: React.FormEvent) => { e.preventDefault(); setShowMobileMenu(false); // Close menu on search if (keyword.trim()) { router.push(`/dracin/search?q=${encodeURIComponent(keyword)}`); } }; const toggleMobileMenu = () => { setShowMobileMenu(!showMobileMenu); }; return ( ); }