add sibling navigation

frontend/rabbi_gerzi/src/views/AdminElementPage.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
@@ -23,6 +24,7 @@ const elementsStore = useElementsStore()
 const {
   element,
   childElements,
+  siblingElements,
   isLoading,
   error,
   isSaving,
@@ -318,6 +320,13 @@ function resetInput(changeEvent: Event): void {
         class="admin-element-page__form"
         @submit.prevent="handleSubmit"
       >
+        <ElementSiblingNavigation
+          :current-element-id="element.id"
+          :sibling-elements="siblingElements"
+          data-cy-prefix="admin"
+          route-name="admin-element"
+        />
+
         <label class="admin-element-page__field">
           <span class="admin-element-page__label">Title</span>
           <input

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
 
@@ -9,7 +10,8 @@ type TimestampPart = string | undefined
 
 const route = useRoute()
 const elementsStore = useElementsStore()
-const { element, childElements, isLoading, error } = storeToRefs(elementsStore)
+const { element, childElements, siblingElements, isLoading, error } =
+  storeToRefs(elementsStore)
 
 const youtubeIframeAllow = [
   'accelerometer',
@@ -223,6 +225,13 @@ function isShortYoutubeHost(hostname: string): boolean {
           {{ element.title }}
         </h1>
 
+        <ElementSiblingNavigation
+          :current-element-id="element.id"
+          :sibling-elements="siblingElements"
+          data-cy-prefix="element"
+          route-name="element"
+        />
+
         <div
           v-if="element.richText !== ''"
           class="element-page__rich-text"