wm-fontis-tibi-2023/frontend/src/lib/components/Menu/Header.svelte

<script lang="ts">
    import { navigate } from "svelte-routing/src/history"

    export let active = false
    export let opened = false
</script>

<div class="header" class:sticky="{!opened}">
    <div class="logo" on:keydown on:click="{() => navigate('/')}">
        <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";
    .sticky {
        position: sticky;
        top: 0px;
        z-index: 100;
    }
    .header {
        background-color: @bg-color;
        width: 100%;
        padding: 10.4px 5px;
        @media @tablet {
            padding: 25.4px 60px;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        .logo {
            cursor: pointer;
            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>