---
import {Image} from 'astro:assets';
import {Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems} from "astro-navbar";

import logoTitle from "../assets/logo-title.svg";

const navItems = [
    {name: 'Home', href: '/'},
    {
        name: 'Experience↓',
        href: "#",
        dropdown: [
            {name: 'SpaceX    - Hardware Test Engineer II', href: '/experience/spacex-hardware-test-engineer'},
            {
                name: 'SpaceX    - Avionics Test Engineer (Intern)',
                href: '/experience/spacex-avionics-test-engineer-intern'
            },
            {name: 'SARL      - Automation Engineer (Student)', href: '/experience/sarl-automation-engineer-student'},
            {
                name: 'CEOAS OMG - Software/Electronics Engineer (Student)',
                href: '/experience/ceoas-omg-software-electronics-engineer-student'
            },
            {
                name: 'OSURC     - Member/Officer/Sub-Team Lead (Student)',
                href: '/experience/osurc-member-officer-sub-team-lead'
            },
        ]
    },
    {name: 'Projects↓', href: '/project/project'},
    {name: 'Hobbies↓', href: '/hobby/hobby'},
    {name: 'Resume', href: '/resume'},
    {name: 'Contact', href: '/contact'}
];
---

<header class="navbar lg:flex p-5 gap-5">
    <Astronav>
        <div class="flex w-full justify-between">
            <a href="/">
                <Image src={logoTitle} alt="Logo Title" height="50" loading="eager"/>
            </a>
            <div class="block lg:hidden">
                <MenuIcon class="w-4 h-4 text-gray-800"/>
            </div>
        </div>
        <MenuItems class="hidden lg:flex">
            <ul class="flex flex-col lg:flex-row lg:gap-5">
                <li>
                    <a href="/">Home</a>
                </li>
                <!--<li>-->
                <!--    <Dropdown class="group">-->
                <!--        <button class="flex items-center">-->
                <!--            <span> Experience </span>-->
                <!--            <svg-->
                <!--                    xmlns="http://www.w3.org/2000/svg"-->
                <!--                    fill="none"-->
                <!--                    viewBox="0 0 24 24"-->
                <!--                    stroke-width="3"-->
                <!--                    stroke="currentColor"-->
                <!--                    class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
                <!--                <path-->
                <!--                        stroke-linecap="round"-->
                <!--                        stroke-linejoin="round"-->
                <!--                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
                <!--            </svg>-->
                <!--        </button>-->
                <!--        <DropdownItems class="relative">-->
                <!--            <div class="bg-black px-1 py-2 absolute top-0">-->
                <!--                <ul>-->
                <!--                    <li>-->
                <!--                        <a class="whitespace-nowrap" href="#">SpaceX</a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="whitespace-nowrap" href="#">Sinnhuber Aquatic Research Laboratory</a>-->
                <!--                    </li>-->
                <!--                    <li>-->
                <!--                        <a class="whitespace-nowrap" href="#">CEOAS Ocean Mixing Group</a>-->
                <!--                    </li>-->
                <!--                </ul>-->
                <!--            </div>-->
                <!--        </DropdownItems>-->
                <!--    </Dropdown>-->
                <!--</li>-->
                <!--<li>-->
                <!--    <Dropdown class="group">-->
                <!--        <button class="flex items-center">-->
                <!--            <span> Projects </span>-->
                <!--            <svg-->
                <!--                    xmlns="http://www.w3.org/2000/svg"-->
                <!--                    fill="none"-->
                <!--                    viewBox="0 0 24 24"-->
                <!--                    stroke-width="3"-->
                <!--                    stroke="currentColor"-->
                <!--                    class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
                <!--                <path-->
                <!--                        stroke-linecap="round"-->
                <!--                        stroke-linejoin="round"-->
                <!--                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
                <!--            </svg>-->
                <!--        </button>-->
                <!--        <DropdownItems class="relative">-->
                <!--            <div class="bg-black absolute top-0">-->
                <!--                <ul>-->
                <!--                    <li>-->
                <!--                        <a href="#">Placeholder 1</a>-->
                <!--                    </li>-->
                <!--                </ul>-->
                <!--            </div>-->
                <!--        </DropdownItems>-->
                <!--    </Dropdown>-->
                <!--</li>-->
                <!--<li>-->
                <!--    <Dropdown class="group">-->
                <!--        <button class="flex items-center">-->
                <!--            <span> Hobbies </span>-->
                <!--            <svg-->
                <!--                    xmlns="http://www.w3.org/2000/svg"-->
                <!--                    fill="none"-->
                <!--                    viewBox="0 0 24 24"-->
                <!--                    stroke-width="3"-->
                <!--                    stroke="currentColor"-->
                <!--                    class="w-3 h-3 mt-0.5 group-open:rotate-180">-->
                <!--                <path-->
                <!--                        stroke-linecap="round"-->
                <!--                        stroke-linejoin="round"-->
                <!--                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>-->
                <!--            </svg>-->
                <!--        </button>-->
                <!--        <DropdownItems class="relative">-->
                <!--            <div class="bg-black absolute top-0">-->
                <!--                <ul>-->
                <!--                    <li>Menu 1</li>-->
                <!--                    <li>Menu 2</li>-->
                <!--                    <li>Menu 3</li>-->
                <!--                </ul>-->
                <!--            </div>-->
                <!--        </DropdownItems>-->
                <!--    </Dropdown>-->
                <!--</li>-->
                <!--<li>-->
                <!--    <a href="/resume">Resume</a>-->
                <!--</li>-->
                <li>
                    <a href="/contact">Contact</a>
                </li>
            </ul>
        </MenuItems>
    </Astronav>
</header>