add parent navigation

frontend/rabbi_gerzi/src/views/AdminElementPage.vue

@@ -6,6 +6,7 @@ import {
   ChevronUp as ChevronUpIcon,
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
+import ElementParentLink from '@/components/ElementParentLink.vue'
 import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
@@ -30,6 +31,7 @@ const elementsStore = useElementsStore()
 const {
   element,
   childElements,
+  parentElement,
   siblingElements,
   isLoading,
   error,
@@ -352,6 +354,12 @@ function resetInput(changeEvent: Event): void {
     <SiteHeader />
     <main class="admin-element-page__main" data-cy="admin-element-page">
       <header class="admin-element-page__header">
+        <ElementParentLink
+          v-if="parentElement !== null"
+          :parent-element="parentElement"
+          data-cy="admin-parent-link"
+          route-name="admin-element"
+        />
         <h1 class="admin-element-page__heading">Edit Element</h1>
       </header>
 
@@ -730,7 +738,7 @@ function resetInput(changeEvent: Event): void {
 }
 
 .admin-element-page__heading {
-  margin: 0;
+  margin: 0.35rem 0 0;
   color: #2c2c2c;
   font-family: var(--font-serif);
   font-size: 2rem;

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 ElementParentLink from '@/components/ElementParentLink.vue'
 import ElementSiblingNavigation from '@/components/ElementSiblingNavigation.vue'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
@@ -10,8 +11,14 @@ type TimestampPart = string | undefined
 
 const route = useRoute()
 const elementsStore = useElementsStore()
-const { element, childElements, siblingElements, isLoading, error } =
-  storeToRefs(elementsStore)
+const {
+  element,
+  childElements,
+  parentElement,
+  siblingElements,
+  isLoading,
+  error,
+} = storeToRefs(elementsStore)
 
 const youtubeIframeAllow = [
   'accelerometer',
@@ -221,6 +228,17 @@ function isShortYoutubeHost(hostname: string): boolean {
           data-cy="element-icon"
         />
 
+        <div
+          v-if="parentElement !== null"
+          class="element-page__parent-navigation"
+        >
+          <ElementParentLink
+            :parent-element="parentElement"
+            data-cy="element-parent-link"
+            route-name="element"
+          />
+        </div>
+
         <h1 class="element-page__heading">
           {{ element.title }}
         </h1>
@@ -335,6 +353,12 @@ function isShortYoutubeHost(hostname: string): boolean {
   object-fit: contain;
 }
 
+.element-page__parent-navigation {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 0.5rem;
+}
+
 .element-page__heading {
   margin: 0;
   color: #2c2c2c;