💄 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>