<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}" />

        <nav class="menu-content">
            {#if $navigation}
                <div class="container">
                    <div class="inner-container">
                        <ul class="pages">
                            {#each $navigation.pages as page}
                                {#if Object.values($pages)?.find((o) => o.id == page.page)?.path !== "/"}
                                    <li>
                                        <!-- svelte-ignore a11y-click-events-have-key-events -->
                                        <!-- svelte-ignore a11y-missing-attribute -->
                                        <a
                                            style="text-decoration: none;"
                                            class="page underline"
                                            on:click="{() => {
                                                active = false
                                                $rerender = $rerender + 1
                                                navigate(
                                                    Object.values($pages)?.find((o) => o.id == page.page)?.path || '/'
                                                )
                                            }}"
                                        >
                                            {page.name}
                                        </a>
                                    </li>
                                {/if}
                            {/each}
                        </ul>

                        <div class="footer-infos">
                            <div class="upper">
                                <a
                                    style="text-decoration: none;"
                                    class="underline"
                                    on:click="{() => {
                                        active = false
                                        $rerender = $rerender + 1
                                        navigate('/contact')
                                    }}">Contact (EN)</a
                                >
                                <a
                                    style="text-decoration: none;"
                                    class="underline"
                                    href="/media/Anfahrtsbeschreibung_FONTIS-4.pdf"
                                    target="_blank"
                                >
                                    Anfahrt (DE)
                                </a>
                                <a
                                    style="text-decoration: none;"
                                    class="underline"
                                    href="/media/Anfahrtsbeschreibung_FONTIS_en.pdf"
                                    target="_blank"
                                >
                                    Directions (EN)
                                </a>
                                <!-- svelte-ignore a11y-click-events-have-key-events -->
                                <!-- svelte-ignore a11y-missing-attribute -->
                                <a
                                    style="text-decoration: none;"
                                    class="underline"
                                    on:click="{() => {
                                        active = false
                                        $rerender = $rerender + 1
                                        navigate('/datenschutz')
                                    }}">Datenschutz</a
                                >
                                <!-- svelte-ignore a11y-click-events-have-key-events -->
                                <!-- svelte-ignore a11y-missing-attribute -->

                                <a
                                    style="text-decoration: none;"
                                    class="underline"
                                    on:click="{() => {
                                        active = false
                                        $rerender = $rerender + 1
                                        navigate('/impressum')
                                    }}">Impressum</a
                                >
                            </div>
                            <!-- svelte-ignore a11y-missing-attribute -->
                            <div class="lower">
                                <!-- svelte-ignore a11y-missing-attribute -->
                                <a>+49 (0) 711 655 700-0</a>
                                <a>
                                    <a href="mailto:info@fontis.de" style="text-decoration: none;" class="button">
                                        info@fontis.de
                                    </a>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            {/if}
        </nav>
    </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: 100%;
        overflow-y: auto;
        &.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;
                                align-items: flex-end;
                                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;
                            }
                            a {
                                color: @font-color-secondary;
                                font-weight: normal;
                                text-decoration: initial;
                            }
                            @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;
                                font-family: "Libre Caslon Text", serif;
                            }
                        }
                        @media @tablet {
                            flex-direction: row;
                            .footer-infos {
                                width: 50%;
                            }
                            .pages {
                                align-items: flex-start;
                                width: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
