📱 Responsive header

src/components/Header.astro

@@ -1,76 +0,0 @@
----
-import Avatar from './Avatar.astro';
-const { pathname } = Astro.url;
-
-interface Props {}
-
-interface NavLink {
-	label: string;
-
-	path: string;
-}
-
-const navLinks: NavLink[] = [
-	{ label: 'Blog', path: 'blog' },
-	{ label: 'Now', path: 'now' },
-	{ label: 'Projects', path: 'projects' },
-];
-
-const pathComponents = pathname.split('/').slice(1);
----
-
-<header>
-	<a href="/">
-		<Avatar size={60} />
-	</a>
-
-	<nav>
-		{
-			navLinks.map((link) => (
-				<li>
-					<a href={`/${link.path}`}>
-						<span>{link.label}</span>
-					</a>
-					{pathComponents[0] === link.path ? <div class="underline" /> : null}
-				</li>
-			))
-		}
-	</nav>
-</header>
-
-<style>
-	header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 20px;
-		height: 120px;
-	}
-
-	header > h1 > a {
-		color: var(--text);
-	}
-
-	header > nav {
-		display: flex;
-		flex-direction: row;
-		list-style: none;
-		gap: 20px;
-		font-size: 1.15rem;
-	}
-
-	header > nav > li > a:hover {
-		text-decoration: none;
-	}
-
-	header > nav > li > .selected {
-		font-weight: bold;
-	}
-
-	.underline {
-		height: 2px;
-		width: 100%;
-		background-color: var(--orange);
-	}
-</style>

src/components/Header/Drawer.astro

@@ -0,0 +1,114 @@
+---
+import BarsIcon from '../../assets/svg/bars.svg';
+import CloseIcon from '../../assets/svg/xmark.svg';
+
+import { navLinks } from '../../data/nav-links';
+---
+
+<div
+	x-data="{ open: false }"
+	class="drawer-container"
+	@keydown.escape="open = false"
+>
+	<button @click="open = !open">
+		<BarsIcon class="bars-icon" width={24} height={24} />
+	</button>
+	<div
+		class="overlay"
+		@click="open = !open"
+		x-show="open"
+		x-transition:enter-start="hidden-overlay"
+		x-transition:enter-end="visible-overlay"
+		x-transition:leave-start="visible-overlay"
+		x-transition:leave-end="hidden-overlay"
+	>
+	</div>
+	<div
+		class="drawer"
+		x-show="open"
+		x-transition:enter-start="hidden-drawer"
+		x-transition:enter-end="visible-drawer"
+		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>
+</div>
+
+<style>
+	:root {
+		--transition: all 0.1s ease-in-out;
+	}
+
+	button {
+		background: none;
+		color: inherit;
+		padding: 2px 2px -2px;
+		border: none;
+		line-height: 1;
+		aspect-ratio: square;
+	}
+
+	button:active {
+		opacity: 0.3;
+	}
+
+	@media screen and (min-width: 600px) {
+		.drawer-container {
+			display: none;
+		}
+	}
+
+	.overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.6);
+		z-index: 2;
+		transition: var(--transition);
+	}
+
+	.hidden-overlay {
+		opacity: 0;
+	}
+
+	.drawer {
+		right: 0;
+		top: 0;
+		background-color: var(--background);
+		position: absolute;
+		width: 200px;
+		height: 100vh;
+		padding: 12px;
+		z-index: 3;
+		transition: var(--transition);
+	}
+
+	ul {
+		list-style: none;
+	}
+
+	li {
+		margin-bottom: 12px;
+	}
+
+	.hidden-drawer {
+		transform: translateX(220px);
+	}
+</style>

src/components/Header/Header.astro

@@ -0,0 +1,41 @@
+---
+import Nav from './Nav.astro';
+import Drawer from './Drawer.astro';
+---
+
+<header>
+	<div class="container">
+		<h1><a href="/">ghall.space</a></h1>
+		<Nav />
+		<Drawer />
+	</div>
+</header>
+
+<style>
+	header {
+		margin-bottom: 20px;
+		height: 70px;
+		background-color: rgba(252, 252, 252, 90%);
+		backdrop-filter: blur(10px);
+		width: 100%;
+		top: 0;
+		position: fixed;
+		z-index: 1;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		max-width: var(--max-page-width);
+		margin: auto;
+		padding: 0 10px;
+		height: 100%;
+	}
+
+	h1 > a {
+		font-size: 1.6rem;
+		color: var(--text);
+	}
+</style>

src/components/Header/Nav.astro

@@ -0,0 +1,50 @@
+---
+import { navLinks } from '../../data/nav-links';
+
+const { pathname } = Astro.url;
+
+const pathComponents = pathname.split('/').slice(1);
+---
+
+<nav>
+	{
+		navLinks.map((link) => (
+			<li>
+				<a href={`/${link.path}`}>
+					<span>{link.label}</span>
+				</a>
+				{pathComponents[0] === link.path ? <div class="underline" /> : null}
+			</li>
+		))
+	}
+</nav>
+
+<style>
+	nav {
+		display: flex;
+		flex-direction: row;
+		list-style: none;
+		gap: 20px;
+		font-size: 1.15rem;
+	}
+
+	a:hover {
+		text-decoration: none;
+	}
+
+	.selected {
+		font-weight: bold;
+	}
+
+	.underline {
+		height: 2px;
+		width: 100%;
+		background-color: var(--orange);
+	}
+
+	@media screen and (max-width: 600px) {
+		nav {
+			display: none;
+		}
+	}
+</style>