From a9651b6b0247274cd1d5c81f16ed310d0d61b148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 23 Nov 2021 23:04:47 +0100
Subject: [PATCH] Position Switcher for mobile and on Viewer

---
 src/components/molecules/Switcher.svelte |  7 +-
 src/routes/__layout.svelte               |  2 +-
 src/style/molecules/_switcher.scss       | 91 +++++++++++++++++++-----
 3 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 623a62b..c6f63e1 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import Icon from '$components/atoms/Icon.svelte'
 
+    export let isOver: boolean = false
+
     let switcherEl: HTMLElement
     let isOpen = false
 
@@ -48,7 +50,10 @@
 
 <svelte:window on:click={windowClick} />
 
-<aside class="switcher" class:is-open={isOpen} bind:this={switcherEl}>
+<aside class="switcher" bind:this={switcherEl}
+    class:is-open={isOpen}
+    class:is-over={isOver}
+>
     <nav class="switcher__links">
         <ul>
             {#each links as { icon, iconLabel, url, text }}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7c2297c..bf206c4 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -49,7 +49,7 @@
     })
 </script>
 
-<Switcher />
+<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
 
 <slot />
 
diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss
index 1a6034a..0de2532 100644
--- a/src/style/molecules/_switcher.scss
+++ b/src/style/molecules/_switcher.scss
@@ -1,27 +1,32 @@
 .switcher {
+    --offset: 16px;
+    --button-size: 44px;
     $shadow-color: rgba(0, 0, 0, 0.05);
     position: fixed;
     z-index: 101;
-    bottom: 16px;
-    left: 16px;
+    bottom: var(--offset);
+    left: var(--offset);
     pointer-events: none;
 
     @include bp (sm) {
-        bottom: 20px;
-        left: 20px;
+        --offset: 20px;
     }
     @include bp (md) {
-        bottom: 40px;
-        left: 40px;
+        --offset: 40px;
+        --button-size: 56px;
     }
 
     // Links
     &__links {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        min-width: 240px;
         opacity: 0;
         padding: 8px;
         background: $color-primary-tertiary20;
         border-radius: 12px;
-        margin-bottom: 16px;
         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);
@@ -58,8 +63,8 @@
     // Button
     &__button {
         $shadow-color: rgba(0, 0, 0, 0.05);
-        width: 56px;
-        height: 56px;
+        width: var(--button-size);
+        height: var(--button-size);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -78,12 +83,18 @@
         // Dot
         i {
             display: block;
-            width: 6px;
-            height: 6px;
-            margin: 2px 0;
+            width: 4px;
+            height: 4px;
+            margin: 1.5px 0;
             border-radius: 100%;
             background: #fff;
             transition: transform 0.8s var(--ease-quart);
+
+            @include bp (md) {
+                width: 6px;
+                height: 6px;
+                margin: 2px 0;
+            }
         }
 
         // Hover
@@ -98,7 +109,10 @@
     }
 
 
-    // Open state
+    /*
+    ** States
+    */
+    // Open
     &.is-open {
         .switcher {
             &__links {
@@ -113,11 +127,56 @@
 
             &__button {
                 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); }
+                    &:nth-child(1) {
+                        transform: translate3d(-6px, 5px, 0);
+
+                        @include bp (md) {
+                            transform: translate3d(-7px, 8px, 0);
+                        }
+                    }
+                    &:nth-child(2) {
+                        transform: translate3d(6px, -2px, 0);
+
+                        @include bp (md) {
+                            transform: translate3d(7px, -2px, 0);
+                        }
+                    }
+                    &:nth-child(3) {
+                        transform: translate3d(0px, -2px, 0);
+
+                        @include bp (md) {
+                            transform: translate3d(0px, -3px, 0);
+                        }
+                    }
                 }
             }
         }
     }
+
+    // Over (for Photo viewer)
+    &.is-over {
+        top: var(--offset);
+        right: var(--offset);
+        left: auto;
+        bottom: auto;
+
+        // Links
+        .switcher__links {
+            top: calc(var(--button-size) + 8px);
+            right: 0;
+            left: auto;
+
+            @include bp (md) {
+                top: auto;
+                bottom: calc(var(--button-size) + 24px);
+            }
+        }
+
+        @include bp (md) {
+            top: auto;
+            right: var(--offset);
+            left: auto;
+            bottom: var(--offset);
+        }
+    }
 }
\ No newline at end of file