Initial commit

frontend/src/lib/components/header/Header.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import DesktopHeader from "./desktop.svelte"
+    import MobileHeader from "./mobile.svelte"
+    import { navigation } from "../../stores"
+</script>
+
+<main class="headercontainer">
+    <nav>
+        <div class="mobile-header">
+            <MobileHeader />
+        </div>
+        <div class="desktop-header">
+            <DesktopHeader />
+        </div>
+    </nav>
+</main>
+<div class="placeholder"></div>
+
+<style global lang="less">
+    @import "../../assets/css/main.less";
+    @desktop: ~"only screen and (min-width: 1440px)";
+
+    .ignore {
+        display: none !important;
+        visibility: hidden;
+    }
+    nav {
+        position: relative;
+        height: 100%;
+        width: 100%;
+    }
+    .placeholder {
+        height: 105px;
+    }
+    .headercontainer {
+        display: flex;
+        position: fixed;
+        z-index: 5500;
+        top: 0px;
+        justify-content: space-between;
+        width: 100%;
+        color: #333;
+        height: 105px;
+    }
+    @media @desktop {
+        .headercontainer,
+        .placeholder {
+            height: 120px;
+        }
+        nav {
+            position: initial;
+        }
+    }
+
+    @media @mobile {
+        .desktop-header {
+            display: none;
+        }
+        .mobile-header {
+            display: inherit;
+        }
+    }
+    @media @desktop {
+        .mobile-header {
+            display: none;
+        }
+        .desktop-header {
+            display: inherit;
+        }
+    }
+</style>