navba-react

import React from "react";

const TorcheAppBar = () => {
    const [isNavbarOpen, setIsNavbarOpen] = React.useState(false);

    const navbarDatas = [
        {
            title: 'Beranda',
            href: '/',
        },
        {
            title: 'Tentang Kami',
            href: '/about',
        },
        {
            title: 'Layanan',
            href: '/service',
        },
        {
            title: 'Tutor',
            href: '/tuition',
        },
        {
            title: 'Event',
            href: '/event',
        },
        {
            title: 'Kursus',
            submenu: [
                {
                    title: 'Mata kuliah',
                    href: '/course/matkul'
                },
                {
                    title: 'Mendaftar kelas',
                    href: '/course/registration'
                },
                {
                    title: 'Harga',
                    href: '/course/price'
                },
            ]
        },
        {
            title: 'Apps',
            submenu: [
                {
                    title: 'Web Calculator',
                    href: '/web-calc'
                },
            ]
        },
        {
            title: 'Karir',
            href: '/career',
        }
    ]

    return (
        <>
            <div className="fixed top-0 w-full p-8 px-7 bg-[#0b122a] min-h-fit text-white flex items-center flex-row justify-between">
                <div>
                    <h1>Torche</h1>
                </div>
                <div>
                    <button onClick={() => setIsNavbarOpen(!isNavbarOpen)} className={`${isNavbarOpen && 'hidden'} lg:hidden hamburger`}>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                        </svg>
                    </button>
                    <ul className="lg:flex hidden flex-row items-center mt-0">
                        {
                            navbarDatas.map((data, index) => {
                                return (
                                    <li key={index} className="relative lg:mx-3 lg:my-0 my-3 transition duration-200 font-light">
                                        <List data={data} />
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
            <div className={`${isNavbarOpen ? 'block' : 'hidden'} backdrop lg:hidden absolute z-40 left-0 top-0 right-0 min-h-screen`} style={{background: 'rgba(23, 35, 46, 0.9)'}}/>
            <button onClick={() => setIsNavbarOpen(!isNavbarOpen)} className={`${isNavbarOpen ? 'block' : 'hidden'} lg:hidden absolute right-5 top-5 z-50 text-white`}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
            <ul className={`${isNavbarOpen ? 'block' : 'hidden'} lg:hidden left-3 right-3 absolute top-14 text-white bg-[#0b122a] flex flex-col mt-0 bg-red p-3 z-50 min-h-[calc(100%-70px)]`}>
                {
                    navbarDatas.map((data, index) => {
                        return (
                            <li key={index} className="relative lg:mx-3 lg:my-0 my-3 transition duration-200 font-light">
                                <List data={data} />
                            </li>
                        )
                    })
                }
            </ul>

        </>
    );
}

interface ListProps {
    data: any,
}

const List = ({ data }: ListProps) => {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <li
            onMouseOver={() => setIsOpen(true)}
            onMouseOut={() => setIsOpen(false)}
            className="relative mx-1 transition duration-200 font-light hover:text-blue-500">
            {
                Object.keys(data).includes('submenu') ?
                    <>
                        <div className="flex items-center justify-between">
                            <p className="cursor-pointer">{data.title}</p>
                            <svg onClick={() => setIsOpen(!isOpen)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`w-4 h-4 lg:mt-1 lg:ml-2 transition duration-200 ${isOpen && 'rotate-180'}`}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>

                        <div
                            onMouseOver={() => setIsOpen(true)}
                            onMouseOut={() => setIsOpen(false)}
                            className={`${isOpen ? 'lg:absolute' : 'hidden'} z-50 bg-[#0b122a] p-5 min-w-[200px] lg:-ml-5`}>
                            {
                                data.submenu !== undefined &&
                                data.submenu.map((item: { title: string, href: string }, index: number) => {
                                    return (
                                        <div>
                                            <Submenu
                                                key={index}
                                                title={item.title}
                                                href={item.href}
                                                isOpen={isOpen}
                                                setIsOpen={setIsOpen}
                                            />
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </>
                    :
                    <a href={data?.href}>{data.title}</a>
            }
        </li>
    )
}

interface SubmenuProps {
    title?: string,
    href?: string,
    isOpen?: boolean,
    setIsOpen: Function
}

const Submenu = ({ title, href, isOpen, setIsOpen }: SubmenuProps) => {
    return (
        <div
            className={`hover:text-blue-500 text-white transition duration-200 my-3`}>
            <a href={href}>{title}</a>
        </div>
    );
}

export default TorcheAppBar;