<script>
    import links from "../../data/links.json";
    import { page } from "$app/stores";
</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>
    {#if $page.url.pathname !== "/"}
        <ul>
            {#each links as link}
                <li>
                    <div class="icon-link">
                        <img
                            src={"/assets/icons/" + link.icon}
                            alt={link.name}
                        />
                        <a href={link.href} target="_blank">
                            {link.name}
                        </a>
                    </div>
                </li>
            {/each}
        </ul>
    {/if}
</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;
    }

    a {
        color: var(--foreground);
    }

    a:hover {
        background-color: var(--foreground);
        color: var(--background);
    }

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

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

    .brand > a,
    .brand > a:visited {
        font-weight: bold;
        text-decoration-color: var(--accent);
        text-decoration-style: wavy;
    }

    .brand > a:hover {
        background-color: var(--accent);
        color: var(--background);
    }
</style>
