Upload and test

00-Lesson-Site/frontend/src/components/Navbar/Navbar.astro

@@ -0,0 +1,44 @@
+---
+// Path: src/components/Navbar/Navbar.astro
+
+import "../../styles/main.scss";
+import styles from "./Navbar.module.scss";
+
+import DarkModeToggle from "./DarkModeToggle.astro";
+import UserIcon from "./UserIcon.astro";
+
+const pathname = new URL(Astro.request.url).pathname;
+const isActive = pathname === "/" || pathname === "";
+---
+
+<nav class={styles.navbar}>
+	<a href="/" class:list={[styles["nav-logo"], { [styles["active"]]: isActive }]}> LeafPig </a>
+
+	<ul class={styles["nav-links"]}>
+		<li>
+			<a href="/lessons" class:list={[{ [styles["active"]]: pathname.startsWith("/lessons") }]}>
+				Lessons
+				{pathname.startsWith("/lessons") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
+			</a>
+		</li>
+
+		<li>
+			<a href="/changelog" class:list={[{ [styles["active"]]: pathname.startsWith("/changelog") }]}>
+				Changelog
+				{pathname.startsWith("/changelog") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
+			</a>
+		</li>
+
+		<li>
+			<a href="/resources" class:list={[{ [styles["active"]]: pathname.startsWith("/resources") }]}>
+				Resources
+				{pathname.startsWith("/resources") && <span class={styles["magic-line"]} transition:name="nav-underline" />}
+			</a>
+		</li>
+	</ul>
+
+	<div class={styles["nav-right"]} transition:persist="nav-tools">
+		<DarkModeToggle />
+		<UserIcon />
+	</div>
+</nav>