57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
"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>
|
|
{/* 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>
|
|
</div>
|
|
)
|
|
}
|