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

<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import { navigation, pages, rerender } from "../../store"
    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">
            {#if $navigation}
                <div class="container">
                    <div class="inner-container">
                        <div class="pages">
                            {#each $navigation.pages as page}
                                <button
                                    class="page underline"
                                    on:click="{() => {
                                        active = false
                                        $rerender = $rerender + 1
                                        navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
                                    }}"
                                >
                                    {page.name}
                                </button>
                            {/each}
                        </div>
                        <div class="footer-infos">
                            <div class="upper">
                                <button class="underline">Datenschutz</button>
                                <button class="underline">Impressum</button>
                            </div>
                            <div class="lower">
                                <button>0711&nbsp;644&nbsp;700-0</button>
                                <button>
                                    <a href="mailto:info@fontis.de" class="button"> info@fontis.de </a>
                                </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-start;
                    align-items: flex-end;
                    width: 80%;
                    margin: 10vw 0px;
                    @media @tablet {
                        justify-content: flex-end;
                    }
                    .inner-container {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        height: 100%;
                        justify-content: space-between;
                        @media @tablet {
                            justify-content: initial;
                            height: initial;
                        }

                        .footer-infos {
                            width: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            @media @tablet {
                                flex-wrap: initial;
                                flex-direction: column;
                                height: 100%;
                            }
                            justify-content: space-between;
                            text-align: start;

                            .upper {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 15px;
                                margin-top: 15px;
                                @media @tablet {
                                    margin-top: 0px;
                                    align-items: flex-start;
                                }
                                @media @desktop {
                                    align-items: flex-end;
                                }
                            }
                            .lower {
                                margin-top: 15px;
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;

                                @media @tablet {
                                    align-items: flex-start;
                                }
                                @media @desktop {
                                    flex-direction: row;
                                    justify-content: flex-end;
                                }
                                gap: 20px;
                            }
                            button {
                                color: @font-color-secondary;
                                a {
                                    color: @font-color-secondary;
                                    font-weight: normal;
                                }
                            }
                            @media @desktop {
                                .lower {
                                    gap: 40px;
                                }
                            }
                        }
                        .pages {
                            width: 100%;
                            display: flex;
                            align-items: flex-start;
                            flex-direction: column;
                            font-family: "Libre Caslon Text", serif;
                            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>