From dedd23dfb1706d60337444d6a360dd9f00fbc23f Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Tue, 3 Jun 2025 17:15:11 +0100
Subject: [PATCH] right click on language switcher

---
 components/header.js                   | 150 ++++++++-----------------
 styles/sass/welshgov/_application.scss |   7 +-
 2 files changed, 52 insertions(+), 105 deletions(-)

diff --git a/components/header.js b/components/header.js
index 970f8408..4d6f02ff 100644
--- a/components/header.js
+++ b/components/header.js
@@ -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 (
         <header
             className="govuk-header "
@@ -115,106 +138,6 @@ const Header = (props) => {
                 </div>
 
                 <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">
                         {hasContactLink.includes(router.pathname) == true ? (
                             <Link
@@ -244,7 +167,30 @@ const Header = (props) => {
                             </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={
                                 Object.keys(router.query).length > 0
                                     ? router.pathname +
@@ -284,7 +230,7 @@ const Header = (props) => {
                         >
                             {" "}
                             {t("common:available-in")}
-                        </Link>
+                        </Link> */}
                     </div>
                 </div>
             </div>
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index b4b69a93..773e064e 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -734,6 +734,7 @@ textarea,
     margin-top: 10px;
     text-align: right;
     margin-right: 0px;
+    cursor: pointer;
 
     @media screen and (max-width: 900px) {
         position: absolute;
@@ -741,7 +742,7 @@ textarea,
         right: -10px;
     }
 
-    a.govuk-header__link {
+    .govuk-header__link {
         background-color: $black;
         padding: 10px 20px;
         font-weight: 700;
@@ -753,9 +754,9 @@ textarea,
         }
     }
 
-    a.govuk-header__link:focus {
+    .govuk-header__link:focus {
         background-color: $black;
-        padding: 10px;
+        padding: 10px 20px;
         color: #fff;
         box-shadow: none;
     }