From 967be9e750221ab2ab783f95df79bb26d290a45e Mon Sep 17 00:00:00 2001
From: Martial Simon <msimon_fr@hotmail.com>
Date: Mon, 15 Sep 2025 01:07:58 +0200
Subject: add: added projects

---
 ping/frontend/src/lib/components/SideBar.svelte | 61 +++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 ping/frontend/src/lib/components/SideBar.svelte

(limited to 'ping/frontend/src/lib/components/SideBar.svelte')

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>
-- 
cgit v1.2.3