fix: only render currentlang of no other urls are available
This commit is contained in:
@@ -15,10 +15,10 @@ export default async function LanguageSwitcher({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className={styles.desktop}>
|
<section className={styles.desktop}>
|
||||||
<Desktop currentLanguage={params.lang} urls={urls} />
|
<Desktop currentLanguage={params.lang} urlObject={urls} />
|
||||||
</section>
|
</section>
|
||||||
<section className={styles.mobile}>
|
<section className={styles.mobile}>
|
||||||
<Mobile currentLanguage={params.lang} urls={urls} />
|
<Mobile currentLanguage={params.lang} urlObject={urls} />
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,10 +20,10 @@ export default async function LanguageSwitcher({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className={styles.desktop}>
|
<section className={styles.desktop}>
|
||||||
<Desktop currentLanguage={params.lang} urls={urls} />
|
<Desktop currentLanguage={params.lang} urlObject={urls} />
|
||||||
</section>
|
</section>
|
||||||
<section className={styles.mobile}>
|
<section className={styles.mobile}>
|
||||||
<Mobile currentLanguage={params.lang} urls={urls} />
|
<Mobile currentLanguage={params.lang} urlObject={urls} />
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
font-family:
|
font-family:
|
||||||
Helvetica Neue,
|
Helvetica Neue,
|
||||||
Helvetica,
|
Helvetica,
|
||||||
@@ -7,7 +8,7 @@
|
|||||||
sans-serif;
|
sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle {
|
.languageSwitcher {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 3px 15px;
|
padding: 3px 15px;
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import type { LanguageSwitcherProps } from "@/types/components/current/languageS
|
|||||||
|
|
||||||
export default function Desktop({
|
export default function Desktop({
|
||||||
currentLanguage,
|
currentLanguage,
|
||||||
urls,
|
urlObject,
|
||||||
}: LanguageSwitcherProps) {
|
}: LanguageSwitcherProps) {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
const divRef = useRef<HTMLDivElement>(null)
|
const divRef = useRef<HTMLDivElement>(null)
|
||||||
@@ -40,11 +40,26 @@ export default function Desktop({
|
|||||||
}
|
}
|
||||||
}, [close])
|
}, [close])
|
||||||
|
|
||||||
|
const urls = Object.keys(urlObject)
|
||||||
|
|
||||||
|
if (urls.length <= 1 && urls[0] === currentLanguage) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container} ref={divRef}>
|
||||||
|
<section className={styles.languageSwitcher}>
|
||||||
|
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
|
||||||
|
<use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
|
||||||
|
</svg>
|
||||||
|
{languages[currentLanguage]}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container} ref={divRef}>
|
<div className={styles.container} ref={divRef}>
|
||||||
<button
|
<button
|
||||||
aria-pressed="false"
|
aria-pressed="false"
|
||||||
className={styles.toggle}
|
className={styles.languageSwitcher}
|
||||||
onClick={toggleOpen}
|
onClick={toggleOpen}
|
||||||
>
|
>
|
||||||
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
|
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
|
||||||
@@ -55,15 +70,15 @@ export default function Desktop({
|
|||||||
<span className={styles.caret}></span>
|
<span className={styles.caret}></span>
|
||||||
</button>
|
</button>
|
||||||
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
||||||
{Object.keys(urls).map((key) => {
|
{urls.map((key) => {
|
||||||
const url = urls[key as Lang]?.url
|
const url = urlObject[key as Lang]?.url
|
||||||
if (url) {
|
if (url) {
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={key}
|
key={key}
|
||||||
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
|
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
|
||||||
>
|
>
|
||||||
{urls[key as Lang]?.isExternal ? (
|
{urlObject[key as Lang]?.isExternal ? (
|
||||||
<Link className={styles.link} href={url}>
|
<Link className={styles.link} href={url}>
|
||||||
{languages[key as Lang]}
|
{languages[key as Lang]}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -9,19 +9,28 @@ import type { LanguageSwitcherProps } from "@/types/components/current/languageS
|
|||||||
|
|
||||||
export default function Mobile({
|
export default function Mobile({
|
||||||
currentLanguage,
|
currentLanguage,
|
||||||
urls,
|
urlObject,
|
||||||
}: LanguageSwitcherProps) {
|
}: LanguageSwitcherProps) {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
function toggleOpen() {
|
function toggleOpen() {
|
||||||
setIsOpen((prevIsOpen) => !prevIsOpen)
|
setIsOpen((prevIsOpen) => !prevIsOpen)
|
||||||
}
|
}
|
||||||
|
const urls = Object.keys(urlObject)
|
||||||
|
|
||||||
|
if (urls.length <= 1 && urls[0] === currentLanguage) {
|
||||||
|
return (
|
||||||
|
<div className={styles.languageSwitcher}>
|
||||||
|
{languages[currentLanguage]}{" "}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
aria-pressed="false"
|
aria-pressed="false"
|
||||||
className={styles.toggle}
|
className={styles.languageSwitcher}
|
||||||
onClick={toggleOpen}
|
onClick={toggleOpen}
|
||||||
>
|
>
|
||||||
{languages[currentLanguage]}{" "}
|
{languages[currentLanguage]}{" "}
|
||||||
@@ -29,8 +38,8 @@ export default function Mobile({
|
|||||||
<span className={styles.hiddenAccessible}>Choose language</span>
|
<span className={styles.hiddenAccessible}>Choose language</span>
|
||||||
</button>
|
</button>
|
||||||
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
|
||||||
{Object.keys(urls).map((key) => {
|
{urls.map((key) => {
|
||||||
const url = urls[key as Lang]?.url
|
const url = urlObject[key as Lang]?.url
|
||||||
if (url) {
|
if (url) {
|
||||||
return (
|
return (
|
||||||
<li key={key} className={styles.li}>
|
<li key={key} className={styles.li}>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
.toggle {
|
.languageSwitcher {
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -64,29 +64,35 @@ query GetAccountPageRefs($locale: String!, $uid: String!) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
query GetDaDeEnUrlsAccountPage($uid: String!) {
|
query GetDaDeEnUrlsAccountPage($uid: String!) {
|
||||||
de: account_page(uid: $uid, locale: "de") {
|
de: all_account_page(where: { uid: $uid }, locale: "de") {
|
||||||
url
|
items {
|
||||||
|
url
|
||||||
|
}
|
||||||
}
|
}
|
||||||
en: account_page(uid: $uid, locale: "en") {
|
en: all_account_page(where: { uid: $uid }, locale: "en") {
|
||||||
url
|
items {
|
||||||
|
url
|
||||||
|
}
|
||||||
}
|
}
|
||||||
da: account_page(uid: $uid, locale: "da") {
|
da: all_account_page(where: { uid: $uid }, locale: "da") {
|
||||||
url
|
items {
|
||||||
|
url
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
query GetFiNoSvUrlsAccountPage($uid: String!) {
|
query GetFiNoSvUrlsAccountPage($uid: String!) {
|
||||||
fi: account_page(uid: $uid, locale: "fi") {
|
fi: all_account_page(where: { uid: $uid }, locale: "fi") {
|
||||||
items {
|
items {
|
||||||
url
|
url
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
no: account_page(uid: $uid, locale: "no") {
|
no: all_account_page(where: { uid: $uid }, locale: "no") {
|
||||||
items {
|
items {
|
||||||
url
|
url
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
sv: account_page(uid: $uid, locale: "sv") {
|
sv: all_account_page(where: { uid: $uid }, locale: "sv") {
|
||||||
items {
|
items {
|
||||||
url
|
url
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
import z from "zod"
|
|
||||||
|
|
||||||
import { Lang } from "@/constants/languages"
|
|
||||||
|
|
||||||
export const headerInput = z
|
|
||||||
.object({
|
|
||||||
lang: z.nativeEnum(Lang),
|
|
||||||
})
|
|
||||||
.optional()
|
|
||||||
@@ -9,5 +9,5 @@ export type LanguageSwitcherLink = {
|
|||||||
|
|
||||||
export type LanguageSwitcherProps = {
|
export type LanguageSwitcherProps = {
|
||||||
currentLanguage: Lang
|
currentLanguage: Lang
|
||||||
urls: LanguageSwitcherData
|
urlObject: LanguageSwitcherData
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user