From 8a53079fa1cb5415ad4a3a787a1f7058fb0609bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 16 Nov 2021 23:47:24 +0100
Subject: [PATCH] Change Switcher labels and close it when clicking outside

---
 src/components/molecules/Switcher.svelte | 35 ++++++++++++++++++------
 src/style/molecules/_switcher.scss       |  4 ---
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 2856a5a..f1f0511 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+    // Components
     import Icon from '$components/atoms/Icon.svelte'
 
-    let isOpen: boolean = false
+    let switcherEl: HTMLElement
+    let isOpen = false
+
+
+    const dispatch = createEventDispatcher()
 
     // Links
     const links = [
@@ -9,19 +15,19 @@
             icon: "globe",
             iconLabel: "Globe icon",
             url: "/locations",
-            text: "Discover locations"
+            text: "Explore Locations"
         },
         {
             icon: "photos",
             iconLabel: "Photos icon",
             url: "/photos",
-            text: "Browse all photos"
+            text: "Photo Grid"
         },
         {
             icon: "bag",
             iconLabel: "Bag icon",
             url: "/shop",
-            text: "Shop the prints"
+            text: "Shop Posters"
         }
     ]
 
@@ -32,9 +38,22 @@
     const toggleSwitcher = () => {
         isOpen = !isOpen
     }
+
+
+    /**
+     * Detect outside click
+     */
+    const windowClick = ({ target }) => {
+		if (!switcherEl.contains(target)) {
+            // Close switcher
+			isOpen = false
+		}
+	}
 </script>
 
-<aside class="switcher" class:is-open={isOpen}>
+<svelte:window on:click={windowClick} />
+
+<aside class="switcher" class:is-open={isOpen} bind:this={switcherEl}>
     <nav class="switcher__links">
         <ul>
             {#each links as { icon, iconLabel, url, text }}
@@ -52,9 +71,9 @@
         on:click={toggleSwitcher}
     >
         <span>
-            <i />
-            <i />
-            <i />
+            {#each Array(3) as _}
+                <i />
+            {/each}
         </span>
     </button>
 </aside>
\ No newline at end of file
diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss
index 326ca8e..1a6034a 100644
--- a/src/style/molecules/_switcher.scss
+++ b/src/style/molecules/_switcher.scss
@@ -74,7 +74,6 @@
         span {
             display: inline-flex;
             flex-flow: column;
-            transition: transform 0.8s var(--ease-quart);
         }
         // Dot
         i {
@@ -113,9 +112,6 @@
             }
 
             &__button {
-                span {
-                    transform: rotate3d(70deg, 120deg, 180deg) translateZ(0);
-                }
                 i {
                     &:nth-child(1) { transform: translate3d(-7px, 8px, 0); }
                     &:nth-child(2) { transform: translate3d(7px, -2px, 0); }