add admin element editing

frontend/rabbi_gerzi/src/components/SiteHeader.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed, onMounted } from 'vue'
+import { RouterLink, useRoute, type RouteLocationRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
+interface ContextualNavAction {
+  label: string
+  to: RouteLocationRaw
+}
+
 const authStore = useAuthStore()
+const route = useRoute()
 
 const signatureImage = {
   src: '/assets/signature.png',
@@ -24,6 +30,42 @@ const navItems = [
   { label: 'Contact', href: '/contact', icon: '➤' },
   { label: 'Donate', href: '/donate', icon: '♡' },
 ]
+
+const routeElementId = computed(() => {
+  const currentRouteElementId = route.params.id
+
+  if (Array.isArray(currentRouteElementId)) {
+    return currentRouteElementId.join('/')
+  }
+
+  if (typeof currentRouteElementId === 'string') {
+    return currentRouteElementId
+  }
+
+  return null
+})
+
+const contextualNavAction = computed<ContextualNavAction | null>(() => {
+  if (!authStore.isAuthenticated || routeElementId.value === null) {
+    return null
+  }
+
+  if (route.name === 'element') {
+    return {
+      label: 'Edit Element',
+      to: { name: 'admin-element', params: { id: routeElementId.value } },
+    }
+  }
+
+  if (route.name === 'admin-element') {
+    return {
+      label: 'View Element',
+      to: { name: 'element', params: { id: routeElementId.value } },
+    }
+  }
+
+  return null
+})
 </script>
 
 <template>
@@ -43,6 +85,14 @@ const navItems = [
         </span>
         <span>{{ item.label }}</span>
       </RouterLink>
+      <RouterLink
+        v-if="contextualNavAction !== null"
+        :to="contextualNavAction.to"
+        class="site-header__nav-link"
+        data-cy="navbar-element-mode"
+      >
+        {{ contextualNavAction.label }}
+      </RouterLink>
       <button
         v-if="authStore.isAuthenticated"
         data-cy="navbar-logout"