173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
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',
|
|
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: '♡' },
|
|
]
|
|
|
|
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>
|
|
<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>
|
|
<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"
|
|
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>
|