header & menu

2023-07-13 16:43:19 +00:00
parent f290e9d039
commit 7ce16346e0
63 changed files with 233 additions and 8241 deletions
--- a/frontend/src/lib/components/Menu/Header.svelte
+++ b/frontend/src/lib/components/Menu/Header.svelte
@@ -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>