120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
"use client"
|
|
import { useCallback, 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)
|
|
}
|
|
|
|
const close = useCallback(() => {
|
|
setIsOpen(false)
|
|
}, [setIsOpen])
|
|
|
|
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>
|
|
{/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
|
|
<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>
|
|
)
|
|
}
|