collective-lists/apps/web/src/lib/components/layout/MobileDrawer.svelte

<script lang="ts">
	import { currentCollective, userCollectives } from '$lib/stores/collective';
	import { displayName } from '$lib/stores/auth';
	import Avatar from '$lib/components/Avatar.svelte';
	import CreateCollectiveModal from '$lib/components/CreateCollectiveModal.svelte';
	import { logout } from '$lib/auth';
	import * as m from '$lib/paraglide/messages';
	import { Settings, Users, LogOut, X, Plus } from 'lucide-svelte';

	let showCreate = $state(false);

	let { open = $bindable(false) }: { open?: boolean } = $props();

	function close() {
		open = false;
	}

	function switchCollective(id: string) {
		const c = $userCollectives.find((col) => col.id === id);
		if (c) {
			currentCollective.set(c);
			localStorage.setItem('activeCollectiveId', c.id);
		}
		close();
	}
</script>

{#if open}
	<!-- Backdrop -->
	<button
		type="button"
		aria-label="Close menu"
		onclick={close}
		class="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm md:hidden"
	></button>

	<!-- Drawer -->
	<aside
		data-testid="mobile-drawer"
		class="fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col bg-surface-raised shadow-[0px_20px_40px_rgba(15,23,42,0.06)] md:hidden"
	>
		<div class="flex h-14 items-center justify-between px-4">
			<span class="text-sm font-semibold text-text-primary">{m.app_name()}</span>
			<button
				type="button"
				onclick={close}
				aria-label="Close"
				class="rounded p-1 text-slate-500 hover:bg-black/5 dark:hover:bg-white/5"
			>
				<X size={18} strokeWidth={1.5} />
			</button>
		</div>

		<!-- Collective switcher -->
		<div class="px-2 py-2">
			<p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-text-secondary">
				{m.nav_collective()}
			</p>
			<div class="flex flex-col gap-0.5">
				{#each $userCollectives as c}
					<button
						type="button"
						onclick={() => switchCollective(c.id)}
						class="flex items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-black/5 dark:hover:bg-white/5 {c.id === $currentCollective?.id ? 'font-semibold text-slate-900 dark:text-slate-50' : 'text-slate-600 dark:text-slate-400'}"
					>
						<span class="text-base">{c.emoji}</span>
						<span class="truncate">{c.name}</span>
					</button>
				{/each}
			</div>
			<button
				type="button"
				onclick={() => {
					close();
					showCreate = true;
				}}
				class="mt-2 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
			>
				<Plus size={14} strokeWidth={1.5} />
				{m.sidebar_create_collective()}
			</button>
			<a
				href="/collective/manage"
				onclick={close}
				class="mt-1 flex items-center gap-2 rounded-md px-2 py-2 text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
			>
				<Users size={14} strokeWidth={1.5} />
				{m.manage_title()}
			</a>
		</div>

		<!-- Spacer -->
		<div class="flex-1"></div>

		<!-- Footer: user, settings, sign out -->
		<div class="border-t-0 px-2 py-3">
			<div class="flex items-center gap-2 px-2 pb-2">
				<Avatar name={$displayName} size={28} />
				<span class="truncate text-sm font-medium text-text-primary">{$displayName}</span>
			</div>
			<a
				href="/settings"
				onclick={close}
				class="flex items-center gap-2 rounded-md px-2 py-2 text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
			>
				<Settings size={14} strokeWidth={1.5} />
				{m.nav_settings()}
			</a>
			<button
				type="button"
				onclick={() => {
					close();
					void logout();
				}}
				class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm text-text-secondary hover:bg-black/5 dark:hover:bg-white/5"
			>
				<LogOut size={14} strokeWidth={1.5} />
				{m.settings_logout()}
			</button>
		</div>
	</aside>
{/if}

{#if showCreate}
	<CreateCollectiveModal onClose={() => (showCreate = false)} />
{/if}