50 lines
2.7 KiB
Plaintext
50 lines
2.7 KiB
Plaintext
---
|
|
import Button from './Button.astro';
|
|
import LanguageSwitcher from './LanguageSwitcher.astro';
|
|
import MainNav from './MainNav.astro';
|
|
import MobileNav from './MobileNav.astro';
|
|
import { fallbackLabel, resolveNavigationDestination, type VisitorLocale, type VisitorPublication } from '../utils/visitor-navigation';
|
|
interface Props { lang?: VisitorLocale; publication: VisitorPublication; manifest: VisitorPublication[]; }
|
|
const { lang = 'en', publication, manifest } = Astro.props;
|
|
const homeTarget = resolveNavigationDestination(lang === 'en' ? '/' : `/${lang}`, lang, manifest)
|
|
?? resolveNavigationDestination('/', lang, manifest);
|
|
const tourTarget = resolveNavigationDestination('/tour', lang, manifest);
|
|
const utility = lang === 'es'
|
|
? { credit: 'Solicitar CareCredit', bill: 'Pagar mi factura' }
|
|
: { credit: 'Apply Care Credit', bill: 'Pay My Bill' };
|
|
---
|
|
<header class="site-header">
|
|
<div class="utility-bar">
|
|
<div class="container utility-inner">
|
|
<a href="https://go.carecredit.com/consumer/providersearch">{utility.credit}</a>
|
|
<a href="https://www.patientnotebook.com/abaclinic/Enhanced/SendMoney/MakePayment">{utility.bill}</a>
|
|
</div>
|
|
</div>
|
|
<div class="container header-inner">
|
|
{homeTarget ? <a class="brand" href={homeTarget.href} lang={homeTarget.fallback ? homeTarget.lang : undefined} hreflang={homeTarget.fallback ? homeTarget.lang : undefined}>
|
|
<img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" />
|
|
</a> : <span class="brand"><img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" /></span>}
|
|
<MainNav lang={lang} manifest={manifest} />
|
|
<MobileNav lang={lang} manifest={manifest} />
|
|
<LanguageSwitcher publication={publication} manifest={manifest} />
|
|
{tourTarget && <Button href={tourTarget.href} size="small">Tour AIA{tourTarget.fallback && ` (${fallbackLabel(tourTarget.lang)})`}</Button>}
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.utility-bar { background: var(--color-primary); color: white; font-size: .85rem; }
|
|
.utility-inner { align-items: center; display: flex; gap: var(--space-md); justify-content: flex-end; min-height: 38px; }
|
|
.utility-bar a { color: white; text-decoration: none; }
|
|
.site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
|
|
.header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
|
|
.brand img { width: 150px; }
|
|
@media (max-width: 950px) {
|
|
.header-inner > :global(.content-button) { display: none; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.utility-inner { justify-content: center; }
|
|
.header-inner { min-height: 88px; }
|
|
.header-inner .lang-switcher { margin-left: auto; }
|
|
}
|
|
</style>
|