wm-fontis/wm-fontis-tibi-2023
3
0
Fork 0
generated from cms/tibi-docs
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header & menu

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-07-13 16:43:19 +00:00
parent f290e9d039
commit 7ce16346e0
63 changed files with 233 additions and 8241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/lib/components/Menu/Menu.svelte Normal file
View File

@@ -0,0 +1,86 @@
<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>