Added sticky feeling to sidebar icons, able to click icons

src/lib/Icon.svelte

@@ -2,19 +2,22 @@
 	export let icon;
 	export let info;
 	export let activity;
-
 	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
 
+	const dispatch = createEventDispatcher();
 	function handleMouseover() {
 		dispatch('mouseover', info);
 	}
+	function handleClick() {
+		dispatch('click', { icon, info });
+	}
 </script>
 
 <div 
-	class="p-3 cursor-pointer text-center hover:bg-neutral-600 {$activity ? "text-amber-500 animate-pulse" : "hover:text-gray-100"}"
+	class="p-3 cursor-pointer text-center hover:bg-neutral-600 {$activity ? 'text-amber-500 animate-pulse' : 'hover:text-gray-100'}"
 	style="animation-duration: 0.5s"
 	on:mouseenter={handleMouseover}
-	>
-		<i class='{icon} fa-xl'></i>
+	on:click={handleClick}
+>
+	<i class='{icon} fa-xl'></i>
 </div>

src/lib/SideBar.svelte

@@ -8,8 +8,7 @@
 	import PostsTab from './PostsTab.svelte';
 	import DiscordTab from './DiscordTab.svelte';
 	import GitHubTab from './GitHubTab.svelte';
-	import { cpuActivity, diskActivity, aiActivity } from './activities.js'
-
+	import { cpuActivity, diskActivity, aiActivity } from './activities.js';
 	const icons = [
 		{ icon: 'fas fa-info-circle', info: 'Information', activity: null },
 		{ icon: 'fas fa-wifi', info: 'Networking', activity: null },
@@ -21,21 +20,38 @@
 		{ icon: 'fab fa-discord', info: 'Discord', activity: null },
 		{ icon: 'fab fa-github', info: 'GitHub', activity: null },
 	];
-
-	let activeInfo = null;
-
+	let activeInfo = null; // Tracks currently visible info
+	let lastHoveredInfo = null; // Tracks last hovered info
+	let isPanelHovered = false; // Tracks if info panel is hovered
+	let hideTimeout = null; // Timeout for hiding info panel
 	function showInfo(info) {
-		activeInfo = info;
-	}
+		clearTimeout(hideTimeout); // Cancel timeout
 
+		if (info !== lastHoveredInfo) {
+			activeInfo = info;
+			lastHoveredInfo = info;
+		}
+	}
 	function hideInfo() {
-		activeInfo = null;
+		hideTimeout = setTimeout(() => {
+			if (!isPanelHovered) {
+				activeInfo = null;
+				lastHoveredInfo = null;
+			}
+		}, 400);
+	}
+	function handleClick(icon) {
+		if (activeInfo === icon.info) {
+			activeInfo = null;
+		} else {
+			activeInfo = icon.info;
+		}
 	}
 
 	export let handleTool;
 </script>
 
-<div class="flex flex-row w-14 h-full bg-neutral-700" on:mouseleave={hideInfo}>
+<div class="flex flex-row w-14 h-full bg-neutral-700 sidebar" on:mouseleave={hideInfo}>
 	<div class="flex flex-col shrink-0 w-14 text-gray-300">
 		{#each icons as i}
 			{#if i}
@@ -44,13 +60,25 @@
 					info={i.info}
 					activity={i.activity}
 					on:mouseover={(e) => showInfo(e.detail)}
+					on:click={() => handleClick(i)}
 				/>
 			{:else}
-				<div class="grow" on:mouseover={(e) => showInfo(null)}></div>
+				<div class="grow" style="pointer-events: none;"></div>
 			{/if}
 		{/each}
 	</div>
-	<div class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95" class:hidden={!activeInfo}>
+	<div
+		class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95"
+		class:hidden={!activeInfo}
+		on:mouseover={() => {
+			isPanelHovered = true;
+			clearTimeout(hideTimeout);
+		}}
+		on:mouseleave={() => {
+			isPanelHovered = false;
+			hideInfo();
+		}}
+	>
 		{#if activeInfo === 'Information'}
 			<InformationTab>
 				<slot></slot>
@@ -72,6 +100,7 @@
 		{:else}
 			<p>TODO: {activeInfo}</p>
 		{/if}
+
 		<div class="mt-auto text-sm text-gray-300">
 			<div class="pt-1 pb-1">
 				<a href="https://cheerpx.io/" target="_blank">
@@ -81,7 +110,7 @@
 			</div>
 			<hr class="border-t border-solid border-gray-300">
 			<div class="pt-1 pb-1">
-				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2024 Leaning Technologies</a>
+				<a href="https://leaningtech.com/" target="”_blank”">© 2022-2025 Leaning Technologies</a>
 			</div>
 		</div>
 	</div>