<script lang="ts">
    let isOpen: boolean = false

    // Links
    const links = [
        {
            "icon": "globe",
            "alt": "Globe",
            "url": "/locations",
            "text": "Discover locations"
        },
        {
            "icon": "photos",
            "alt": "Photos",
            "url": "/photos",
            "text": "Browse all photos"
        },
        {
            "icon": "bag",
            "alt": "Shopping bag",
            "url": "/shop",
            "text": "Shop the prints"
        }
    ]


    /**
     * Toggle switcher open state
     */
    const toggleSwitcher = () => {
        isOpen = !isOpen
    }
</script>

<aside class="switcher" class:is-open={isOpen}>
    <nav class="switcher__links">
        <ul>
            {#each links as { icon, alt, url, text }}
                <li>
                    <a href={url} on:click={toggleSwitcher} sveltekit:prefetch>
                        <img src="/images/icons/{icon}.svg" alt={alt} class="icon" width="32" height="32" loading="lazy">
                        <span>{text}</span>
                    </a>
                </li>
            {/each}
        </ul>
    </nav>

    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu"
        on:click={toggleSwitcher}
    >
        <span>
            <i />
            <i />
            <i />
        </span>
    </button>
</aside>