add sibling navigation

frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+} from 'lucide-vue-next'
+import type { ChildElement } from '@/stores/elements'
+
+type ElementRouteName = 'element' | 'admin-element'
+type ElementNavigationPrefix = 'element' | 'admin'
+
+interface Props {
+  currentElementId: number
+  dataCyPrefix: ElementNavigationPrefix
+  routeName: ElementRouteName
+  siblingElements: ChildElement[]
+}
+
+const props = defineProps<Props>()
+
+const currentSiblingIndex = computed(() => {
+  return props.siblingElements.findIndex((siblingElement) => {
+    return siblingElement.id === props.currentElementId
+  })
+})
+
+const hasSiblingNavigation = computed(() => {
+  return props.siblingElements.length > 1 && currentSiblingIndex.value !== -1
+})
+
+const previousSibling = computed(() => {
+  return siblingElementAtOffset(-1)
+})
+
+const nextSibling = computed(() => {
+  return siblingElementAtOffset(1)
+})
+
+const navigationDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-navigation`
+})
+
+const previousDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-previous`
+})
+
+const nextDataCy = computed(() => {
+  return `${props.dataCyPrefix}-sibling-next`
+})
+
+function siblingElementAtOffset(offset: number): ChildElement | null {
+  if (!hasSiblingNavigation.value) {
+    return null
+  }
+
+  const siblingCount = props.siblingElements.length
+  const targetIndex = (
+    currentSiblingIndex.value
+    + offset
+    + siblingCount
+  ) % siblingCount
+
+  return props.siblingElements[targetIndex] ?? null
+}
+</script>
+
+<template>
+  <nav
+    v-if="
+      hasSiblingNavigation
+        && previousSibling !== null
+        && nextSibling !== null
+    "
+    class="element-sibling-navigation"
+    :data-cy="navigationDataCy"
+    aria-label="Sibling elements"
+  >
+    <RouterLink
+      :to="{
+        name: routeName,
+        params: { id: previousSibling.id },
+      }"
+      class="element-sibling-navigation__link"
+      :data-cy="previousDataCy"
+    >
+      <ChevronLeftIcon :size="18" aria-hidden="true" />
+      <span>Previous</span>
+    </RouterLink>
+    <RouterLink
+      :to="{
+        name: routeName,
+        params: { id: nextSibling.id },
+      }"
+      class="element-sibling-navigation__link"
+      :data-cy="nextDataCy"
+    >
+      <span>Next</span>
+      <ChevronRightIcon :size="18" aria-hidden="true" />
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.element-sibling-navigation {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 1.35rem 0 0;
+}
+
+.element-sibling-navigation__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 2.5rem;
+  padding: 0.55rem 0.95rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text);
+  background: var(--color-white);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    border-color 180ms ease,
+    color 180ms ease;
+}
+
+.element-sibling-navigation__link:hover,
+.element-sibling-navigation__link:focus-visible {
+  border-color: var(--color-slate);
+  color: var(--color-slate);
+}
+
+.element-sibling-navigation__link:focus-visible {
+  outline: 3px solid rgb(61 78 93 / 24%);
+  outline-offset: 3px;
+}
+</style>