PSFPortal/app/components/Nav.svelte
2019-12-30 09:27:49 -05:00

49 lines
1.7 KiB
Svelte

<script>
import { get_initial_state, logout, isAdmin, loggedIn, username } from '../UserState.js';
import axios from 'axios'
export let route;
export let pageCtx;
console.log(pageCtx)
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/img/logo_crop.png" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" class:active={route=="/"}>
<a class="nav-link" href="/">Server Status</a>
</li>
{#if $isAdmin}
<li class="nav-item" class:active={route=="/admin"}>
<a class="nav-link" style="color: red;" href="/admin">Admin Panel</a>
</li>
{/if}
</ul>
<ul class="navbar-nav">
{#if $loggedIn}
<li class="nav-item" class:active={route=="/profile"}>
<span class="navbar-text">Welcome <a href="/profile">{$username}</a>!</span>
</li>
<li class="nav-item">
<a class="nav-link" on:click|preventDefault={logout} href="/logout">Logout</a>
</li>
{:else}
<li class="nav-item" class:active={route=="/login"}>
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item" class:active={route=="/register"}>
<a class="nav-link" href="/register">Register</a>
</li>
{/if}
</ul>
</div>
</div>
</nav>