Initial commit

2025-10-02 08:54:03 +02:00
commit ea54638227
1642 changed files with 53677 additions and 0 deletions
--- a/frontend/src/lib/components/header/Header.svelte
+++ b/frontend/src/lib/components/header/Header.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import { onMount } from "svelte"
+    import { getDBEntry } from "../../../api"
+    import { navigationCache, location, categories, overlays } from "../../store"
+    import DesktopHeader from "./Desktop.svelte"
+    import {
+        getBCGraphCategories,
+        mapBigcommerceCategoriesToNavigation,
+    } from "../../functions/CommerceAPIs/bigCommerce/categories"
+    import Banner from "../widgets/Banner.svelte"
+
+    let navigationElements: NavigationElement[] = [],
+        navOpen = false,
+        subNavOpen: { [key: number]: boolean } = {},
+        windowWidth: number
+
+    function elementsToCache(elements: NavigationElement[]) {
+        elements.forEach((el) => {
+            if (!el.external) {
+                if (!$navigationCache[el.page]) $navigationCache[el.page] = el
+                if (el.elements?.length > 0) elementsToCache(el.elements)
+            }
+        })
+    }
+
+    getDBEntry("navigation", {
+        tree: 0,
+    }).then((nav) => {
+        navigationElements.push(...nav.elements)
+        navigationElements = navigationElements
+    })
+
+    $: if (!navOpen) subNavOpen = {}
+    $: if ($location) navOpen = false
+
+    let scrolled: boolean = false,
+        isHomepage: boolean = false,
+        bannerVisible = false
+    $: isHomepage = !$location.path || $location.path === "/"
+
+    function checkScroll() {
+        scrolled = window.scrollY >= 100
+    }
+
+    onMount(() => {
+        if (typeof window !== "undefined") {
+            checkScroll()
+            window.addEventListener("scroll", checkScroll)
+            return () => {
+                window.removeEventListener("scroll", checkScroll)
+            }
+        }
+    })
+    $: {
+        if (typeof window !== "undefined" && $location) {
+            checkScroll()
+        }
+    }
+
+    let activeSubmenu = -1
+    $: darkBG = isHomepage ? (scrolled ? true : activeSubmenu >= 0 || $overlays?.length) : false
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+<Banner bind:isVisible="{bannerVisible}" />
+<header
+    class="headercontainer"
+    id="{'header-container'}"
+    class:scrolled="{darkBG}"
+    class:homepageHeader="{isHomepage}"
+    class:bannerVisible="{bannerVisible}"
+    role="dialog"
+    aria-label="Hauptnavigation"
+    on:focus
+>
+    <div class="padding">
+        {#key [bannerVisible]}
+            <DesktopHeader
+                bind:activeSubmenu="{activeSubmenu}"
+                elements="{navigationElements}"
+                bannerVisible="{bannerVisible}"
+                scrolled="{darkBG}"
+            />
+        {/key}
+    </div>
+</header>
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+
+    @desktop: ~"only screen and (min-width: 1440px)";
+
+    .headercontainer {
+        display: flex;
+        flex-direction: column;
+        @media @mobile {
+            overflow: hidden;
+        }
+        position: sticky;
+        z-index: 5500;
+        top: 0px;
+
+        justify-content: space-between;
+        background-color: #0d0c0c;
+
+        align-items: center;
+        width: 100%;
+        .padding {
+            width: 100%;
+            padding: 0px var(--horizontal-default-margin);
+            height: 100%;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+        }
+        &.homepageHeader {
+            background-color: transparent;
+        }
+        &.scrolled&.homepageHeader {
+            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
+            background-color: var(--bg-100);
+        }
+    }
+</style>