generated from cms/tibi-docs
242 lines
10 KiB
Svelte
242 lines
10 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}" />
|
|
|
|
<nav class="menu-content">
|
|
{#if $navigation}
|
|
<div class="container">
|
|
<div class="inner-container">
|
|
<ul class="pages">
|
|
{#each $navigation.pages as page}
|
|
{#if Object.values($pages)?.find((o) => o.id == page.page)?.path !== "/"}
|
|
<li>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="page underline"
|
|
on:click="{() => {
|
|
active = false
|
|
$rerender = $rerender + 1
|
|
navigate(
|
|
Object.values($pages)?.find((o) => o.id == page.page)?.path || '/'
|
|
)
|
|
}}"
|
|
>
|
|
{page.name}
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
{/each}
|
|
</ul>
|
|
|
|
<div class="footer-infos">
|
|
<div class="upper">
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="underline"
|
|
on:click="{() => {
|
|
active = false
|
|
$rerender = $rerender + 1
|
|
navigate('/datenschutz')
|
|
}}">Datenschutz</a
|
|
>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="underline"
|
|
on:click="{() => {
|
|
active = false
|
|
$rerender = $rerender + 1
|
|
navigate('/impressum')
|
|
}}">Impressum</a
|
|
>
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="underline"
|
|
on:click="{() => {
|
|
active = false
|
|
$rerender = $rerender + 1
|
|
navigate('/contact')
|
|
}}">Contact (EN)</a
|
|
>
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="underline"
|
|
href="/media/Anfahrtsbeschreibung_FONTIS-4.pdf"
|
|
target="_blank"
|
|
>
|
|
Anfahrt (DE)
|
|
</a>
|
|
<a
|
|
style="text-decoration: none;"
|
|
class="underline"
|
|
href="/media/Anfahrtsbeschreibung_FONTIS_en.pdf"
|
|
target="_blank"
|
|
>
|
|
Directions (EN)
|
|
</a>
|
|
</div>
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<div class="lower">
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a>+49 (0) 711 655 700-0</a>
|
|
<a>
|
|
<a href="mailto:info@fontis.de" style="text-decoration: none;" class="button">
|
|
info@fontis.de
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</nav>
|
|
</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: 100%;
|
|
overflow-y: auto;
|
|
&.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;
|
|
}
|
|
a {
|
|
color: @font-color-secondary;
|
|
font-weight: normal;
|
|
text-decoration: initial;
|
|
}
|
|
@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;
|
|
font-family: "Libre Caslon Text", serif;
|
|
}
|
|
}
|
|
@media @tablet {
|
|
flex-direction: row;
|
|
.footer-infos {
|
|
width: 50%;
|
|
}
|
|
.pages {
|
|
align-items: flex-start;
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|