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 | 5x | interface TopNavProps {
lang: string
skipToMainPath: string
skipToAboutPath: string
switchToBasicPath: string
displayAlternateLink: boolean
}
export const TopNav = ({
lang = 'en',
skipToMainPath = '/',
skipToAboutPath = '/',
switchToBasicPath = 'mscaPlaceholderHref',
displayAlternateLink = false,
}: TopNavProps) => {
return (
<>
{/* Top navigation accessible only when using a keyboard to navigate the page */}
<nav role="navigation" aria-label="topNavigation">
<ul id="TopNavLinks" className="z-10">
<li className="absolute left-0 top-2 -z-50 box-border w-full text-center focus-within:z-50">
<a
className="p-1 font-bold text-white focus:bg-blue-primary"
href={skipToMainPath}
>
{lang === 'fr'
? 'Passer au contenu principal'
: 'Skip to main content'}
</a>
</li>
<li className="absolute left-0 top-2 -z-50 box-border w-full text-center focus-within:z-50">
<a
className="p-1 font-bold text-white focus:bg-blue-primary"
href={skipToAboutPath}
>
{lang === 'fr'
? 'Passer à « Au sujet du gouvernement »'
: "Skip to 'About government'"}
</a>
</li>
{displayAlternateLink ? (
<li className="absolute left-0 top-2 -z-50 box-border w-full text-center focus-within:z-50">
<a
className="p-1 font-bold text-white focus:bg-blue-primary"
href={switchToBasicPath}
rel="alternate"
>
{lang === 'fr'
? 'Passer à la version HTML simplifiée'
: 'Switch to basic HTML version'}
</a>
</li>
) : (
''
)}
</ul>
</nav>
</>
)
}
|