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

<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import { navigation, pages, rerender } from "../store"
    let nextpage = $navigation?.pages[0]
    $: nextpage = $navigation?.pages[0]
    function getNextPage(pages) {
        if (location.pathname == "/" || location.pathname == "") return

        let currPage = pages.find(
            (page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
        )

        let currIndex = pages.indexOf(currPage)
        let nextIndex
        if (pages.length - 1 == currIndex) {
            nextIndex = 0
        } else {
            nextIndex = currIndex + 1
        }
        nextpage = pages[nextIndex]
    }
    let blackBg = false
    setInterval(() => {
        if (location.pathname == "/") {
            blackBg = true
        } else {
            blackBg = false
        }
        getNextPage($navigation.pages)

        if (location.pathname.split("/").filter((s) => s).length >= 2) {
            showNext = false
        } else {
            showNext = true
        }
    }, 1000)
    let showNext = true
    $: {
        if ($rerender) {
            if (location.pathname != "/") {
                getNextPage($navigation.pages)
            }
        }
        if (location.pathname.split("/").filter((s) => s).length >= 2) {
            showNext = false
        } else {
            showNext = true
        }
    }
</script>

<div class="footer" class:black-bg="{blackBg}">
    {#if showNext}
        <button
            class="upper-part"
            on:click="{() => {
                $rerender = $rerender + 1
                navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
            }}"
        >
            <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
            <div class="lower">{nextpage?.name}</div>
        </button>{/if}
    <div class="lower-part">
        <div class="container">
            <div class="links">
                <button
                    on:click="{() => {
                        $rerender = $rerender + 1
                        navigate('/datenschutz')
                    }}">Datenschutz</button
                >
                <button
                    on:click="{() => {
                        $rerender = $rerender + 1
                        navigate('/impressum')
                    }}">Impressum</button
                >
            </div>
            <div class="contact">
                <button>0711 644 700-0</button>

                <button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
            </div>
        </div>
    </div>
</div>

<style lang="less">
    @import "../assets/css/main.less";
    .footer {
        padding-top: 80px;
        display: flex;
        position: relative;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-end;
        color: @font-color-secondary;
        &.black-bg {
            margin-top: -10px;
            background-color: @bg-color-secondary;
        }
        .upper-part {
            background-color: @bg-color-secondary;
            padding: 10px 40px;
            display: flex;
            flex-direction: column;
            width: fit-content;
            .upper {
                color: @font-color-secondary;
                font-size: 12px;
                display: flex;
                gap: 10px;
                @media @tablet {
                    font-size: 14px;
                }
            }
            .lower {
                color: @font-color-secondary;
                font-size: 22px;
                font-family: "Libre Caslon Text", serif;
                @media @tablet {
                    font-size: 24px;
                }
            }
        }

        .lower-part {
            padding: 40px 20px;
            background-color: @bg-color-secondary;
            width: 100%;
            display: flex;
            justify-content: center;
            .container {
                max-width: 1400px;
                width: 100%;
                display: flex;
                padding: 0px 2.5vw;
                flex-direction: column;
                .links,
                .contact {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 0px;
                }
                button {
                    color: @font-color-secondary;
                    a {
                        color: @font-color-secondary;
                        font-weight: normal;
                    }
                }
                @media @tablet {
                    padding: 80px 2.5vw;
                    flex-direction: row;
                    justify-content: space-between;
                    .links,
                    .contact {
                        display: flex;
                        justify-content: flex-start;
                        gap: 40px;
                        padding: 0px;
                    }
                }
            }
        }
    }
</style>