Add Switcher on all pages

This commit is contained in:
2021-10-03 23:16:59 +02:00
parent 1e921ab4a0
commit 252b58993a
5 changed files with 181 additions and 1 deletions

View File

@@ -0,0 +1,58 @@
<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>
<div class="switcher" class:is-open={isOpen}>
<nav class="switcher__links">
<ul>
{#each links as { icon, alt, url, text }}
<li>
<a href={url} sveltekit:prefetch sveltekit:noscroll>
<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>
</div>