Use Switcher links from API and animate component
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -114,6 +114,7 @@
|
||||
limit_new
|
||||
instagram
|
||||
footer_links
|
||||
switcher_links
|
||||
newsletter_subtitle
|
||||
newsletter_url
|
||||
newsletter_text
|
||||
|
||||
Reference in New Issue
Block a user