famdone/frontend/src/lib/components/Sidebar.svelte

<script lang="ts">
	import { page } from '$app/state';
	import {
		dashboardIcon,
		choresIcon,
		rewardsIcon,
		bonusesIcon,
		homeIcon,
		settingsIcon,
		logoutIcon,
		prefsIcon
	} from './icons';

	let { famName = '', session = null, isParent = false, role = 'child' } = $props();

	let collapsed = $state(false);

	let famSlug = $derived(page.params.fam);
	let memberName = $derived(session?.memberName || page.params.username || '');

	function toggle() {
		collapsed = !collapsed;
	}

	let showChildItems = $derived(!!memberName);

	let navItems = $derived(
		isParent && memberName
			? [
					{ href: `/${famSlug}`, label: famName, icon: homeIcon },
					{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
					{ href: `/${famSlug}/${memberName}/chores`, label: 'Chores', icon: choresIcon },
					{ href: `/${famSlug}/${memberName}/ledger`, label: 'Ledger', icon: rewardsIcon },
					{ href: `/${famSlug}/${memberName}/bonuses`, label: 'Bonuses', icon: bonusesIcon }
				]
			: showChildItems
				? [
						{ href: `/${famSlug}`, label: famName, icon: homeIcon },
						{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon }
					]
				: []
	);

	let footerItems = $derived([
		...(memberName
			? [{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon }]
			: []),
		...(isParent && memberName
			? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }]
			: []),
		{
			href: session ? '/logout' : '/login',
			label: session ? 'Log out' : 'Log in',
			icon: logoutIcon
		}
	]);
</script>

<aside class="sidebar" class:collapsed>
	<button class="toggle-btn" onclick={toggle}>
		{collapsed ? '☰' : '✕'}
	</button>

	<div class="sidebar-header">
		<span class="app-icon">✦</span>
		{#if !collapsed}<span class="app-name">FamChore</span>{/if}
	</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}
			</a>
		{/each}
	</nav>

	<div class="sidebar-footer">
		{#each footerItems as item}
			<a href={item.href} class="nav-item">
				{@html item.icon}
				{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
			</a>
		{/each}
	</div>
</aside>

<style>
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 220px;
		background: #1e1b4b;
		color: #e0e7ff;
		display: flex;
		flex-direction: column;
		transition: width 0.2s;
		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;
		gap: 0.5rem;
		padding: 1rem 0.75rem;
		border-bottom: 1px solid #3730a3;
		min-height: 52px;
	}
	.app-icon {
		font-size: 1.3rem;
		flex-shrink: 0;
	}
	.app-name {
		font-weight: 700;
		font-size: 1.05rem;
		white-space: nowrap;
	}
	.sidebar-nav {
		flex: 1;
		padding: 0.5rem 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.sidebar-footer {
		border-top: 1px solid #3730a3;
		padding: 0.5rem 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.nav-item {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.5rem 0.75rem;
		color: #c7d2fe;
		text-decoration: none;
		font-size: 0.9rem;
		border-radius: 6px;
		margin: 0 0.3rem;
		white-space: nowrap;
		transition: background 0.15s;
	}
	.nav-item:hover {
		background: #3730a3;
		color: #e0e7ff;
	}
	.nav-item.active {
		background: #4338ca;
		color: #fff;
		font-weight: 600;
	}
	.nav-label {
		overflow: hidden;
	}
</style>