From f2a6bf3f997cf96ca5cefb212aa69aa2189930e9 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 09:44:34 -0700
Subject: [PATCH] Add dropdown for mobile nav

---
 src/lib/components/Header.svelte      |  45 ++++-
 src/lib/components/NavDropdown.svelte | 237 ++++++++++++++++++++++++++
 2 files changed, 275 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/NavDropdown.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 5a93286..a26bc1f 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte'
 	import SegmentedController from './SegmentedController.svelte'
+	import NavDropdown from './NavDropdown.svelte'
 
 	let scrollY = $state(0)
 	// Smooth gradient opacity from 0 to 1 over the first 100px of scroll
@@ -39,7 +40,12 @@
 		<a href="/about" class="header-link" aria-label="@jedmund">
 			<Avatar />
 		</a>
-		<SegmentedController />
+		<div class="nav-desktop">
+			<SegmentedController />
+		</div>
+		<div class="nav-mobile">
+			<NavDropdown />
+		</div>
 	</div>
 </header>
 
@@ -51,11 +57,15 @@
 		display: flex;
 		justify-content: center;
 		// Smooth padding transition based on scroll
-		padding: calc($unit-5x - ($unit-5x - $unit-2x) * var(--padding-progress)) 0;
+		padding: calc($unit-5x - ($unit-5x - $unit-2x) * var(--padding-progress)) $unit-2x;
 		pointer-events: none;
 		// Add a very subtle transition to smooth out any remaining jitter
 		transition: padding 0.1s ease-out;
 
+		@include breakpoint('phone') {
+			padding: calc($unit-3x - ($unit-3x - $unit-2x) * var(--padding-progress)) $unit-2x;
+		}
+
 		&::before {
 			content: '';
 			position: absolute;
@@ -63,11 +73,7 @@
 			left: 0;
 			right: 0;
 			height: 120px;
-			background: linear-gradient(
-				to bottom,
-				rgba(0, 0, 0, 0.15),
-				transparent
-			);
+			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
 			backdrop-filter: blur(6px);
 			-webkit-backdrop-filter: blur(6px);
 			mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
@@ -85,6 +91,15 @@
 		align-items: center;
 		gap: $unit-3x;
 		pointer-events: auto;
+		width: 100%;
+		max-width: 900px;
+		margin: 0 auto;
+
+		@include breakpoint('phone') {
+			gap: $unit-2x;
+			max-width: none;
+			justify-content: center;
+		}
 	}
 
 	.header-link {
@@ -110,4 +125,20 @@
 			}
 		}
 	}
+
+	.nav-desktop {
+		display: block;
+
+		@include breakpoint('phone') {
+			display: none;
+		}
+	}
+
+	.nav-mobile {
+		display: none;
+
+		@include breakpoint('phone') {
+			display: block;
+		}
+	}
 </style>
