<script lang="ts">
    import Icon from '$components/atoms/Icon.svelte'

    let isOpen: boolean = false

    // Links
    const links = [
        {
            icon: "globe",
            iconLabel: "Globe icon",
            url: "/locations",
            text: "Discover locations"
        },
        {
            icon: "photos",
            iconLabel: "Photos icon",
            url: "/photos",
            text: "Browse all photos"
        },
        {
            icon: "bag",
            iconLabel: "Bag icon",
            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, iconLabel, url, text }}
                <li>
                    <a href={url} on:click={toggleSwitcher} sveltekit:prefetch>
                        <Icon class="icon" icon={icon} label={iconLabel} />
                        <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>