Add active class on Switcher current link
This commit is contained in:
@@ -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
|
||||
>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user