<script lang="ts">
    import Header from "./Header.svelte"
    export let active = false
</script>

<div class="menu" class:active="{active}">
    <div class="menu-container">
        <Header bind:active="{active}" opened="{true}" />
        <div class="menu-content">
            <div class="container">
                <div class="pages">
                    {#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
                        <button class="page">
                            {page}
                        </button>
                    {/each}
                </div>
                <div class="footer-infos"></div>
            </div>
        </div>
    </div>
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .menu {
        position: absolute;
        background-color: @bg-color;
        z-index: 1000;
        top: 110vh;
        left: 0px;
        right: 0px;
        height: 100vh;
        &.active {
            top: 0px;
        }

        .menu-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .menu-content {
                background-color: @bg-color-secondary;
                color: @font-color-secondary;
                width: 100%;
                display: flex;
                justify-content: center;
                flex-grow: 1;
                .container {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    width: 80%;
                    margin: 10vw 0px;
                    .footer-infos {
                        width: 100%;
                    }
                    .pages {
                        width: 100%;
                        display: flex;
                        align-items: flex-start;
                        flex-direction: column;
                        gap: 20px;
                        .page {
                            font-size: 1.6rem;
                            color: @font-color-secondary;
                        }
                    }
                    @media @tablet {
                        flex-direction: row;
                        .footer-infos {
                            width: 50%;
                        }
                        .pages {
                            align-items: flex-start;
                            width: 50%;
                        }
                    }
                }
            }
        }
    }
</style>
