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

<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import { navigation, pages } from "../../store"
    import Header from "./Header.svelte"
    $: console.log($navigation, "nav")
    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">
            {#if $navigation}
                <div class="container">
                    <div class="inner-container">
                        <div class="pages">
                            {#each $navigation.pages as page}
                                <button
                                    class="page"
                                    on:click="{() => {
                                        active = false
                                        navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
                                    }}"
                                >
                                    {page.name}
                                </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>
            {/if}
        </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>