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