Add active class on Switcher current link

This commit is contained in:
2021-11-30 22:16:54 +01:00
parent a7eb9782f5
commit 778e15dfbd
2 changed files with 12 additions and 2 deletions

View File

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

View File

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