add media page

frontend/rabbi_gerzi/src/components/SiteHeader.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+const signatureImage = {
+  src: '/assets/signature.png',
+  alt: "R' Yehoshua Gerzi",
+}
+
+onMounted(() => {
+  void authStore.fetchUser()
+})
+
+async function handleLogout(): Promise<void> {
+  await authStore.logout()
+}
+
+const navItems = [
+  { label: 'Torah Media', href: '/media', icon: '▶' },
+  { label: 'About', href: '/about', icon: 'ⓘ' },
+  { label: 'Contact', href: '/contact', icon: '➤' },
+  { label: 'Donate', href: '/donate', icon: '♡' },
+]
+</script>
+
+<template>
+  <header class="site-header">
+    <RouterLink class="site-header__brand" to="/">
+      <img v-bind="signatureImage" class="site-header__signature" />
+    </RouterLink>
+    <nav class="site-header__nav">
+      <RouterLink
+        v-for="item in navItems"
+        :key="item.href"
+        :to="item.href"
+        class="site-header__nav-link"
+      >
+        <span class="site-header__nav-icon" aria-hidden="true">
+          {{ item.icon }}
+        </span>
+        <span>{{ item.label }}</span>
+      </RouterLink>
+      <button
+        v-if="authStore.isAuthenticated"
+        data-cy="navbar-logout"
+        type="button"
+        class="site-header__nav-link"
+        @click="handleLogout"
+      >
+        Logout
+      </button>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background: rgba(244, 239, 225, 0.85);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.site-header__brand {
+  display: inline-flex;
+  align-items: center;
+}
+
+.site-header__signature {
+  height: 36px;
+  width: auto;
+}
+
+.site-header__nav {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.site-header__nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 9999px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--color-text);
+  transition: background 0.15s ease;
+}
+
+.site-header__nav-link:hover {
+  background: var(--color-cream);
+}
+
+.site-header__nav-icon {
+  display: inline-block;
+  font-size: 0.85rem;
+  color: var(--color-slate);
+}
+
+@media (max-width: 768px) {
+  .site-header {
+    padding: 0.75rem 1rem;
+  }
+
+  .site-header__nav-link {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.85rem;
+  }
+}
+</style>