ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve layout/behavior and accessibility

Browse Source
This commit is contained in:
Codex
2026-03-07 10:46:25 +00:00
parent a72ebc014c
commit 6e712e535d
8 changed files with 457 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
hdyc-svelte/src/lib/components/Sidebar.svelte
View File

@@ -69,20 +69,23 @@
<h3>All Converters</h3>
<button class="close-btn" on:click={() => (open = false)} aria-label="Close sidebar">✕</button>
</div>
<nav>
<nav aria-label="Calculator categories">
{#each categoryUnitGroups as group}
<div class="cat-section">
<button
type="button"
class="cat-toggle"
class:active={expandedCategory === group.key || currentPath.includes(`/category/${group.key}`)}
on:click={() => toggle(group.key)}
aria-expanded={expandedCategory === group.key}
aria-controls={`cat-list-${group.key}`}
>
<span class="cat-icon">{group.meta.icon}</span>
<span class="cat-label">{group.meta.label}</span>
<span class="chevron" class:expanded={expandedCategory === group.key}>›</span>
</button>
{#if expandedCategory === group.key}
<ul class="cat-list">
<ul class="cat-list" id={`cat-list-${group.key}`}>
{#each group.units as unit (unit.label)}
<li class="unit-item">
<button
@@ -99,7 +102,11 @@
<ul class="unit-list">
{#each unit.conversions as calc}
<li>
<a href="/{calc.slug}" class:current={currentPath === `/${calc.slug}`}>
<a
href="/{calc.slug}"
class:current={currentPath === `/${calc.slug}`}
aria-current={currentPath === `/${calc.slug}` ? 'page' : undefined}
>
{calc.name}
</a>
</li>
@@ -109,7 +116,13 @@
</li>
{/each}
<li>
<a href="/category/{group.key}" class="view-all">View all {group.meta.label} →</a>
<a
href="/category/{group.key}"
class="view-all"
aria-current={currentPath === `/category/${group.key}` ? 'page' : undefined}
>
View all {group.meta.label} →
</a>
</li>
</ul>
{/if}