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="{() => {
            active = false
            navigate('/')
        }}"
    >
        <img src="/media/Logo Quer.svg" alt="Logo Quer" />
    </div>
    <button class="menu" on:click="{() => (active = !active)}">
        <div class="text">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: 25.4px calc(2.5vw + 10px);

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px;

        .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;
            .text {
                display: none;
            }
            @media @tablet {
                gap: 10px;
                .text {
                    display: block;
                }
            }
        }
    }
</style>