generated from cms/tibi-docs
193 lines
7.4 KiB
Svelte
193 lines
7.4 KiB
Svelte
<script lang="ts">
|
|
import { navigate } from "svelte-routing/src/history"
|
|
import { navigation, pages, rerender } from "../../store"
|
|
import Header from "./Header.svelte"
|
|
export let active = false
|
|
</script>
|
|
|
|
<div class="menu" class:active="{active}">
|
|
<div class="menu-container">
|
|
<Header bind:active="{active}" opened="{true}" />
|
|
<div class="menu-content">
|
|
{#if $navigation}
|
|
<div class="container">
|
|
<div class="inner-container">
|
|
<div class="pages">
|
|
{#each $navigation.pages as page}
|
|
<button
|
|
class="page underline"
|
|
on:click="{() => {
|
|
active = false
|
|
$rerender = $rerender + 1
|
|
navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
|
|
}}"
|
|
>
|
|
{page.name}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
<div class="footer-infos">
|
|
<div class="upper">
|
|
<button
|
|
class="underline"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate('/datenschutz')
|
|
}}">Datenschutz</button
|
|
>
|
|
<button
|
|
class="underline"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate('/impressum')
|
|
}}">Impressum</button
|
|
>
|
|
</div>
|
|
<div class="lower">
|
|
<button>0711 644 700-0</button>
|
|
<button>
|
|
<a href="mailto:info@fontis.de" class="button"> info@fontis.de </a>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
.menu {
|
|
position: fixed;
|
|
background-color: @bg-color;
|
|
z-index: 1000;
|
|
top: 110vh;
|
|
left: 0px;
|
|
right: 0px;
|
|
height: 100vh;
|
|
&.active {
|
|
top: 0px;
|
|
}
|
|
|
|
.menu-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.menu-content {
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
width: 80%;
|
|
margin: 10vw 0px;
|
|
@media @tablet {
|
|
justify-content: flex-end;
|
|
}
|
|
.inner-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
@media @tablet {
|
|
justify-content: initial;
|
|
height: initial;
|
|
}
|
|
|
|
.footer-infos {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
@media @tablet {
|
|
flex-wrap: initial;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
}
|
|
justify-content: space-between;
|
|
text-align: start;
|
|
|
|
.upper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
@media @tablet {
|
|
margin-top: 0px;
|
|
align-items: flex-start;
|
|
}
|
|
@media @desktop {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
.lower {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
@media @tablet {
|
|
align-items: flex-start;
|
|
}
|
|
@media @desktop {
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
gap: 20px;
|
|
}
|
|
button {
|
|
color: @font-color-secondary;
|
|
a {
|
|
color: @font-color-secondary;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
@media @desktop {
|
|
.lower {
|
|
gap: 40px;
|
|
}
|
|
}
|
|
}
|
|
.pages {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
font-family: "Libre Caslon Text", serif;
|
|
gap: 20px;
|
|
.page {
|
|
font-size: 1.6rem;
|
|
color: @font-color-secondary;
|
|
}
|
|
}
|
|
@media @tablet {
|
|
flex-direction: row;
|
|
.footer-infos {
|
|
width: 50%;
|
|
}
|
|
.pages {
|
|
align-items: flex-start;
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|