From 9e3a3be60b44d0b2125656e202a5e5a39db691f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 24 Jan 2022 22:19:20 +0100
Subject: [PATCH] Use Switcher links from API and animate component

---
 src/components/molecules/Switcher.svelte | 40 ++++++++++--------------
 src/routes/__layout.svelte               |  1 +
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 29706c1..c1bbd1a 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -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>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 4a9d7b5..ed1c4ea 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -114,6 +114,7 @@
                     limit_new
                     instagram
                     footer_links
+                    switcher_links
                     newsletter_subtitle
                     newsletter_url
                     newsletter_text