diff --git a/src/lib/components/NavDropdown.svelte b/src/lib/components/NavDropdown.svelte
new file mode 100644
index 0000000..e2fa2df
--- /dev/null
+++ b/src/lib/components/NavDropdown.svelte
@@ -0,0 +1,237 @@
+<script lang="ts">
+	import WorkIcon from '$icons/work.svg'
+	import LabsIcon from '$icons/labs.svg'
+	import UniverseIcon from '$icons/universe.svg'
+	import PhotosIcon from '$icons/photos.svg'
+	import ChevronDownIcon from '$icons/chevron-down.svg'
+	import { page } from '$app/stores'
+
+	const currentPath = $derived($page.url.pathname)
+	let isOpen = $state(false)
+	let dropdownElement: HTMLDivElement
+
+	interface NavItem {
+		icon: typeof WorkIcon
+		text: string
+		href: string
+		variant: 'work' | 'universe' | 'labs' | 'photos'
+	}
+
+	const navItems: NavItem[] = [
+		{ icon: WorkIcon, text: 'Work', href: '/', variant: 'work' },
+		{ icon: UniverseIcon, text: 'Universe', href: '/universe', variant: 'universe' },
+		{ icon: PhotosIcon, text: 'Photos', href: '/photos', variant: 'photos' },
+		{ icon: LabsIcon, text: 'Labs', href: '/labs', variant: 'labs' }
+	]
+
+	// Get current active item
+	const activeItem = $derived(
+		currentPath === '/'
+			? navItems[0]
+			: navItems.find((item) => currentPath.startsWith(item.href === '/' ? '/work' : item.href)) ||
+					navItems[0]
+	)
+
+	// Get background color based on variant
+	function getBgColor(variant: string): string {
+		switch (variant) {
+			case 'work':
+				return '#ffcdc5'
+			case 'photos':
+				return '#e8c5ff'
+			case 'universe':
+				return '#ffebc5'
+			case 'labs':
+				return '#c5eaff'
+			default:
+				return '#c5eaff'
+		}
+	}
+
+	// Get text color based on variant
+	function getTextColor(variant: string): string {
+		switch (variant) {
+			case 'work':
+				return '#d0290d'
+			case 'photos':
+				return '#7c3aed'
+			case 'universe':
+				return '#b97d14'
+			case 'labs':
+				return '#1482c1'
+			default:
+				return '#1482c1'
+		}
+	}
+
+	function toggleDropdown(e: MouseEvent) {
+		e.stopPropagation()
+		isOpen = !isOpen
+		console.log('Dropdown toggled:', isOpen)
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+			isOpen = false
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			isOpen = false
+		}
+	}
+
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.addEventListener('click', handleClickOutside)
+			document.addEventListener('keydown', handleKeydown)
+
+			return () => {
+				document.removeEventListener('click', handleClickOutside)
+				document.removeEventListener('keydown', handleKeydown)
+			}
+		}
+	})
+</script>
+
+<div class="nav-dropdown" bind:this={dropdownElement}>
+	<button
+		class="dropdown-trigger"
+		onclick={toggleDropdown}
+		aria-expanded={isOpen}
+		aria-haspopup="true"
+		style="color: {getTextColor(activeItem.variant)};"
+	>
+		<svelte:component this={activeItem.icon} class="nav-icon" />
+		<span>{activeItem.text}</span>
+		<ChevronDownIcon class="chevron {isOpen ? 'open' : ''}" />
+	</button>
+
+	{#if isOpen}
+		<div class="dropdown-menu">
+			{#each navItems as item}
+				<a
+					href={item.href}
+					class="dropdown-item"
+					class:active={item === activeItem}
+					onclick={() => (isOpen = false)}
+				>
+					<svelte:component this={item.icon} class="nav-icon" />
+					<span>{item.text}</span>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.nav-dropdown {
+		position: relative;
+		height: 52px; // Match avatar height
+		min-width: 180px; // Wider to better match dropdown menu
+	}
+
+	.dropdown-trigger {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		width: 100%;
+		height: 100%;
+		padding: 0 $unit-2x;
+		border: none;
+		border-radius: 100px;
+		background: white;
+		font-size: 1rem;
+		font-weight: 400;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+		&:hover {
+			transform: translateY(-1px);
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+		}
+
+		&:active {
+			transform: translateY(0);
+		}
+
+		:global(svg.nav-icon) {
+			width: 20px;
+			height: 20px;
+			flex-shrink: 0;
+			fill: currentColor;
+		}
+
+		:global(svg.chevron) {
+			width: 16px;
+			height: 16px;
+			margin-left: auto;
+			flex-shrink: 0;
+			transition: transform 0.2s ease;
+			fill: none;
+			stroke: currentColor;
+			stroke-width: 2px;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+
+			&.open {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + $unit);
+		left: 50%;
+		transform: translateX(-50%);
+		min-width: 180px;
+		background: white;
+		border-radius: $unit-2x;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		padding: $unit;
+		z-index: 1000;
+		animation: dropdownOpen 0.2s ease;
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+		padding: $unit-2x $unit-2x;
+		border-radius: $unit;
+		text-decoration: none;
+		color: $grey-20;
+		font-size: 1rem;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: $grey-97;
+		}
+
+		&.active {
+			background-color: $grey-95;
+			font-weight: 500;
+		}
+
+		:global(svg.nav-icon) {
+			width: 20px;
+			height: 20px;
+			flex-shrink: 0;
+			fill: currentColor;
+		}
+	}
+
+	@keyframes dropdownOpen {
+		from {
+			opacity: 0;
+			transform: translateX(-50%) translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0);
+		}
+	}
+</style>