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

<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="inner-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 class="upper">
                            <button>Datenschutz</button>
                            <button>Impressum</button>
                        </div>
                        <div class="lower">
                            <button>0711 644 700-0</button>
                            <button>info@fontis.de</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .menu {
        position: fixed;
        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;
                    justify-content: flex-end;
                    align-items: flex-end;
                    width: 80%;
                    margin: 10vw 0px;
                    .inner-container {
                        width: 100%;
                        display: flex;

                        .footer-infos {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .upper {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-end;
                                gap: 15px;
                            }
                            .lower {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-end;
                                @media @desktop {
                                    flex-direction: row;
                                    justify-content: flex-end;
                                }
                                gap: 20px;
                            }
                            button {
                                font-size: 1.6rem;
                                color: @font-color-secondary;
                            }
                            @media @desktop {
                                .lower {
                                    gap: 40px;
                                }
                            }
                        }
                        .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>