12d9db806c
On the subdomain and Plugin Studio branches, the Research item became a plain link to the gallery's own address, and it took the external links' markup: target=_blank and the external-link icon. Choosing Research opened a new tab and left the reader on the page they were on. On /embed-test that read as a page that would not let them go to Research. The gallery is this site's own, so it now opens in the same tab like every other page. Only the real external link (Give) opens a new one.
114 lines
3.7 KiB
Vue
114 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
// Port of marketing-theme/header.php.
|
|
// Layout: logo + WAGF tagline on the left, primary nav + hamburger toggle
|
|
// on the right, plus a slide-down hamburger overlay for mobile.
|
|
|
|
import { PRIMARY_NAV, SECONDARY_NAV, type NavItem } from '~/utils/nav'
|
|
const researchGallery = useResearchGalleryUrl()
|
|
// Items switched off are not shown; the Research item gets the gallery's URL (in the reader's language).
|
|
const secondaryNav = computed(() => SECONDARY_NAV.filter((i) => !i.off).map((i): NavItem =>
|
|
i.hrefConfig === 'researchGalleryUrl' ? { ...i, href: researchGallery() } : i)
|
|
.filter((i) => i.href || i.to))
|
|
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const { isOpen, close, toggle } = useMobileMenu()
|
|
|
|
// Close the drawer when navigating to a new page.
|
|
const route = useRoute()
|
|
watch(() => route.fullPath, close)
|
|
</script>
|
|
|
|
<template>
|
|
<header id="masthead" class="position-relative">
|
|
<div
|
|
class="hamburger-menu-overlay"
|
|
:data-state="isOpen ? 'open' : 'closed'"
|
|
@click="close"
|
|
/>
|
|
|
|
<nav
|
|
id="hamburger-menu"
|
|
class="hamburger-menu"
|
|
aria-label="Hamburger menu"
|
|
:data-state="isOpen ? 'open' : 'closed'"
|
|
>
|
|
<ul id="secondary-menu" class="role-list stack">
|
|
<li v-for="item in secondaryNav" :key="item.key" class="menu-item">
|
|
<!-- The Research Gallery is this site's own gallery, on its subdomain: it opens in the same tab like
|
|
every other page. Only the external links (Give) open a new tab. -->
|
|
<a
|
|
v-if="item.hrefConfig"
|
|
:href="item.href"
|
|
>
|
|
{{ t(item.key) }}
|
|
</a>
|
|
<a
|
|
v-else-if="item.href"
|
|
:href="item.href"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="with-icon"
|
|
>
|
|
{{ t(item.key) }}
|
|
<ExternalLinkIcon />
|
|
</a>
|
|
<NuxtLink v-else-if="item.to" :to="localePath(item.to)">
|
|
{{ t(item.key) }}
|
|
</NuxtLink>
|
|
</li>
|
|
<LanguageSwitcher />
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="header">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="site-branding">
|
|
<NuxtLink :to="localePath('/')" rel="home">
|
|
<img
|
|
src="/assets/Small Banner/DOXA-small-light-banner.png"
|
|
class="logo"
|
|
alt="Doxa.Life"
|
|
width="250"
|
|
height="auto"
|
|
>
|
|
</NuxtLink>
|
|
<span class="wagf-text">
|
|
{{ t('World Assemblies of God Fellowship') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="header-menu">
|
|
<nav id="site-navigation" class="main-navigation">
|
|
<ul id="primary-menu" class="role-list">
|
|
<li v-for="item in PRIMARY_NAV" :key="item.key" class="menu-item">
|
|
<a v-if="item.href" :href="item.href" :rel="item.rel">
|
|
{{ t(item.key) }}
|
|
</a>
|
|
<NuxtLink v-else-if="item.to" :to="localePath(item.to)">
|
|
{{ t(item.key) }}
|
|
</NuxtLink>
|
|
</li>
|
|
<LanguageSwitcher />
|
|
</ul>
|
|
</nav>
|
|
|
|
<button
|
|
class="mobile-menu-toggle"
|
|
:class="{ open: isOpen }"
|
|
aria-label="Toggle navigation menu"
|
|
:aria-expanded="isOpen"
|
|
@click="toggle"
|
|
>
|
|
<span class="hamburger-line" />
|
|
<span class="hamburger-line" />
|
|
<span class="hamburger-line" />
|
|
<span class="hamburger-line" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|