127 lines
2.9 KiB
Svelte
127 lines
2.9 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";
|
|
import NavMenu from "../components/NavMenu.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">
|
|
@import "../../scss/vars";
|
|
@import "../../scss/helpers";
|
|
|
|
header {
|
|
@if $headerContainer {
|
|
@include container;
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
padding: 0;
|
|
|
|
height: $headerHeight;
|
|
|
|
@include medium-le {
|
|
z-index: 1;
|
|
position: sticky;
|
|
top: 0;
|
|
flex-direction: row-reverse;
|
|
|
|
@include surface(3);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
padding: 0 8px;
|
|
font-size: 24px;
|
|
|
|
img {
|
|
flex-shrink: 0;
|
|
width: initial;
|
|
height: calc(#{$headerHeight} - 16px);
|
|
margin-right: 8px;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
@include container;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
footer {
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.flash-messages {
|
|
@include container;
|
|
}
|
|
</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="{$locals.app.name} logo"> {$locals.app.name}</a>
|
|
<NavMenu>
|
|
{#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}
|
|
</NavMenu>
|
|
</header>
|
|
|
|
<div class="flash-messages">
|
|
<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>
|