generated from cms/tibi-docs
87 lines
2.5 KiB
Svelte
87 lines
2.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
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">
|
||
|
|
<div class="container">
|
||
|
|
<div class="pages">
|
||
|
|
{#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
|
||
|
|
<button class="page">
|
||
|
|
{page}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
<div class="footer-infos"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
@import "../../assets/css/main.less";
|
||
|
|
.menu {
|
||
|
|
position: absolute;
|
||
|
|
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;
|
||
|
|
align-items: flex-end;
|
||
|
|
width: 80%;
|
||
|
|
margin: 10vw 0px;
|
||
|
|
.footer-infos {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.pages {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex-direction: column;
|
||
|
|
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>
|