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

@@ -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: {

src/routes/+layout.svelte

@@ -72,7 +72,7 @@
 </svelte:head>
 
 
-<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
+<Switcher />
 
 <slot />
 

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;

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;
+    z-index: 100;
-    bottom: var(--offset);
+    bottom: var(--switcher-offset);
-    left: var(--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;
+    }
 }

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) {