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

View File

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