|
|
|
|
<script>
|
|
|
|
|
import { logout_user } from '$/client/api.js';
|
|
|
|
|
import Icon from '$/client/components/Icon.svelte';
|
|
|
|
|
import Darkmode from '$/client/components/Darkmode.svelte';
|
|
|
|
|
import {link} from 'svelte-spa-router';
|
|
|
|
|
import { user } from "$/client/stores.js";
|
|
|
|
|
import { register_enabled } from "$/client/config.js";
|
|
|
|
|
|
|
|
|
|
export let fixed = false;
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<header class:fixed>
|
|
|
|
|
<nav>
|
|
|
|
|
{#if $user.authenticated}
|
|
|
|
|
<a href="/" use:link><Icon name="home" tooltip="Home." size="36" /></a>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
|
|
|
|
|
<li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li>
|
|
|
|
|
<li><a href="/live/" use:link><Icon name="video" tooltip="Past/Present streams."/></a></li>
|
|
|
|
|
<li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
|
|
|
|
|
{#if $user.admin }
|
|
|
|
|
<li><a href="/admin/#/"><Icon name="keyboard" tooltip="Admin database."/></a></li>
|
|
|
|
|
{/if}
|
|
|
|
|
<li><Darkmode /></li>
|
|
|
|
|
</ul>
|
|
|
|
|
{:else}
|
|
|
|
|
<!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
|
|
|
|
|
<a href="/"><Icon name="home" size="36" /></a>
|
|
|
|
|
<ul>
|
|
|
|
|
{#if register_enabled}
|
|
|
|
|
<li><a id="register-button" href="/client/#/register/">
|
|
|
|
|
<span class="mobile">
|
|
|
|
|
<Icon name="dollar-sign" tooltip="Register."/>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="mobile-hide">
|
|
|
|
|
<button type="button">Register</button>
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
{/if}
|
|
|
|
|
<li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li>
|
|
|
|
|
<li><a href="/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>
|
|
|
|
|
<li><a href="/live/" use:link><Icon name="video" tooltip="Livestreams." /></a></li>
|
|
|
|
|
<li><Darkmode /></li>
|
|
|
|
|
</ul>
|
|
|
|
|
{/if}
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
