---
interface Props {
    loggedIn: string;
}

interface NavElement {
    title: string;
    type: "simple" | "dropdown";
    url: string;
    dropdowns?: Array<NavElement>;
}

const listOfElements: Array<NavElement> = [{
    title: "home",
    type: "simple",
    url: "#"
}, {
    title: "login",
    type: "simple",
    url: "/"
}, {
    title: "dropdown",
    type: "dropdown",
    url: "about:blank",
    dropdowns: [{
        title: "chuj",
        type: "simple",
        url: "aaa"
    }]
}];

const { loggedIn } = Astro.props;
---

<nav>
    <ul>
        {listOfElements.map(element =>
            element.type === "dropdown" ?
            <div class="nav-item nav-item-dropdown">
                <li><a href={element.url} class="nav-url">{element.title}</a></li>
                <div>
                    <ul>{element.dropdowns?.map(drop => <li class="nav-item-dropdown-content"><a href={drop.url} class="nav-url">{drop.title}</a></li>)}</ul>
                </div>
            </div> : // else
            <li class="nav-item"><a href={element.url} class="nav-url">{element.title}</a></li>
        )}
    </ul>
</nav>

<style>
nav {
    color: yellow;
    background-color: gray;
    border-radius: 15px;
}

nav ul {
    list-style: none;
    display: flex;
    padding-left: 15px;
}

.nav-item {
    flex-direction: row;
    font-size: xx-large;
}

.nav-item:not(:first-child) {
    margin-left: 20px;
    color: green;
}

.nav-item-dropdown {
    color: red;
    font-size: xx-large;
}

.nav-item-dropdown-content {
    display: none;
}

.nav-item-dropdown:hover .nav-item-dropdown-content {
    display: block;
}

.nav-url {
    text-decoration: none;
    color: inherit;
}
</style>