From 778e15dfbd847002d25d411194a7bc973786935b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 30 Nov 2021 22:16:54 +0100
Subject: [PATCH] Add active class on Switcher current link

---
 src/components/molecules/Switcher.svelte |  4 +++-
 src/style/molecules/_switcher.scss       | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index c6f63e1..f76fb6d 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { page } from '$app/stores'
+    // Components
     import Icon from '$components/atoms/Icon.svelte'
 
     export let isOver: boolean = false
@@ -57,7 +59,7 @@
     <nav class="switcher__links">
         <ul>
             {#each links as { icon, iconLabel, url, text }}
-                <li>
+                <li class:is-active={$page.path === url}>
                     <a href={url} on:click={toggleSwitcher}
                         sveltekit:noscroll sveltekit:prefetch
                     >
diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss
index b087ce4..7f9de53 100644
--- a/src/style/molecules/_switcher.scss
+++ b/src/style/molecules/_switcher.scss
@@ -34,6 +34,7 @@
 
         li {
             display: block;
+            margin: 1px 0;
             line-height: 1.5;
         }
         a {
@@ -48,7 +49,7 @@
             transition: background-color 0.4s ease-out;
 
             &:hover {
-                background-color: rgba($color-tertiary, 0.15);
+                background: rgba($color-tertiary, 0.2);
             }
         }
         .icon {
@@ -59,6 +60,13 @@
             margin-right: 16px;
             color: $color-secondary-light;
         }
+
+        // Active link
+        .is-active {
+            a {
+                background: rgba($color-secondary, 0.25);
+            }
+        }
     }
 
     // Button