swaf/src/assets/views/layouts/BaseLayout.svelte

79 lines
2.2 KiB
Svelte

<script lang="ts">
import {locals} from "../../ts/stores.js";
import {route} from "../../../common/Routing.js";
import FlashMessages from "../components/FlashMessages.svelte";
import NavMenuItem from "../components/NavMenuItem.svelte";
export let title: string;
export let h1: string = title;
export let description: string;
export let refresh_after: number | undefined = undefined;
</script>
<style lang="scss">
header {
text-align: center;
}
footer {
text-align: center;
}
</style>
<svelte:head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>{title || 'Undefined title'}</title>
{#if description}
<meta name="description" content={description}>
{/if}
<link rel="shortcut icon" type="image/png" href="/img/logox1024.png">
<link rel="shortcut icon" type="image/png" href="/img/logox128.png">
<link rel="shortcut icon" type="image/svg" href="/img/logo.svg">
{#if refresh_after}
<meta http-equiv="refresh" content={refresh_after}>
{/if}
<link rel="stylesheet" href="/css/layout.css">
</svelte:head>
<header>
<a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {$locals.app.name}</a>
<nav>
<button id="menu-button"><i data-feather="menu"></i></button>
<ul id="main-menu">
{#if $locals.user}
{#if $locals.user.is_admin}
<NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
{/if}
<NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
<NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
{:else}
<NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
{/if}
</ul>
</nav>
</header>
<div class="container">
<FlashMessages/>
</div>
<main>
{#if h1}
<h1>{h1}</h1>
{/if}
{#if $$slots.subtitle}
<p>
<slot name="subtitle"/>
</p>
{/if}
<slot/>
</main>
<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>