💄 More visual tweaks for header

src/components/Header/Drawer.astro

@@ -31,32 +31,24 @@ import { navLinks } from '../../data/nav-links';
 		x-transition:leave-start="visible-drawer"
 		x-transition:leave-end="hidden-drawer"
 	>
-		<button @click="open = !open">
-			<CloseIcon class="bars-icon" width={24} height={24} /></button
-		>
-		<hr />
-		<ul>
-			{
-				navLinks.map((link) => (
-					<li>
-						<a href={`/${link.path}`}>
-							<span>{link.label}</span>
-						</a>
-					</li>
-				))
-			}
-		</ul>
+		<div>
+			<button @click="open = !open">
+				<CloseIcon class="bars-icon" width={24} height={24} /></button
+			>
+		</div>
+		<nav>
+			{navLinks.map((link) => <a href={`/${link.path}`}>{link.label}</a>)}
+		</nav>
 	</div>
 </div>
 
 <style>
 	:root {
-		--transition: all 0.1s ease-in-out;
+		--transition: all 0.3s ease-in-out;
 	}
 
 	button {
 		background: none;
-		color: inherit;
 		padding: 2px 2px -2px;
 		border: none;
 		line-height: 1;
@@ -67,10 +59,12 @@ import { navLinks } from '../../data/nav-links';
 		opacity: 0.3;
 	}
 
-	@media screen and (min-width: 600px) {
-		.drawer-container {
-			display: none;
-		}
+	button > svg {
+		color: var(--text);
+	}
+
+	.drawer-container {
+		display: none;
 	}
 
 	.overlay {
@@ -93,22 +87,33 @@ import { navLinks } from '../../data/nav-links';
 		top: 0;
 		background-color: var(--background);
 		position: absolute;
-		width: 200px;
+		width: 75vw;
 		height: 100vh;
-		padding: 12px;
 		z-index: 3;
 		transition: var(--transition);
 	}
 
-	ul {
-		list-style: none;
+	.drawer > div {
+		padding: 8px 6px 4px;
+		border-bottom: var(--border);
 	}
 
-	li {
-		margin-bottom: 12px;
+	nav {
+		text-align: center;
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		font-size: 1.2rem;
 	}
 
 	.hidden-drawer {
-		transform: translateX(220px);
+		transform: translateX(75vw);
+	}
+
+	@media screen and (max-width: 768px) {
+		.drawer-container {
+			display: block;
+		}
 	}
 </style>

src/components/Header/Header.astro

@@ -31,7 +31,7 @@ import Drawer from './Drawer.astro';
 		align-items: center;
 		max-width: var(--max-page-width);
 		margin: auto;
-		padding: 0 10px;
+		padding: 0 16px;
 		height: 100%;
 	}
 

src/components/Header/Nav.astro

@@ -10,10 +10,12 @@ const pathComponents = pathname.split('/').slice(1);
 	{
 		navLinks.map((link) => (
 			<li>
-				<a href={`/${link.path}`}>
-					<span>{link.label}</span>
+				<a
+					href={`/${link.path}`}
+					class={pathComponents[0] === link.path ? 'selected' : null}
+				>
+					{link.label}
 				</a>
-				{pathComponents[0] === link.path ? <div class="underline" /> : null}
 			</li>
 		))
 	}
@@ -24,13 +26,21 @@ const pathComponents = pathname.split('/').slice(1);
 		display: flex;
 		flex-direction: row;
 		list-style: none;
-		gap: 20px;
+		gap: 10px;
 		font-size: 1.15rem;
 		font-weight: 600;
 	}
 
+	a {
+		color: var(--text);
+		padding: 5px 10px;
+		border-radius: var(--radius);
+		transition: background-color 0.2s ease-in-out;
+	}
+
 	a:hover {
-		text-decoration: none;
+		background-color: rgba(0, 0, 0, 0.04);
+		opacity: 1;
 	}
 
 	.selected {
@@ -42,9 +52,16 @@ const pathComponents = pathname.split('/').slice(1);
 		background-color: var(--orange);
 	}
 
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 768px) {
 		nav {
 			display: none;
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		a:hover {
+			background-color: rgba(231, 237, 255, 0.1);
+			opacity: 1;
+		}
+	}
 </style>