Use Switcher links from API and animate component

This commit is contained in:
2022-01-24 22:19:20 +01:00
parent 05fa4b095d
commit 9e3a3be60b
2 changed files with 17 additions and 24 deletions

View File

@@ -1,35 +1,17 @@
<script lang="ts">
import { page } from '$app/stores'
import { getContext } from 'svelte'
import { fly, reveal } from '$animations/index'
// Components
import Icon from '$components/atoms/Icon.svelte'
export let isOver: boolean = false
const { settings: { switcher_links } } = getContext('global')
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
@@ -55,14 +37,24 @@
<aside class="switcher" bind:this={switcherEl}
class:is-open={isOpen}
class:is-over={isOver}
use:reveal={{
animation: fly,
options: {
from: 24,
to: 0,
duration: 1000,
easing: 'easeOutQuart',
delay: 600,
}
}}
>
<ul class="switcher__links">
{#each links as { icon, iconLabel, url, text }}
{#each switcher_links as { text, url, icon, icon_label }}
<li class:is-active={$page.url.pathname.startsWith(url)}>
<a href={url} on:click={toggleSwitcher}
sveltekit:noscroll sveltekit:prefetch
>
<Icon class="icon" icon={icon} label={iconLabel} />
<Icon class="icon" icon={icon} label={icon_label} />
<span>{text}</span>
</a>
</li>

View File

@@ -114,6 +114,7 @@
limit_new
instagram
footer_links
switcher_links
newsletter_subtitle
newsletter_url
newsletter_text