beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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-wifi', info: 'Networking' },
{ 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;
@ -21,17 +24,18 @@
<div class="flex flex-row w-14 bg-neutral-700">
<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}
info={info}
icon={i.icon}
info={i.info}
on:mouseover={(e) => showInfo(e.detail)}
on:mouseout={hideInfo}
/>
{/each}
{:else}
<div class="grow"></div>
<Icon icon='fab fa-discord' info='Discord' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/>
<Icon icon='fab fa-github' info='GitHub' on:mouseover={(e) => showInfo(e.detail)} on:mouseout={hideInfo}/>
{/if}
{/each}
</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}>
<p>{activeInfo}</p>