<script>
    import links from "../../data/links.json";
</script>

<a href="#main-content" class="skip-to-main">Skip to main content</a>
<nav>
    <span class="brand icon-link">
        <img src="/favicon.png" alt="a black cat with large eyes"/>
        <a href="/">pancakes</a>
    </span>
    <ul class="links">
        {#each links as link}
            {#if link.href && !link.mainOnly}
                <li>
                    <div class="icon-link">
                        <img
                                class={link.iconInvert ? "invert" : ""}
                                src={"/assets/icons/" + link.icon}
                                alt={link.name}
                        />
                        <a href={link.href} target="_blank">
                            {link.name}
                        </a>
                    </div>
                </li>
            {/if}
        {/each}
    </ul>
</nav>

<style>
    a.skip-to-main {
        position: absolute;
        top: -5rem;
        left: 1rem;
        transition: top 0.5s;
    }

    a.skip-to-main:focus {
        top: 1rem;
    }

    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
    }

    nav > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .icon-link > a {
        padding-left: 0.15rem;
        line-height: 2em;
    }

    .icon-link > img {
        display: inline-block;
        width: 2em;
        max-height: 2em;
        vertical-align: middle;
        margin-right: 0.25rem;
    }

    .brand {
        font-size: x-large;
    }

    .brand > img {
        border-radius: 20%;
    }

    .brand > a {
        font-weight: bold;
        text-decoration: none;
    }
</style>
