From b6755ea5b0d9c3c94b852fa8a56d1315e86b6092 Mon Sep 17 00:00:00 2001
From: Haseeb Qureshie <haseebqureshie@gmail.com>
Date: Thu, 9 Jan 2025 14:00:36 +0100
Subject: [PATCH] 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    | 11 +++++++----
 src/lib/SideBar.svelte | 45 ++++++++++++++++++++++++++++++++----------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/lib/Icon.svelte b/src/lib/Icon.svelte
index ac34fdc..bae3011 100644
--- a/src/lib/Icon.svelte
+++ b/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>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 8d7ee33..4efd626 100644
--- a/src/lib/SideBar.svelte
+++ b/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>