<script>
    import { page } from '$app/state';
</script>

<nav>
    <ul>
        <li class:selected={page.url.pathname === "/"}>
            <a href="/" >Start</a>
        </li>
        <li class:selected={page.url.pathname.startsWith("/events")}>
            <a href="/events">Events</a>
        </li>
        <li class:selected={page.url.pathname === "/rules"}>
            <a href="/rules">Regeln</a>
        </li>
        <!--<li class:selected={page.url.pathname === "/debug"}>
            <a href="/debug">Debug</a>
        </li>-->
    </ul>
</nav>

<style>
    ul {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;

        list-style: none;
    }

    li {
        transition: border-bottom-color linear 0.2s;
        padding: 0.6rem 0.45rem;
        border-bottom: 3px var(--tg-theme-button-color) solid;
        filter: grayscale(0.8);

        &.selected {
            filter: none;
            border-bottom: 3px var(--tg-theme-button-color) solid;
        }
    }

    a {
        font-size: 1.35rem;
        text-decoration: none;
    }
</style>