fix: update design of header

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

@@ -1,7 +1,7 @@
 "use client"
 import { useState } from "react"
 
-import { languages } from "@/constants/languages"
+import { Lang, languages } from "@/constants/languages"
 
 import styles from "./mobile.module.css"
 
@@ -14,42 +14,33 @@ export default function Mobile({
   const [isOpen, setIsOpen] = useState(false)
 
   function toggleOpen() {
-    setIsOpen(prevIsOpen => !prevIsOpen)
+    setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
   return (
-    <div className="navbar-language-selector">
+    <div>
       <button
         aria-pressed="false"
-        className="navbar-language-selector__toggler "
-        data-js="collapsible-toggler"
-        data-target="language-menu"
+        className={styles.toggle}
         onClick={toggleOpen}
       >
-        {currentLanguage}{" "}
+        {languages[currentLanguage]}{" "}
         <span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
-        <span className="hidden--accessible">Choose language</span>
+        <span className={styles.hiddenAccessible}>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>
-        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
-        <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 className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+        {Object.keys(urls).map((key) => {
+          const url = urls[key as Lang]?.url
+          if (url) {
+            return (
+              <li key={key} className={styles.li}>
+                <a href={url} className={styles.link}>
+                  {languages[key as Lang]}
+                </a>
+              </li>
+            )
+          }
+        })}
       </ul>
     </div>
   )

components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css

@@ -1,3 +1,35 @@
+.toggle {
+  font-size: 14px;
+  padding: 5px 0;
+  display: block;
+  border: none;
+  background-color: transparent;
+  margin: 0 auto;
+  color: #333;
+}
+
+.hiddenAccessible {
+  display: block;
+  position: absolute;
+  left: -100000em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.li {
+  list-style: none;
+  font-size: 14px;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.link {
+  color: #333;
+  text-decoration: none;
+  line-height: 22.4px;
+}
+
 .dropdown {
   display: none;
 }