feat(WEB-102): language-switcher per page basis

2024-02-20 15:58:53 +01:00
parent 9e56ff158d
commit 7417abc814
28 changed files with 355 additions and 1377 deletions
@@ -0,0 +1,55 @@
+"use client"
+import { useState } from "react"
+
+import { languages } from "@/constants/languages"
+
+import styles from "./mobile.module.css"
+
+import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
+
+export default function Mobile({
+  currentLanguage,
+  urls,
+}: LanguageSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  function toggleOpen() {
+    setIsOpen(prevIsOpen => !prevIsOpen)
+  }
+
+  return (
+    <div className="navbar-language-selector">
+      <button
+        aria-pressed="false"
+        className="navbar-language-selector__toggler "
+        data-js="collapsible-toggler"
+        data-target="language-menu"
+        onClick={toggleOpen}
+      >
+        {currentLanguage}{" "}
+        <span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
+        <span className="hidden--accessible">Choose language</span>
+      </button>
+      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`} data-collapsable="language-menu">
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.en ? "is-active" : ""}`}>
+          <a href={urls.en?.url}>{languages.en}</a>
+        </li>
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.sv ? "is-active" : ""}`}>
+          <a href={urls.sv?.url}>{languages.sv}</a>
+        </li>
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
+          <a href={urls.no?.url}>{languages.no}</a>
+        </li>
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.da ? "is-active" : ""}`}>
+          <a href="https://www.scandichotels.dk/">{languages.da}</a>
+        </li>
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.fi ? "is-active" : ""}`}>
+          <a href={urls.fi?.url}>{languages.fi}</a>
+        </li>
+        <li className={`navbar-language-selector__item ${currentLanguage === languages.de ? "is-active" : ""}`}>
+          <a href={urls.de?.url}>{languages.de}</a>
+        </li>
+      </ul>
+    </div>
+  )
+}
@@ -0,0 +1,31 @@
+.dropdown {
+  display: none;
+}
+
+.dropdown.isOpen {
+  display: block;
+}
+
+.arrow {
+  background-image: url("/Static/img/icons/arrows/arrow-down-grey.png");
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: inline-block;
+  margin-left: 5px;
+  padding: 5px 10px;
+}
+
+.arrow.open {
+  background-image: url("/Static/img/icons/arrows/arrow-up-grey.png");
+}
+
+.link {
+  color: grey;
+  display: block;
+  text-transform: capitalize;
+}
+
+.link:hover {
+  color: #7f7369;
+  text-decoration: none;
+}