feat(ui): improve mobile navigation and registry actions

src/lib/components/AppShell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import PendingForm from '$lib/components/PendingForm.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 
 	let { user, isacAccess, children }: {
@@ -17,6 +17,8 @@
 	];
 
 	let showCookieNotice = $state(false);
+	let mobileOpen = $state(false);
+	let mobilePanel = $state<HTMLElement | null>(null);
 
 	onMount(() => {
 		showCookieNotice = localStorage.getItem('shd-essential-cookie-notice') !== 'dismissed';
@@ -26,8 +28,32 @@
 		localStorage.setItem('shd-essential-cookie-notice', 'dismissed');
 		showCookieNotice = false;
 	}
+
+	async function openMobileNavigation() {
+		mobileOpen = true;
+		await tick();
+		mobilePanel?.querySelector<HTMLElement>('a')?.focus();
+	}
+
+	function closeMobileNavigation() {
+		mobileOpen = false;
+	}
+
+	function handleNavigationKey(event: KeyboardEvent) {
+		if (event.key === 'Escape' && mobileOpen) {
+			event.preventDefault();
+			closeMobileNavigation();
+		}
+	}
+
+	$effect(() => {
+		page.url.pathname;
+		mobileOpen = false;
+	});
 </script>
 
+<svelte:window onkeydown={handleNavigationKey}/>
+
 <header class="site-header">
 	<a class="brand" href="/" aria-label="SHD.build home">
 		<span class="brand-mark"><i></i><b>SHD</b></span><span class="brand-name">SHD<span>.build</span><small>LOADOUT NETWORK</small></span>
@@ -51,8 +77,32 @@
 	{:else}
 		<a class="sign-in" href="/sign-in">SIGN IN →</a>
 	{/if}
+	<button class="mobile-nav-toggle" type="button" aria-label={mobileOpen ? 'Close navigation' : 'Open navigation'} aria-expanded={mobileOpen} aria-controls="mobile-navigation" onclick={mobileOpen ? closeMobileNavigation : openMobileNavigation}><span></span><span></span><span></span><b>{mobileOpen ? 'CLOSE' : 'MENU'}</b></button>
 </header>
 
+{#if mobileOpen}
+	<div class="mobile-nav-layer">
+		<button class="mobile-nav-backdrop" type="button" aria-label="Close navigation" onclick={closeMobileNavigation}></button>
+		<nav id="mobile-navigation" class="mobile-navigation" aria-label="Mobile navigation" bind:this={mobilePanel}>
+			<div class="mobile-nav-heading"><div><span>SHD NETWORK</span><strong>NAVIGATION</strong></div><b>ONLINE</b></div>
+			<a class:active={page.url.pathname === '/'} href="/"><small>00</small><span>Home</span><b>›</b></a>
+			{#each links as link, index}
+				<a class:active={page.url.pathname.startsWith(link.href)} href={link.href}><small>{String(index + 1).padStart(2, '0')}</small><span>{link.label}</span><b>›</b></a>
+			{/each}
+			{#if user}
+				<a class:active={page.url.pathname.startsWith('/account')} href="/account"><small>04</small><span>My Profile</span><b>›</b></a>
+			{:else}
+				<a class:active={page.url.pathname.startsWith('/sign-in')} href="/sign-in"><small>04</small><span>Sign In</span><b>›</b></a>
+			{/if}
+			{#if isacAccess}<a class:active={page.url.pathname.startsWith('/admin')} href="/admin"><small>05</small><span>ISAC</span><b>›</b></a>{/if}
+			{#if user}
+				<div class="mobile-agent-state"><span><i></i> AGENT ONLINE</span><strong>{user.displayName}</strong></div>
+				<PendingForm action="/sign-in?/logout">{#snippet children(pending)}<button class="mobile-sign-out" aria-busy={pending} disabled={pending}>{pending ? 'SIGNING OUT…' : 'SIGN OUT →'}</button>{/snippet}</PendingForm>
+			{/if}
+		</nav>
+	</div>
+{/if}
+
 {@render children()}
 
 <footer class="site-footer">