From be51fea5debc7b68dfee0e7c8ab9dc69e4430d9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 20 Sep 2022 10:32:35 +0200
Subject: [PATCH] Put Switcher over and next to Footer

Clever solution to keep it over but next to the title and not hide it
---
 src/components/molecules/Switcher.svelte |  4 ----
 src/routes/+layout.svelte                |  2 +-
 src/style/_base.scss                     |  9 +++++++++
 src/style/molecules/_switcher.scss       | 18 +++++++++++-------
 src/style/organisms/_footer.scss         |  7 ++++---
 5 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 3a20484..37d58d0 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -9,8 +9,6 @@
     // Components
     import Icon from '$components/atoms/Icon.svelte'
 
-    export let isOver: boolean = false
-
     const { settings: { switcher_links }}: any = getContext('global')
 
     let switcherEl: HTMLElement
@@ -24,7 +22,6 @@
         isOpen = !isOpen
     }
 
-
     /**
      * Detect outside click
      */
@@ -40,7 +37,6 @@
 
 <aside class="switcher" bind:this={switcherEl}
     class:is-open={isOpen}
-    class:is-over={isOver}
     use:reveal={{
         animation: { y: [24, 0], opacity: [0, 1] },
         options: {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b076f62..2048150 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -72,7 +72,7 @@
 </svelte:head>
 
 
-<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
+<Switcher />
 
 <slot />
 
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 4203d86..fcaa4e8 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -3,11 +3,20 @@
     // Sizes
     --container-width: #{$container-width};
 
+    // Offsets
+    --switcher-offset: 16px;
+
     // Animation
     --ease-quart: cubic-bezier(.165, .84, .44, 1);
     --ease-cubic: cubic-bezier(.785, .135, .15, .86);
     --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
 }
+@include bp (sm) {
+    :root {
+        // Offsets
+        --switcher-offset: clamp(20px, 3vw, 40px);
+    }
+}
 
 html {
     font: #{$base-font-size}/1.2 $font-sans;
diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss
index 05ad23c..71f8a5a 100644
--- a/src/style/molecules/_switcher.scss
+++ b/src/style/molecules/_switcher.scss
@@ -1,16 +1,12 @@
 .switcher {
-    --offset: 16px;
     --button-size: 44px;
     $shadow-color: rgba(0, 0, 0, 0.05);
     position: fixed;
-    z-index: 101;
-    bottom: var(--offset);
-    left: var(--offset);
+    z-index: 100;
+    bottom: var(--switcher-offset);
+    left: var(--switcher-offset);
     pointer-events: none;
 
-    @include bp (sm) {
-        --offset: clamp(20px, 3vw, 40px);
-    }
     @include bp (md) {
         --button-size: 56px;
     }
@@ -165,4 +161,12 @@
             }
         }
     }
+
+    // Sticky (end of page)
+    &.is-sticky {
+        // background: red !important;
+        // position: sticky;
+        // bottom: 0;
+        // z-index: 100;
+    }
 }
\ No newline at end of file
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index 17784f9..71004e8 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -1,9 +1,10 @@
 .footer {
-    position: relative;
-    z-index: 200;
     background-color: $color-primary-darker;
     padding: 24px 0 40px;
 
+    @include bp (sm) {
+        padding: 24px 0;
+    }
     @include bp (md) {
         padding: 0;
         height: 120px;
@@ -28,7 +29,7 @@
         @include bp (sm) {
             grid-column: 2 / span 5;
             grid-row: 1;
-            margin: auto 0;
+            margin: auto 0 auto calc(var(--switcher-offset) + clamp(24px, 6vw, 8px));
         }
 
         :global(.site-title) {