diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:07:58 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:07:58 +0200 |
| commit | 967be9e750221ab2ab783f95df79bb26d290a45e (patch) | |
| tree | 6802900a5e975f9f68b169f0f503f040056d6952 /ping/frontend/src/lib/components/SideBar.svelte | |
Diffstat (limited to 'ping/frontend/src/lib/components/SideBar.svelte')
| -rw-r--r-- | ping/frontend/src/lib/components/SideBar.svelte | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/SideBar.svelte b/ping/frontend/src/lib/components/SideBar.svelte new file mode 100644 index 0000000..9ea8a04 --- /dev/null +++ b/ping/frontend/src/lib/components/SideBar.svelte @@ -0,0 +1,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> |