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 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | 10x 3x | import React from 'react'
import propTypes from 'prop-types'
import Link from 'next/link'
import Sidenav from './Sidenav'
export default function Header(props) {
return (
<>
<nav
role="navigation"
aria-label={props.t.skipToMainContent}
className="absolute w-px h-px -left-96 focus-within:w-screen focus-within:h-auto focus-within:top-4 focus-within:z-50 focus-within:flex focus-within:justify-center"
>
<a
id="skipToMainContent"
className="bg-blue-800 text-white px-2 focus:outline-black-solid hover:bg-gray-dark"
href="#mainContent"
draggable="false"
>
{props.t.skipToMainContent}
</a>
</nav>
<header className="mb-10">
<div className="container mx-auto px-6 flex-col flex md:flex md:flex-row justify-between pt-6">
<div className="flex flex-row justify-between items-center lg:mt-7">
<a href={props.t.gocLink}>
<img
className="h-5 w-auto xs:h-6 sm:h-7"
src={
props.language === 'en'
? '/sig-blk-en.svg'
: '/sig-blk-fr.svg'
}
alt={
props.language === 'en'
? 'Government of Canada'
: 'Gouvernement du Canada'
}
/>
</a>
{/* Language selector for small screens */}
<Link
key={props.language}
href={props.langToggleLink || '/'}
locale={props.language === 'en' ? 'fr' : 'en'}
>
<a
className="block md:hidden md:text-sm ml-6 pb-2 sm:ml-16 underline font-body font-bold text-[#284162] text-base hover:text-[#0535d2]"
// onClick={() => setLanguage(language)}
lang={props.language === 'en' ? 'fr' : 'en'}
>
{props.language === 'en' ? 'FR' : 'EN'}
</a>
</Link>
</div>
<div className="flex-col flex">
{/* Language selector for mid to larger screens */}
<Link
key={props.language}
href={props.langToggleLink || '/'}
locale={props.language === 'en' ? 'fr' : 'en'}
>
<a
className="md:block hidden pb-0 lg:pb-4 self-end underline font-body text-[#284162] hover:text-[#0535d2] "
data-cy="toggle-language-link"
// onClick={() => setLanguage(language)}
lang={props.language === 'en' ? 'fr' : 'en'}
>
{props.language === 'en' ? 'Français' : 'English'}
</a>
</Link>
{/* Placeholder for SearchBar in case is back in ver 4??? */}
{/* <SearchBar /> */}
</div>
</div>
{/* Border */}
<div className="relative mb-2 border-t pb-2 mt-4">
<div className="absolute top-0 left-0">
<Sidenav t={props.t} />
</div>
</div>
{/* <Menu
loginText={props.t.login}
items={[
{
link: '/search',
text: props.t.serviceAndBenefits,
},
{
link: '/',
text: props.t.tools,
},
{
link: '/',
text: props.t.contactUs,
},
]}
/> */}
{/* Place Holder for the breadcrumbs
<div className="layout-container my-2">
<Breadcrumb items={breadcrumbItems} />
</div>
*/}
<div className="flex justify-center">
<Link href={props.locale === 'fr' ? 'fr/home' : '/home'}>
<a>
<img
className="h-20"
src="/Header-noborder.png"
alt="Digital Dojo Logo / Logo du Dojo numérique"
/>
</a>
</Link>
</div>
</header>
</>
)
}
/* istanbul ignore next */
export async function getStaticProps({ locale }) {
return {
props: { locale },
}
}
Header.propTypes = {
// Title of the page
title: propTypes.string,
/**
* 'current' language used to display language links
*/
language: propTypes.string,
/**
* Translated text
*/
t: propTypes.object,
/**
* Link to change locals
*/
langToggleLink: propTypes.string,
/**
* Array of Items for the breadcrumb
*/
// breadcrumbItems: propTypes.arrayOf(
// propTypes.shape({
// /**
// * Text for the breadcrumb
// */
// text: propTypes.string,
// /**
// * Link for the breadcrumb
// */
// link: propTypes.string,
// })
// ),
}
|