Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 2x 3x 3x 3x 3x 3x 3x 3x 3x | import { useTranslation } from 'next-i18next'
import getConfig from 'next/config'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import ApplicationNameBar from './ApplicationNameBar'
import Banner from './Banner'
export interface HeaderProps {
gocLink: string
skipToMainText: string
}
const Header = ({ gocLink, skipToMainText }: HeaderProps) => {
const config = getConfig()
const { locale, asPath } = useRouter()
const { t } = useTranslation('common')
const langSelectorLocale = locale === 'en' ? 'fr' : 'en'
const langSelectorAbbreviation = langSelectorLocale === 'fr' ? 'FR' : 'EN'
const langSelectorText = langSelectorLocale === 'fr' ? 'Français' : 'English'
const showBanner = config?.publicRuntimeConfig?.environment !== 'prod'
return (
<>
<nav
role="navigation"
aria-labelledby="skipToMainContent"
className="absolute -left-96 h-px w-px focus-within:top-4 focus-within:z-50 focus-within:flex focus-within:h-auto focus-within:w-screen focus-within:justify-center"
>
<a
id="skipToMainContent"
className="border border-blue-dark bg-blue-dark px-2 font-body font-bold text-white hover:bg-basic-darkgray focus:text-white focus:ring-2 focus:ring-inset focus:ring-orange-dark focus:ring-offset-2"
href="#main-header"
draggable="false"
>
{skipToMainText}
</a>
</nav>
<header>
{showBanner && (
<Banner
alert={t('banner.alert')}
description={t('banner.description')}
/>
)}
<div className="container mx-auto flex flex-col justify-between px-4 py-2.5 md:flex md:flex-row">
<div className="flex flex-row content-center items-center justify-between md:mt-7">
<a href={gocLink}>
<Image
key={locale}
className="h-7 w-auto lg:h-8"
alt={
locale === 'en'
? 'Government of Canada'
: 'Gouvernement du Canada'
}
src={locale === 'en' ? '/sig-blk-en.svg' : '/sig-blk-fr.svg'}
width={300}
height={28}
priority
/>
<span className="sr-only">
/{' '}
<span lang={locale === 'en' ? 'fr' : 'en'}>
{locale === 'en'
? 'Gouvernement du Canada'
: 'Government of Canada'}
</span>
</span>
</a>
{/* Language selector for small screens */}
<Link
href={asPath}
locale={langSelectorLocale}
replace
className={`ml-6 block cursor-help pb-2 font-body text-base font-bold text-[#284162] underline decoration-dotted hover:text-[#0535d2] sm:ml-16 md:hidden md:text-sm`}
lang={langSelectorLocale}
>
<abbr title={langSelectorText}>{langSelectorAbbreviation}</abbr>
</Link>
</div>
<div className="flex flex-col">
{/* Language selector for mid to larger screens */}
<Link
href={asPath}
locale={langSelectorLocale}
replace
className="hidden self-end pb-0 font-body text-[#284162] underline hover:text-[#0535d2] md:block lg:pb-4"
data-cy="toggle-language-link"
lang={langSelectorLocale}
>
{langSelectorText}
</Link>
{/* Placeholder for SearchBar in case is back in ver 4??? */}
{/* <SearchBar /> */}
</div>
</div>
<ApplicationNameBar
text={t('application-name-bar')}
href="/expectations"
/>
{/* <Menu
loginText={t('login')}
items={[
{
link: '/search',
text: t('service-and-benefits'),
},
{
link: '/',
text: t('tools'),
},
{
link: '/',
text: t('contact-us'),
},
]}
/> */}
{/* Place Holder for the breadcrumbs
<div className="layout-container my-2">
<Breadcrumb items={breadcrumbItems} />
</div>
*/}
</header>
</>
)
}
export default Header
|