133 lines
2.8 KiB
Svelte
133 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import Icon from '@iconify/svelte';
|
|
import { desktop, type DesktopSide } from '#lib/content';
|
|
import { runDesktopAction } from '#lib/desktop/actions';
|
|
|
|
function iconsOnSide(side: DesktopSide) {
|
|
return desktop.iconGroups.filter((group) => (group.side ?? 'left') === side).flatMap((group) => group.icons);
|
|
}
|
|
|
|
const iconSides = [
|
|
{ side: 'left', label: 'Desktop', icons: iconsOnSide('left') },
|
|
{ side: 'right', label: 'Desktop games', icons: iconsOnSide('right') }
|
|
];
|
|
</script>
|
|
|
|
<div class="desktop-icon-sides">
|
|
{#each iconSides as iconSide (iconSide.side)}
|
|
{#if iconSide.icons.length}
|
|
<nav class="desktop-icons {iconSide.side}" aria-label={iconSide.label}>
|
|
{#each iconSide.icons as item (item.label)}
|
|
<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
|
|
<span class="icon-box">
|
|
<Icon icon={item.icon} width="36" />
|
|
</span>
|
|
<span class="icon-label">{item.label}</span>
|
|
</button>
|
|
{/each}
|
|
</nav>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.desktop-icon-sides {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
height: 100%;
|
|
}
|
|
|
|
.desktop-icons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-rows: repeat(auto-fill, 100px);
|
|
grid-auto-columns: 116px;
|
|
gap: 4px;
|
|
height: 100%;
|
|
padding: 4px;
|
|
align-content: start;
|
|
}
|
|
|
|
.desktop-icons.right {
|
|
direction: rtl;
|
|
}
|
|
|
|
.desktop-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px 2px;
|
|
background: none;
|
|
border: none;
|
|
color: var(--foreground);
|
|
direction: ltr;
|
|
}
|
|
|
|
.desktop-icon:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.icon-box {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--background);
|
|
border: 2px solid var(--accent);
|
|
color: var(--accent);
|
|
transition:
|
|
background 0.12s,
|
|
color 0.12s,
|
|
transform 0.12s;
|
|
}
|
|
|
|
.desktop-icon:hover .icon-box,
|
|
.desktop-icon:focus-visible .icon-box {
|
|
background: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
|
|
.desktop-icon:active .icon-box {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
.icon-label {
|
|
max-width: 100%;
|
|
padding: 1px 6px;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--background) 88%, transparent);
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.desktop-icon:hover .icon-label,
|
|
.desktop-icon:focus-visible .icon-label {
|
|
background: var(--accent);
|
|
color: var(--background);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.desktop-icon-sides {
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
.desktop-icons {
|
|
grid-auto-flow: row;
|
|
grid-template-columns: repeat(auto-fill, 104px);
|
|
grid-template-rows: none;
|
|
grid-auto-rows: 100px;
|
|
justify-content: center;
|
|
height: auto;
|
|
}
|
|
|
|
.desktop-icons.right {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
</style>
|