scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update design of header

Browse Source
This commit is contained in:
Christel Westerberg
2024-05-27 16:43:56 +02:00
parent a83bdb21fe
commit da70b29359
11 changed files with 301 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/Current/Header/LanguageSwitcher/Mobile/index.tsx
View File

@@ -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>
)