Change Switcher labels and close it when clicking outside

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>