robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

right click on language switcher

Browse Source
This commit is contained in:
robbond
2025-06-03 17:15:11 +01:00
parent 1220131cfd
commit dedd23dfb1
2 changed files with 52 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/header.js
+48 -102
View File
@@ -93,6 +93,29 @@ const Header = (props) => {
}); });
}; };
const switchLocale = locale === "en" ? "cy" : "en";
const handleLocaleSwitch = () => {
// Set cookie
setCookie(null, "pedw_locale", switchLocale, {
path: "/",
maxAge: 60 * 60 * 24 * 365,
});
// Rebuild URL with query parameters
const queryString =
Object.keys(router.query).length > 0
? "?" +
Object.entries(router.query)
.map(([key, value]) => `${key}=${value}`)
.join("&")
: "";
router.push(router.pathname + queryString, undefined, {
locale: switchLocale,
});
};
return ( return (
<header <header
className="govuk-header " className="govuk-header "
@@ -115,106 +138,6 @@ const Header = (props) => {
</div> </div>
<div className="languageSwitch"> <div className="languageSwitch">
{/* <div className="mobileNav">
<div className="mobileMenu">
<input
type="radio"
id="mobileMenu-1"
name="mobileMenu-group-1"
/>
<label htmlFor="mobileMenu-1">
{t("common:mobile-nav-label")} <i>▼</i>
</label>
<div className="mobileMenu close-mobileMenu">
<input
type="radio"
id="mobileMenu-close"
name="mobileMenu-group-1"
/>
<label htmlFor="mobileMenu-close">
{t("common:mobile-nav-label")} <i>▲</i>
</label>
</div>
<div className="content">
<ul>
{hasContactLink.includes(router.pathname) ==
true ? (
<li>
<Link href="/dns/contact-us">
<a className="govuk-header__link ">
Contact
</a>
</Link>
</li>
) : (
""
)}
{noSignoutLink.includes(router.pathname) ==
true ? (
""
) : (
<li>
<a
href={
router.locale == "cy"
? "/allgofnodi"
: "/logout"
}
onClick={() => {
setLogout(),
window.localStorage.clear();
}}
className="govuk-header__link "
>
{t("common:signout-label")}
</a>
</li>
)}
<li>
<Link
href={
locale == "en"
? router.query.q != null
? router.pathname +
"?q=" +
router.query.q
: router.pathname
: router.query.q != null
? process.env.I18N_DOMAIN +
"/" +
router.asPath +
"?q=" +
router.query.q
: router.asPath
}
locale={
locale == "en" ? "cy" : "en"
}
className="govuk-header__link "
lang={locale == "en" ? "cy" : "en"}
hrefLang={
locale == "en" ? "cy" : "en"
}
data-journey-click={
locale == "en"
? "link - click:lang-select:Cymraeg"
: "link - click:lang-select:English"
}
aria-label={
locale == "en"
? "Dewiswch Cymraeg"
: "Select English"
}
>
{" "}
{t("common:available-in")}
</Link>
</li>
</ul>
</div>
</div>
</div> */}
<div className="fullNavs"> <div className="fullNavs">
{hasContactLink.includes(router.pathname) == true ? ( {hasContactLink.includes(router.pathname) == true ? (
<Link <Link
@@ -244,7 +167,30 @@ const Header = (props) => {
</Link> </Link>
)} )}
<Link <span
onClick={handleLocaleSwitch}
className="govuk-header__link"
lang={switchLocale}
hrefLang={switchLocale}
role="link"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter") handleLocaleSwitch();
}}
data-journey-click={
locale === "en"
? "link - click:lang-select:Cymraeg"
: "link - click:lang-select:English"
}
aria-label={
locale === "en"
? "Dewiswch Cymraeg"
: "Select English"
}
>
{t("common:available-in")}
</span>
{/* <Link
href={ href={
Object.keys(router.query).length > 0 Object.keys(router.query).length > 0
? router.pathname + ? router.pathname +
@@ -284,7 +230,7 @@ const Header = (props) => {
> >
{" "} {" "}
{t("common:available-in")} {t("common:available-in")}
</Link> </Link> */}
</div> </div>
</div> </div>
</div> </div>
styles/sass/welshgov/_application.scss
+4 -3
View File
@@ -734,6 +734,7 @@ textarea,
margin-top: 10px; margin-top: 10px;
text-align: right; text-align: right;
margin-right: 0px; margin-right: 0px;
cursor: pointer;
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
position: absolute; position: absolute;
@@ -741,7 +742,7 @@ textarea,
right: -10px; right: -10px;
} }
a.govuk-header__link { .govuk-header__link {
background-color: $black; background-color: $black;
padding: 10px 20px; padding: 10px 20px;
font-weight: 700; font-weight: 700;
@@ -753,9 +754,9 @@ textarea,
} }
} }
a.govuk-header__link:focus { .govuk-header__link:focus {
background-color: $black; background-color: $black;
padding: 10px; padding: 10px 20px;
color: #fff; color: #fff;
box-shadow: none; box-shadow: none;
} }