chatrpg-app/src/routes/Navbar.svelte

<script>
	// Svelte 5 runes - navbar owns its mobile + transparency state
	import favicon from '$lib/assets/favicon.png';

	let scrollY = $state(0);
	let mobileMenuOpen = $state(false);

	// Receive scroll handler from parent
	let { scrollTo } = $props();

	function handleScroll() {
		scrollY = window.scrollY;
	}

	function toggleMobileMenu() {
		mobileMenuOpen = !mobileMenuOpen;
	}

	// Keyboard escape for mobile menu
	function handleKeydown(e) {
		if (e.key === 'Escape') {
			if (mobileMenuOpen) mobileMenuOpen = false;
		}
	}

	// Attach listeners (scoped to this component)
	$effect(() => {
		window.addEventListener('scroll', handleScroll, { passive: true });
		window.addEventListener('keydown', handleKeydown);

		return () => {
			window.removeEventListener('scroll', handleScroll);
			window.removeEventListener('keydown', handleKeydown);
		};
	});

	const navSolid = $derived(scrollY > 80);

	function handleNavClick(id) {
		mobileMenuOpen = false;
		scrollTo(id);
	}
</script>

<nav class:nav-solid={navSolid}>
	<div class="nav-inner">
		<button 
			class="logo logo-btn"
			onclick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
			aria-label="ChatRPG home"
		>
			<div class="logo-icon">
				<img src={favicon} alt="ChatRPG logo" width="28" height="28" />
			</div>
			<span class="logo-text">ChatRPG</span>
		</button>

		<!-- Desktop Nav -->
		<div class="nav-links">
			<button onclick={() => handleNavClick('how')} class="nav-link">How it Works</button>
			<button onclick={() => handleNavClick('features')} class="nav-link">Features</button>
			<button onclick={() => handleNavClick('pricing')} class="nav-link">Pricing</button>
			<button onclick={() => handleNavClick('faq')} class="nav-link">FAQ</button>
		</div>

		<div class="nav-actions">
			<a href="/login" class="btn btn-secondary">Log In</a>
			<a href="/register" class="btn btn-primary">Get Started</a>
		</div>

		<!-- Mobile hamburger -->
		<button class="mobile-toggle" onclick={toggleMobileMenu} aria-label="Toggle menu">
			<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
				{#if mobileMenuOpen}
					<path d="M18 6L6 18M6 6l12 12"/>
				{:else}
					<path d="M3 12h18M3 6h18M3 18h18"/>
				{/if}
			</svg>
		</button>
	</div>

	<!-- Mobile Menu -->
	{#if mobileMenuOpen}
		<div class="mobile-menu">
			<button onclick={() => handleNavClick('how')} class="mobile-link">How it Works</button>
			<button onclick={() => handleNavClick('features')} class="mobile-link">Features</button>
			<button onclick={() => handleNavClick('pricing')} class="mobile-link">Pricing</button>
			<button onclick={() => handleNavClick('faq')} class="mobile-link">FAQ</button>
			<div class="mobile-ctas">
				<button class="btn btn-primary full" onclick={() => handleNavClick('pricing')}>See Pricing</button>
			</div>
		</div>
	{/if}
</nav>

<style>
	/* Navbar specific styles */
	nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: rgba(11, 11, 16, 0.7);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid transparent;
		transition: all 0.2s ease;
	}
	.nav-solid {
		background: #0b0b10;
		border-bottom-color: #2a2a35;
	}

	.nav-inner {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 24px;
		height: 68px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		font-size: 21px;
	}
	.logo-icon {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo-btn {
		background: none;
		border: none;
		padding: 0;
		color: inherit;
		font: inherit;
	}

	.nav-links {
		display: flex;
		gap: 6px;
	}
	.nav-link {
		background: none;
		border: none;
		color: #a1a1aa;
		padding: 8px 16px;
		font-size: 14.5px;
		font-weight: 500;
		cursor: pointer;
		border-radius: 8px;
		transition: all 0.1s ease;
	}
	.nav-link:hover {
		color: #e5e5ea;
		background: #1f1f27;
	}

	.nav-actions {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.mobile-toggle {
		display: none;
		background: none;
		border: 1px solid #2a2a35;
		color: #e5e5ea;
		padding: 6px 10px;
		border-radius: 8px;
		cursor: pointer;
	}

	.mobile-menu {
		display: none;
		padding: 12px 24px 24px;
		background: #0b0b10;
		border-top: 1px solid #2a2a35;
	}
	.mobile-link {
		display: block;
		width: 100%;
		text-align: left;
		background: none;
		border: none;
		color: #e5e5ea;
		padding: 14px 0;
		font-size: 16px;
		border-bottom: 1px solid #1f1f27;
		cursor: pointer;
	}
	.mobile-link:last-of-type {
		border-bottom: none;
	}
	.mobile-ctas {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 16px;
	}

	@media (max-width: 700px) {
		.nav-links,
		.nav-actions {
			display: none;
		}
		.mobile-toggle {
			display: block;
		}
		.mobile-menu {
			display: block;
		}
	}
</style>