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

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

@@ -0,0 +1,54 @@
<script lang="ts">
export let active = false
export let opened = false
</script>
<div class="header">
<div class="logo">
<img src="/media/Logo Quer.svg" alt="Logo Quer" />
</div>
<button class="menu" on:click="{() => (active = !active)}">
<div>MENÜ</div>
{#if opened}
<img src="/media/ei close.svg" alt="Logo" />
{:else}
<img src="/media/BurgerMenu.svg" alt="Menu" />
{/if}
</button>
</div>
<style lang="less">
@import "../../assets/css/main.less";
.header {
width: 100%;
padding: 10.4px 5px;
@media @tablet {
padding: 25.4px 60px;
}
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
.logo {
flex-grow: 0;
flex-shrink: 1;
img {
width: 100%;
}
}
.menu {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
@media @tablet {
gap: 10px;
}
}
}
</style>

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>