83 lines
1.9 KiB
Svelte
83 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores'
|
|
// Components
|
|
import Icon from '$components/atoms/Icon.svelte'
|
|
|
|
export let isOver: boolean = false
|
|
|
|
let switcherEl: HTMLElement
|
|
let isOpen = false
|
|
|
|
// Links
|
|
const links = [
|
|
{
|
|
icon: "globe",
|
|
iconLabel: "Globe icon",
|
|
url: "/locations",
|
|
text: "Explore Locations"
|
|
},
|
|
{
|
|
icon: "photos",
|
|
iconLabel: "Photos icon",
|
|
url: "/photos",
|
|
text: "Photo Grid"
|
|
},
|
|
{
|
|
icon: "bag",
|
|
iconLabel: "Bag icon",
|
|
url: "/shop",
|
|
text: "Shop Posters"
|
|
}
|
|
]
|
|
|
|
|
|
/**
|
|
* Toggle switcher open state
|
|
*/
|
|
const toggleSwitcher = () => {
|
|
isOpen = !isOpen
|
|
}
|
|
|
|
|
|
/**
|
|
* Detect outside click
|
|
*/
|
|
const windowClick = ({ target }) => {
|
|
if (!switcherEl.contains(target) && isOpen) {
|
|
// Close switcher
|
|
toggleSwitcher()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:click={windowClick} />
|
|
|
|
<aside class="switcher" bind:this={switcherEl}
|
|
class:is-open={isOpen}
|
|
class:is-over={isOver}
|
|
>
|
|
<nav class="switcher__links">
|
|
<ul>
|
|
{#each links as { icon, iconLabel, url, text }}
|
|
<li class:is-active={$page.path === url}>
|
|
<a href={url} on:click={toggleSwitcher}
|
|
sveltekit:noscroll 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" tabindex="0"
|
|
on:click={toggleSwitcher}
|
|
>
|
|
<span>
|
|
{#each Array(3) as _}
|
|
<i />
|
|
{/each}
|
|
</span>
|
|
</button>
|
|
</aside> |