wm-AllKids-tibi2023/frontend/src/lib/components/header/Header.svelte

<script lang="ts">
    import { onMount } from "svelte"
    import DesktopHeader from "./desktop.svelte"
    import MobileHeader from "./mobile.svelte"
    
    let background: boolean
    let isHomePage: boolean
    let scrolled: boolean = false

    // Initial background state
    function updateBackground() {
        background = !isHomePage || scrolled
    }

    // Update isHomePage based on current path
    function checkHomePage() {
        isHomePage = window.location.pathname === "/"
        updateBackground()
    }

    // Scroll event listener to check if scrolled 100vh
    function checkScroll() {
        const scrollHeight = window.innerHeight // 100vh in pixels
        scrolled = window.scrollY >= scrollHeight
        checkHomePage()
    }

    onMount(() => {
        // Initial check
        checkHomePage()
        checkScroll()

        // Listen for changes
        window.addEventListener("scroll", checkScroll)
        window.addEventListener("popstate", checkHomePage)

        return () => {
            // Cleanup event listeners
            window.removeEventListener("scroll", checkScroll)
            window.removeEventListener("popstate", checkHomePage)
        }
    })
    let show = false
</script>

<main class="headercontainer">
    <nav class="trans" class:bg="{background || show}">
        <div class="mobile-header">
            <MobileHeader bind:show="{show}" />
        </div>
        <div class="desktop-header">
            <DesktopHeader />
        </div>
    </nav>
</main>
<div class="placeholder"></div>

<style global lang="less">
    @import "../../assets/css/main.less";
    @import "../../assets/css/variables.less";
    .trans {
        background-color: transparent;
        transition: background-color 0.5s ease-in-out;
    }
    .bg {
        background-color: var(--background-color);
    }

    @desktop: ~"only screen and (min-width: 1440px)";
    .HP {
        h2 {
            font-size: 2.1rem !important;
            @media @tablet {
                font-size: 3.2rem !important;
            }
        }
    }

    .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: var(--normal-font-color);
        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>