JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update some minor ux issues

Browse Source
This commit is contained in:
JCEEE
2026-08-31 15:33:17 +01:00
parent 5165c59494
commit 035dbb829a
8 changed files with 100 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Sidebar.svelte
+6 -30
View File
@@ -13,15 +13,9 @@
let { famName = '', session = null, isParent = false, role = 'child' } = $props();
let collapsed = $state(false);
let famSlug = $derived(page.data.famSlug ?? page.params.fam);
let memberName = $derived(session?.memberName || page.params.username || '');
function toggle() {
collapsed = !collapsed;
}
let showChildItems = $derived(!!memberName);
let navItems = $derived(
@@ -49,28 +43,24 @@
? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }]
: []),
{
href: session ? '/logout' : '/login',
href: session ? '/logout' : role === 'child' ? `/${famSlug}/join` : '/login',
label: session ? 'Log out' : 'Log in',
icon: logoutIcon
}
]);
</script>
<aside class="sidebar" class:collapsed>
<button class="toggle-btn" onclick={toggle}>
{collapsed ? '☰' : '✕'}
</button>
<aside class="sidebar">
<div class="sidebar-header">
<span class="app-icon">✦</span>
{#if !collapsed}<span class="app-name">FamChore</span>{/if}
<span class="app-name">FamChore</span>
</div>
<nav class="sidebar-nav">
{#each navItems as item}
<a href={item.href} class="nav-item" class:active={page.url.pathname === item.href}>
{@html item.icon}
{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
<span class="nav-label">{item.label}</span>
</a>
{/each}
</nav>
@@ -79,7 +69,7 @@
{#each footerItems as item}
<a href={item.href} class="nav-item">
{@html item.icon}
{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
<span class="nav-label">{item.label}</span>
</a>
{/each}
</div>
@@ -100,21 +90,7 @@
z-index: 100;
overflow: hidden;
}
.sidebar.collapsed {
width: 56px;
}
.toggle-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
color: #a5b4fc;
font-size: 1.1rem;
cursor: pointer;
padding: 0.25rem;
line-height: 1;
}
.sidebar-header {
display: flex;
align-items: center;
frontend/src/lib/components/icons.ts
+2
View File
@@ -3,6 +3,8 @@ export const choresIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill=
export const rewardsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>'
export const moneyIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>'
export const coinsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6"/><path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>'
export const walletIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>'
export const circleIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>'
export const handCoinsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="M2 16l1 1h2"/><path d="M4 12l1 1h2"/><path d="M6 8l1 1h2"/><path d="M2 20l1.5-.5"/><circle cx="16" cy="8" r="2"/></svg>'
export const gemIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>'
export const archiveIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>'