Add Switcher on all pages

src/components/molecules/Switcher.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    let isOpen: boolean = false
+
+    // Links
+    const links = [
+        {
+            "icon": "globe",
+            "alt": "Globe",
+            "url": "/locations",
+            "text": "Discover locations"
+        },
+        {
+            "icon": "photos",
+            "alt": "Photos",
+            "url": "/photos",
+            "text": "Browse all photos"
+        },
+        {
+            "icon": "bag",
+            "alt": "Shopping bag",
+            "url": "/shop",
+            "text": "Shop the prints"
+        }
+    ]
+
+
+    /**
+     * Toggle switcher open state
+     */
+    const toggleSwitcher = () => {
+        isOpen = !isOpen
+    }
+</script>
+
+<div class="switcher" class:is-open={isOpen}>
+    <nav class="switcher__links">
+        <ul>
+            {#each links as { icon, alt, url, text }}
+                <li>
+                    <a href={url} sveltekit:prefetch sveltekit:noscroll>
+                        <img src="/images/icons/{icon}.svg" alt={alt} class="icon" width="32" height="32" loading="lazy">
+                        <span>{text}</span>
+                    </a>
+                </li>
+            {/each}
+        </ul>
+    </nav>
+
+    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu"
+        on:click={toggleSwitcher}
+    >
+        <span>
+            <i />
+            <i />
+            <i />
+        </span>
+    </button>
+</div>

src/routes/__layout.svelte

@@ -3,6 +3,7 @@
     import { setContext } from 'svelte'
     import '$utils/polyfills'
     // Components
+    import Switcher from '$components/molecules/Switcher.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
     export let data: any
@@ -15,6 +16,8 @@
     })
 </script>
 
+<Switcher />
+
 <slot />
 
 <Footer />

src/routes/index.svelte

@@ -48,11 +48,12 @@
             from <strong>{count.locations} cities</strong>
             of <strong>{count.countries} countries</strong>
         </p>
+
         <div class="cards">
             <BoxCTA
                 url="{path}#locations"
                 icon="/images/icons/globe.svg"
-                label="discover locations"
+                label="Discover locations"
                 alt="Globe"
             />
             <BoxCTA

src/style/molecules/_switcher.scss

@@ -0,0 +1,117 @@
+.switcher {
+    $shadow-color: rgba(0, 0, 0, 0.05);
+    position: fixed;
+    z-index: 999;
+    bottom: 0;
+    left: 0;
+
+    @include bp (sm) {
+        bottom: 40px;
+        left: 40px;
+    }
+
+    // Links
+    &__links {
+        opacity: 0;
+        padding: 8px;
+        background: $color-primary-tertiary20;
+        border-radius: 12px;
+        margin-bottom: 16px;
+        pointer-events: none;
+        transform: translate3d(0, 8px, 0);
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+        transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
+
+        li {
+            display: block;
+            line-height: 1.5;
+        }
+        a {
+            display: flex;
+            align-items: center;
+            padding: 8px 16px 8px 10px;
+            color: #fff;
+            font-weight: 900;
+            font-size: rem(16px);
+            text-decoration: none;
+            border-radius: 6px;
+            transition: background-color 0.4s ease-out;
+
+            &:hover {
+                background-color: rgba($color-tertiary, 0.15);
+            }
+        }
+        .icon {
+            display: block;
+            width: 32px;
+            height: 32px;
+            object-fit: contain;
+            margin-right: 16px;
+        }
+    }
+
+    // Button
+    &__button {
+        $shadow-color: rgba(0, 0, 0, 0.05);
+        width: 56px;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: $color-primary-tertiary20;
+        border-radius: 100%;
+        box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
+        transition: background-color 0.6s var(--ease-quart);
+
+        // Dots container
+        span {
+            display: inline-flex;
+            flex-flow: column;
+            transition: transform 0.8s var(--ease-quart);
+        }
+        // Dot
+        i {
+            display: block;
+            width: 6px;
+            height: 6px;
+            margin: 2px 0;
+            border-radius: 100%;
+            background: #fff;
+            transition: transform 0.8s var(--ease-quart);
+        }
+
+        // Hover
+        &:hover {
+            background-color: #7e5288;
+
+            i {
+                &:nth-child(1) { transform: translate3d(0, -2px, 0); }
+                &:nth-child(3) { transform: translate3d(0, 2px, 0); }
+            }
+        }
+    }
+
+
+    // Open state
+    &.is-open {
+        .switcher {
+            &__links {
+                opacity: 1;
+                pointer-events: auto;
+                transform: translate3d(0, 0, 0);
+            }
+
+            &__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); }
+                    &:nth-child(3) { transform: translate3d(0px, -3px, 0); }
+                }
+            }
+        }
+    }
+}

src/style/style.scss

@@ -37,6 +37,7 @@
 // Molecules
 @import "molecules/photo-card";
 @import "molecules/location";
+@import "molecules/switcher";
 
 // Organisms
 @import "organisms/locations";