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

Unify handling of top and bottom sidebar icons

Browse Source
This commit is contained in:
Alessandro Pignotti 2024-10-01 11:37:05 +02:00
parent 05c234a528
commit 5094953eb2
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/SideBar.svelte
View File

@ -5,7 +5,10 @@
{ icon: 'fas fa-info-circle', info: 'Information' }, { icon: 'fas fa-info-circle', info: 'Information' },
{ icon: 'fas fa-wifi', info: 'Networking' }, { icon: 'fas fa-wifi', info: 'Networking' },
{ icon: 'fas fa-microchip', info: 'CPU' }, { icon: 'fas fa-microchip', info: 'CPU' },
{ icon: 'fas fa-compact-disc', info: 'Disk' } { icon: 'fas fa-compact-disc', info: 'Disk' },
null,
{ icon: 'fab fa-discord', info: 'Discord' },
{ icon: 'fab fa-github', info: 'GitHub' },
]; ];
let activeInfo = null; let activeInfo = null;
@ -21,17 +24,18 @@
<div class="flex flex-row w-14 bg-neutral-700"> <div class="flex flex-row w-14 bg-neutral-700">
<div class="flex flex-col shrink-0 w-14 text-gray-300"> <div class="flex flex-col shrink-0 w-14 text-gray-300">
{#each icons as { id, icon, info }} {#each icons as i}
{#if i}
<Icon <Icon
icon={icon} icon={i.icon}
info={info} info={i.info}
on:mouseover={(e) => showInfo(e.detail)} on:mouseover={(e) => showInfo(e.detail)}
on:mouseout={hideInfo} on:mouseout={hideInfo}
/> />
{/each} {:else}
<div class="grow"></div> <div class="grow"></div>
<Icon icon='fab fa-discord' info='Discord' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/> {/if}
<Icon icon='fab fa-github' info='GitHub' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/> {/each}
</div> </div>
<div class="flex flex-col shrink-0 w-52 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}> <div class="flex flex-col shrink-0 w-52 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}>
<p>{activeInfo}</p> <p>{activeInfo}</p>