leemorgan_dev/src/routes/+layout.svelte

<script>
	import '../app.css';
	import favicon from '#lib/assets/favicon.svg';
	import { page } from '$app/state';

	let { children } = $props();

	const isHome = $derived(page.url.pathname === '/');
	const isProjects = $derived(page.url.pathname === '/projects');
	const isGalleryMap = $derived(page.url.pathname === '/gallery');
	const isGallery = $derived(isGalleryMap || page.url.pathname.startsWith('/gallery/'));
	const isResume = $derived(page.url.pathname === '/resume');
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<meta name="theme-color" content="#0A0A0A" />
	<meta name="color-scheme" content="dark" />
</svelte:head>

<a class="skip" href="#main">Skip to content</a>

<div class="shell">
	<aside class="rail">
		<div class="rail-top">
			<div class="identity">
				{#if isHome}
					<h1><a class="wordmark" href="/">Lee Morgan</a></h1>
				{:else}
					<p class="site-name"><a class="wordmark" href="/">Lee Morgan</a></p>
				{/if}
				<p class="role">Web developer &amp; systems administrator</p>
			</div>
			<p class="status">
				<span class="status-dot" aria-hidden="true"></span>
				Available for work
			</p>
			<p class="place">Murrells Inlet, SC</p>
			<nav aria-label="Site">
				<ul class="menu">
					<li>
						<a href="/projects" aria-current={isProjects ? 'page' : undefined}>Projects</a>
					</li>
					<li>
						<a href="/gallery" aria-current={isGallery ? 'page' : undefined}>Gallery</a>
					</li>
					<li><a href="/">Currency</a></li>
					<li>
						<a href="/resume" data-sveltekit-reload aria-current={isResume ? 'page' : undefined}
							>Resume/CV</a
						>
					</li>
					<li><a href="/">Git</a></li>
					<li><a href="/">LinkedIn</a></li>
				</ul>
			</nav>
			<a class="btn" href="mailto:lee@leemorgan.dev">Get in touch</a>
		</div>
		<div class="rail-bottom">
			<a href="mailto:lee@leemorgan.dev">lee@leemorgan.dev</a>
		</div>
	</aside>

	<div class="page" class:page-flush={isGalleryMap || isResume}>
		<main id="main" class="site-main">
			{@render children()}
		</main>
	</div>
</div>