feat: show active link in navbar

This commit is contained in:
Sam 2023-05-08 15:38:27 +02:00
parent de460720da
commit 9a36e4ec24
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
1 changed files with 11 additions and 5 deletions

View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import { decodeJwt } from "jose"; import { decodeJwt } from "jose";
@ -129,10 +130,15 @@
<Nav class="ms-auto" navbar> <Nav class="ms-auto" navbar>
{#if currentUser} {#if currentUser}
<NavItem> <NavItem>
<NavLink href="/@{currentUser.name}">@{currentUser.name}</NavLink> <NavLink
href="/@{currentUser.name}"
active={$page.url.pathname === `/@${currentUser.name}`}
>
@{currentUser.name}
</NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink href="/settings"> <NavLink href="/settings" active={$page.url.pathname.startsWith("/settings")}>
Settings Settings
{#if numWarnings} {#if numWarnings}
<Badge color="danger">{numWarnings}</Badge> <Badge color="danger">{numWarnings}</Badge>
@ -141,7 +147,7 @@
</NavItem> </NavItem>
{#if isAdmin} {#if isAdmin}
<NavItem> <NavItem>
<NavLink href="/reports"> <NavLink href="/reports" active={$page.url.pathname.startsWith("/reports")}>
Reports Reports
{#if numReports !== 0} {#if numReports !== 0}
<Badge color="danger">{numReports}</Badge> <Badge color="danger">{numReports}</Badge>
@ -151,14 +157,14 @@
{/if} {/if}
{#if changelogRead < CURRENT_CHANGELOG} {#if changelogRead < CURRENT_CHANGELOG}
<NavItem> <NavItem>
<NavLink href="/page/changelog"> <NavLink href="/page/changelog" active={$page.url.pathname === "/page/changelog"}>
Changelog <Badge color="secondary">v{CURRENT_CHANGELOG}</Badge> Changelog <Badge color="secondary">v{CURRENT_CHANGELOG}</Badge>
</NavLink> </NavLink>
</NavItem> </NavItem>
{/if} {/if}
{:else} {:else}
<NavItem> <NavItem>
<NavLink href="/auth/login">Log in</NavLink> <NavLink href="/auth/login" active={$page.url.pathname === "/auth/login"}>Log in</NavLink>
</NavItem> </NavItem>
{/if} {/if}
<NavItem> <NavItem>