Added sidebar stickiness, icon clicking

changed timeout value to 0, added more logic

Added comments, clearTimeout function and more logic

removed isPaneledHovered

Removed if statement, added comment

Removed condition

null to 0

cleanup

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"}"
 	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,40 @@
 		{ 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 hideTimeout = 0; // Timeout for hiding info panel.
 
 	function showInfo(info) {
+		clearTimeout(hideTimeout);
+		hideTimeout = 0;
 		activeInfo = info;
 	}
-
 	function hideInfo() {
-		activeInfo = null;
+		// Prevents multiple timers and hides the info panel after 400ms unless interrupted.
+		clearTimeout(hideTimeout);
+		hideTimeout = setTimeout(() => {
+			activeInfo = null;
+			hideTimeout = 0;
+		}, 400);
+	}
+	function handleMouseEnterPanel() {
+		clearTimeout(hideTimeout);
+		hideTimeout = 0;
+	}
+	// Toggles the info panel for the clicked icon.
+	function handleClick(icon) {
+		// Hides the panel if the icon is active. Otherwise, shows the panel with info.
+		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" >
 	<div class="flex flex-col shrink-0 w-14 text-gray-300">
 		{#each icons as i}
 			{#if i}
@@ -44,13 +62,19 @@
 					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" on:mouseenter={handleMouseEnterPanel}></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:mouseenter={handleMouseEnterPanel}
+		on:mouseleave={hideInfo}
+	>
 		{#if activeInfo === 'Information'}
 			<InformationTab>
 				<slot></slot>
@@ -72,6 +96,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 +106,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>