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

components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css

@@ -0,0 +1,45 @@
+.dropdown {
+  background-clip: padding-box;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  display: none;
+  float: left;
+  font-size: 1rem;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 11;
+}
+
+.dropdown.isOpen {
+  display: block;
+}
+
+.link {
+  clear: both;
+  color: grey;
+  display: block;
+  font-weight: 400;
+  padding: 3px 20px;
+  white-space: nowrap;
+}
+
+.link:hover {
+  background-color: #f5f5f5;
+  color: #737373;
+  text-decoration: none;
+}
+
+.active>.link {
+  background-color: #00838e;
+  color: #fff;
+  outline: 0;
+  text-decoration: none;
+}

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { useEffect, useRef, useState } from "react"
+
+import { languages } from "@/constants/languages"
+
+import styles from "./desktop.module.css"
+
+import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
+
+export default function Desktop({
+  currentLanguage,
+  urls,
+}: LanguageSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const divRef = useRef<HTMLDivElement>(null)
+
+  function toggleOpen() {
+    setIsOpen(prevIsOpen => !prevIsOpen)
+  }
+
+  function close() {
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (divRef.current && target && !divRef.current.contains(target)) {
+        close()
+      }
+    }
+
+    if (divRef.current) {
+      document.addEventListener('click', handleClickOutside, false)
+    }
+    return () => {
+      document.removeEventListener('click', handleClickOutside, false)
+    }
+  }, [close])
+
+  return (
+    <div className="dropdown-container navbar-language-selector " ref={divRef}>
+      <button
+        aria-pressed="false"
+        className="navbar-language-selector__toggler"
+        data-js="dropdown-toggler"
+        onClick={toggleOpen}
+      >
+        <svg
+          focusable="false"
+          className="icon icon--xs icon--white"
+          viewBox="0 0 32 32"
+        >
+          <use xlinkHref="/Static/img/icons/sprites.svg#icon-globe"></use>
+        </svg>
+        {currentLanguage}
+        <span className="hidden--accessible">Choose language</span>
+        <span className="caret"></span>
+      </button>
+      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+        <li className={currentLanguage === languages.en ? styles.active : undefined}>
+          <a className={styles.link} href={urls.en?.url}>{languages.en}</a>
+        </li>
+        <li className={currentLanguage === languages.sv ? styles.active : undefined}>
+          <a className={styles.link} href={urls.sv?.url}>{languages.sv}</a>
+        </li>
+        <li className={currentLanguage === languages.no ? styles.active : undefined}>
+          <a className={styles.link} href={urls.no?.url}>{languages.no}</a>
+        </li>
+        <li className={currentLanguage === languages.da ? styles.active : undefined}>
+          <a className={styles.link} href="https://www.scandichotels.dk/">{languages.da}</a>
+        </li>
+        <li className={currentLanguage === languages.fi ? styles.active : undefined}>
+          <a className={styles.link} href={urls.fi?.url}>{languages.fi}</a>
+        </li>
+        <li className={currentLanguage === languages.de ? styles.active : undefined}>
+          <a className={styles.link} href={urls.de?.url}>{languages.de}</a>
+        </li>
+      </ul>
+    </div>
+  )
+}