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]
    }
    setInterval(() => {
        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">
    {#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="links">
            <button>Datenschutz</button>
            <button>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>

<style lang="less">
    @import "../assets/css/main.less";
    .footer {
        margin-top: 80px;
        display: flex;
        position: relative;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-end;
        color: @font-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;
                @media @tablet {
                    font-size: 24px;
                }
            }
        }

        .lower-part {
            padding: 40px 40px;
            background-color: @bg-color-secondary;
            width: 100%;
            display: flex;
            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 40px;
                flex-direction: row;
                justify-content: space-between;
                .links,
                .contact {
                    display: flex;
                    justify-content: flex-start;
                    gap: 40px;
                    padding: 0px;
                }
            }
        }
    }
</style>