stan/website
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

header: trackers menu as a 2-column grid (desktop and mobile) with a coloured inline-SVG tile per tracker
All checks were successful
Deploy production / deploy (push) Successful in 2m41s
Details

Browse Source 
TrackerIcon + #lib/tracker-icons: one gradient rounded tile and a few stroke paths per
tracker (tasks, money, books, cars, music, health, groceries, houses, energy, games, skins,
pets, lists), distinct colours, readable in light and dark. No icon library. Test checks
every tracker has a unique tile and tasks/money/books stay first.
This commit is contained in:
Stan Runge
2026-10-24 16:06:39 +00:00
parent bc58e97776
commit 4738f10ad1
4 changed files with 218 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/lib/components/SiteChrome.svelte
View File

@@ -6,6 +6,7 @@
import { page } from '$app/state';
import CopyButton from '#lib/components/CopyButton.svelte';
import ProjectIcon from '#lib/components/ProjectIcon.svelte';
import TrackerIcon from '#lib/components/TrackerIcon.svelte';
import { projects, visibleTrackers } from '#lib/projects.js';
import { Button, buttonVariants } from '#lib/components/ui/button/index.js';
import * as Sheet from '#lib/components/ui/sheet/index.js';
@@ -219,15 +220,21 @@
>
{#if openMenu === item.href}
<div
class="absolute top-full left-0 z-50 max-h-[70vh] w-72 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
class={[
'absolute top-full z-50 max-h-[75vh] overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
item.href === '/trackers'
? 'left-1/2 grid w-[min(36rem,calc(100vw-2rem))] -translate-x-1/2 grid-cols-2 gap-x-1'
: 'left-0 w-72'
]}
aria-label={menu.label}
>
<a
href={resolve(item.href)}
class="flex items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent"
class:col-span-2={item.href === '/trackers'}
>all {menu.label} <ArrowRight size={14} class="ml-auto" /></a
>
<div class="my-1 h-px bg-border"></div>
<div class="col-span-2 my-1 h-px bg-border"></div>
{#each menu.items as project (project.name)}
<!-- Internal project links use resolve; external URLs are from the project catalog. -->
<!-- eslint-disable svelte/no-navigation-without-resolve -->
@@ -236,11 +243,15 @@
rel={project.external ? 'external' : undefined}
class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent"
>
<span
class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
>
<ProjectIcon name={project.name} class="size-4" />
</span>
{#if item.href === '/trackers'}
<TrackerIcon name={project.name} class="size-9" />
{:else}
<span
class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
>
<ProjectIcon name={project.name} class="size-4" />
</span>
{/if}
<span class="min-w-0"
><span class="block font-medium">{project.name}</span><span
class="block truncate text-xs text-muted-foreground"
@@ -324,17 +335,34 @@
onclick={() => (menuOpen = false)}>{item.label}</Button
>
{#if menus[item.href]}
<div class="ml-3 flex flex-col border-l border-border pl-3">
{#each menus[item.href].items as project (project.name)}
<Button
href={project.external ? project.href : resolve(project.href)}
variant="ghost"
size="sm"
class="justify-start"
onclick={() => (menuOpen = false)}>{project.name}</Button
>
{/each}
</div>
{#if item.href === '/trackers'}
<div class="ml-3 grid grid-cols-2 gap-1 border-l border-border pl-3">
{#each menus[item.href].items as project (project.name)}
<!-- eslint-disable svelte/no-navigation-without-resolve -->
<a
href={project.external ? project.href : resolve(project.href)}
class="flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
onclick={() => (menuOpen = false)}
><TrackerIcon name={project.name} class="size-7" /><span class="truncate"
>{project.name}</span
></a
>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
{/each}
</div>
{:else}
<div class="ml-3 flex flex-col border-l border-border pl-3">
{#each menus[item.href].items as project (project.name)}
<Button
href={project.external ? project.href : resolve(project.href)}
variant="ghost"
size="sm"
class="justify-start"
onclick={() => (menuOpen = false)}>{project.name}</Button
>
{/each}
</div>
{/if}
{/if}
{/each}
</nav>