blob: 9ea8a04de63b7d41eb6c7d873a110d022ebcbbc9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<script lang="ts">
import { pages } from '$lib/pages';
const {
selectedIndex = $bindable(0)
}: {
selectedIndex: number;
} = $props();
const items = pages;
</script>
<section id="sidebar">
{#each items as item, index}
<!-- svelte-ignore a11y_consider_explicit_label -->
<a href={item.href} class:selected={index == selectedIndex} class="flex items-center gap-2">
<img
src={item.icon}
alt=" "
class="w-6"
style="filter: {index == selectedIndex
? 'invert(68%) sepia(97%) saturate(749%) hue-rotate(97deg) brightness(154%) contrast(101%)'
: 'none'};"
/>
<span>{item.name}</span>
</a>
{/each}
</section>
<style>
#sidebar {
position: fixed;
background-color: var(--bg-primary);
height: 100vh;
width: 200px;
padding-top: 72px;
color: white;
display: flex;
flex-direction: column;
gap: 8px;
}
#sidebar > a {
padding: 8px;
padding-right: 0;
transition-duration: 0.2s;
border-color: var(--text-lime);
}
#sidebar > a:is(:hover, :focus) {
background-color: var(--bg-secondary);
}
.selected {
color: var(--text-lime);
background-color: var(--bg-secondary);
font-weight: bold;
border-right: 6px var(--text-lime) solid;
width: 100%;
}
</style>
|
