landing/src/components/ResponsiveNavbar.jsx

import { useState } from 'react';
import { FaBars, FaTimes, FaChevronDown } from 'react-icons/fa';
import logo from '../assets/logo.png';

const menuItems = [
    { label: '회사소개', children: [] },
    { label: '사업소개', children: [] },
    { label: '사업실적', children: [] },
    { label: '고객지원', children: [] },
];

const ResponsiveNavbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [expandedMenu, setExpandedMenu] = useState(null);

    const toggleMobileMenu = () => {
        setIsOpen(prev => !prev);
    };

    const toggleSubMenu = (index) => {
        setExpandedMenu(prev => (prev === index ? null : index));
    };

    return (
        <header className="fixed top-0 left-0 w-full z-50 bg-white shadow">
            <div className="flex items-center justify-between px-4 md:px-10 py-4">
                <img src={logo} alt="Logo" className="h-8" />
                {/* Desktop Nav */}
                <nav className="hidden md:flex space-x-10 font-semibold">
                    {menuItems.map((item, idx) => (
                        <a href="#" key={idx} className="hover:text-blue-600">
                            {item.label}
                        </a>
                    ))}
                </nav>
                {/* Mobile Toggle */}
                <button onClick={toggleMobileMenu} className="md:hidden text-2xl">
                    {isOpen ? <FaTimes /> : <FaBars />}
                </button>
            </div>

            {/* Mobile Menu */}
            {isOpen && (
                <div className="md:hidden bg-white w-full h-screen fixed top-0 right-0 p-4 pt-20 z-40 overflow-auto">
                    <img src={logo} alt="Logo" className="h-8 mb-6" />
                    <ul>
                        {menuItems.map((item, idx) => (
                            <li key={idx} className="mb-4">
                                <button
                                    onClick={() => toggleSubMenu(idx)}
                                    className="flex justify-between items-center w-full font-semibold text-lg"
                                >
                                    {item.label}
                                    <FaChevronDown
                                        className={`ml-2 transform transition-transform ${
                                            expandedMenu === idx ? 'rotate-180' : ''
                                        }`}
                                    />
                                </button>
                                {expandedMenu === idx && (
                                    <ul className="ml-4 mt-2 space-y-2">
                                        {(item.children.length > 0 ? item.children : ['하위 메뉴 준비중']).map((sub, i) => (
                                            <li key={i} className="text-gray-600">
                                                <a href="#">{sub}</a>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
            )}
        </header>
    );
};

export default ResponsiveNavbar;