45 lines
1.3 KiB
Plaintext
45 lines
1.3 KiB
Plaintext
---
|
|
// 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>
|