📱 Responsive header

2025-08-30 18:11:26 -04:00
parent b8445f4a1b
commit eef297d4a1
12 changed files with 447 additions and 213 deletions
@@ -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>