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

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

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-02-20 15:58:53 +01:00
parent 9e56ff158d
commit 7417abc814
28 changed files with 355 additions and 1377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/Current/Header/LanguageSwitcher/Desktop.tsx
View File

@@ -1,37 +0,0 @@
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Desktop({
currentLanguage,
links,
}: LanguageSwitcherProps) {
return (
<div className="dropdown-container navbar-language-selector ">
<button
className="navbar-language-selector__toggler"
data-js="dropdown-toggler"
aria-pressed="false"
>
<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="dropdown-menu">
{links.map((link) => (
<li
className={currentLanguage === link.title ? "active" : undefined}
key={link.href}
>
<a href={link.href}>{link.title}</a>
</li>
))}
</ul>
</div>
)
}

45
components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css Normal file
View File

@@ -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;
}

82
components/Current/Header/LanguageSwitcher/Desktop/index.tsx Normal file
View File

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

31
components/Current/Header/LanguageSwitcher/Mobile.tsx
View File

@@ -1,31 +0,0 @@
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Mobile({
currentLanguage,
links,
}: LanguageSwitcherProps) {
return (
<div className="navbar-language-selector">
<button
className="navbar-language-selector__toggler "
data-js="collapsible-toggler"
data-target="language-menu"
aria-pressed="false"
>
{currentLanguage}{" "}
<span className="navbar-language-selector__toggler__arrow"></span>
<span className="hidden--accessible">Choose language</span>
</button>
<ul className="is-collapsed" data-collapsable="language-menu">
{links.map((link) => (
<li
className={`navbar-language-selector__item ${currentLanguage === link.title ? "is-active" : ""}`}
key={link.href}
>
<a href={link.href}>{link.title}</a>
</li>
))}
</ul>
</div>
)
}

55
components/Current/Header/LanguageSwitcher/Mobile/index.tsx Normal file
View File

@@ -0,0 +1,55 @@
"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>
<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>
)
}

31
components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css Normal file
View File

@@ -0,0 +1,31 @@
.dropdown {
display: none;
}
.dropdown.isOpen {
display: block;
}
.arrow {
background-image: url("/Static/img/icons/arrows/arrow-down-grey.png");
background-position: 50%;
background-repeat: no-repeat;
display: inline-block;
margin-left: 5px;
padding: 5px 10px;
}
.arrow.open {
background-image: url("/Static/img/icons/arrows/arrow-up-grey.png");
}
.link {
color: grey;
display: block;
text-transform: capitalize;
}
.link:hover {
color: #7f7369;
text-decoration: none;
}