76 lines
2.7 KiB
Svelte
76 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import Navlink from "./Navlink.svelte";
|
|
import { Link } from "svelte-navigator";
|
|
|
|
import logo from "./assets/turtle.png";
|
|
|
|
import { user } from "./stores";
|
|
|
|
let menu_open = false;
|
|
</script>
|
|
|
|
<nav class="navbar">
|
|
<div class="navbar-brand">
|
|
<Link class="navbar-item" to="/">
|
|
<img class="image is-24x24 mr-1" src={logo} alt="logo" />
|
|
<span><strong>Control Panel</strong></span>
|
|
</Link>
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a
|
|
role="button"
|
|
class="navbar-burger {menu_open ? 'is-active' : ''}"
|
|
on:click={() => (menu_open = !menu_open)}
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
>
|
|
<span aria-hidden="true" />
|
|
<span aria-hidden="true" />
|
|
<span aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
<div class="navbar-menu {menu_open ? 'is-active' : ''}">
|
|
<div class="navbar-start">
|
|
<Navlink target="/foo" text="Foo" icon="fas fa-hippo" />
|
|
<Navlink target="/bar" text="Bar" icon="fas fa-otter" />
|
|
<Navlink target="/monitoring" text="Monitoring" icon="fas fa-binoculars" />
|
|
<Navlink target="/mining" text="Mining" icon="fas fa-person-digging" />
|
|
<Navlink target="/stats" text="Statistics" icon="fas fa-chart-line" />
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
{#if $user !== null}
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a class="navbar-link">
|
|
<img
|
|
class="image is-24x24 mr-2"
|
|
src={$user.picture}
|
|
alt="{$user.name}'s picture"
|
|
/>
|
|
<span>{$user.name}</span>
|
|
</a>
|
|
|
|
<div class="navbar-dropdown is-right">
|
|
<div class="navbar-item">
|
|
<p>{$user.email}</p>
|
|
</div>
|
|
<hr class="navbar-divider" />
|
|
<a
|
|
href="/user/logout"
|
|
class="navbar-item has-text-danger"
|
|
>
|
|
Log out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="navbar-item">
|
|
<a class="button is-primary" href="/user/login">
|
|
<strong>Log in</strong>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</nav>
|