Sunny-Moom/webvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added sidebar stickiness, icon clicking

Browse Source 
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
This commit is contained in:
Haseeb Qureshie 2025-01-09 14:00:36 +01:00 committed by Alessandro Pignotti
parent 9d40dcc44d
commit b6755ea5b0
2 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/Icon.svelte
View File

@ -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>

45
src/lib/SideBar.svelte
View File

@ -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>