chore: merge components and stylesheets in same directory name

apps/website/src/components/molecules/Switcher/Switcher.svelte

@@ -0,0 +1,73 @@
+<style lang="scss">
+    @import "./Switcher";
+</style>
+
+<script lang="ts">
+    import { page } from '$app/stores'
+    import { getContext } from 'svelte'
+    import reveal from '$animations/reveal'
+    import { sendEvent } from '$utils/analytics'
+    // Components
+    import Icon from '$components/atoms/Icon.svelte'
+
+    const { settings: { switcher_links } }: any = getContext('global')
+
+    let switcherEl: HTMLElement
+    let isOpen = false
+
+
+    /**
+     * Toggle switcher open state
+     */
+    const toggleSwitcher = () => {
+        isOpen = !isOpen
+
+        // Record opening event
+        !isOpen && sendEvent('switcherOpen')
+    }
+
+    /**
+     * Detect outside click
+     */
+    const windowClick = ({ target }) => {
+        if (!switcherEl.contains(target) && isOpen) {
+            // Close switcher
+            toggleSwitcher()
+        }
+    }
+</script>
+
+<svelte:window on:click={windowClick} />
+
+<aside class="switcher" bind:this={switcherEl}
+    class:is-open={isOpen}
+    use:reveal={{
+        animation: { y: [24, 0], opacity: [0, 1] },
+        options: {
+            duration: 1,
+            delay: 0.6,
+            threshold: 0,
+        },
+    }}
+>
+    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
+        on:click={toggleSwitcher}
+    >
+        <span>
+            {#each Array(3) as _}
+                <i />
+            {/each}
+        </span>
+    </button>
+
+    <ul class="switcher__links" data-sveltekit-noscroll>
+        {#each switcher_links as { text, url, icon, icon_label }}
+            <li class:is-active={$page.url.pathname === url}>
+                <a href={url} on:click={toggleSwitcher} tabindex="0">
+                    <Icon class="icon" icon={icon} label={icon_label} />
+                    <span>{text}</span>
+                </a>
+            </li>
+        {/each}
+    </ul>
+</aside>