60 lines
1.4 KiB
Svelte
60 lines
1.4 KiB
Svelte
<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> |