icon cycle circle

frontend/src/lib/components/Footer.svelte

@@ -1,10 +1,45 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import { navigation, pages, rerender } from "../store"
+    let nextpage = $navigation?.pages[0]
+    function getNextPage(pages) {
+        if (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]
+        console.log(nextpage, pages, nextIndex)
+    }
+    setInterval(() => {
+        getNextPage($navigation.pages)
+    }, 1000)
+    $: {
+        if ($rerender) {
+            if (location.pathname != "/") {
+                getNextPage($navigation.pages)
+            }
+        }
+    }
 </script>
 
 <div class="footer">
-    <button class="upper-part">
+    <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">Ihre&nbsp;Bedürfnisse</div>
+        <div class="lower">{nextpage?.name}</div>
     </button>
     <div class="lower-part">
         <div class="links">
@@ -25,9 +60,9 @@
         display: flex;
         flex-direction: column;
         align-items: flex-end;
-        background-color: @bg-color-secondary;
         color: @font-color-secondary;
         .upper-part {
+            background-color: @bg-color-secondary;
             padding: 10px 40px;
             display: flex;
             flex-direction: column;
@@ -52,6 +87,8 @@
 
         .lower-part {
             padding: 40px 40px;
+
+            background-color: @bg-color-secondary;
             width: 100%;
             display: flex;
             flex-direction: column;