Use Switcher links from API and animate component
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user