fastapi-svelte-template/frontend/src/lib/components/navbar/Navbar.svelte

33 lines
740 B
Svelte

<script lang="ts">
import { goto } from '$app/navigation';
import { logout, storedUser } from '$lib/auth/session';
import type { StoredUser } from '$lib/auth/session';
let user: StoredUser | null = null;
storedUser.subscribe((value) => {
user = value;
});
function handleLogout() {
logout();
goto('/');
}
</script>
<nav>
<ul>
<li class="inline">
<a href="/">Home</a>
{#if user}
<a href={`/users/${user.id}/todos`}>Todos</a>
<a href={`/users/${user.id}`}>My Profile</a>
{#if user.isAdmin}
<a href={`/users/all`}>All Users</a>
{/if}
<button on:click={handleLogout}>Log Out</button>
{:else}
<a href="/login">Log In</a>
{/if}
</li>
</ul>
</nav>