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

fix: only render currentlang of no other urls are available

Browse Source
This commit is contained in:
Christel Westerberg
2024-06-03 10:29:54 +02:00
parent 095edcce8c
commit c5b2855876
9 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/[lang]/(live)/@languageSwitcher/[...uri]/page.tsx
View File

@@ -15,10 +15,10 @@ export default async function LanguageSwitcher({
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={params.lang} urls={urls} />
<Desktop currentLanguage={params.lang} urlObject={urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={params.lang} urls={urls} />
<Mobile currentLanguage={params.lang} urlObject={urls} />
</section>
</>
)

4
app/[lang]/(live-current)/@languageSwitcher/page.tsx
View File

@@ -20,10 +20,10 @@ export default async function LanguageSwitcher({
return (
<>
<section className={styles.desktop}>
<Desktop currentLanguage={params.lang} urls={urls} />
<Desktop currentLanguage={params.lang} urlObject={urls} />
</section>
<section className={styles.mobile}>
<Mobile currentLanguage={params.lang} urls={urls} />
<Mobile currentLanguage={params.lang} urlObject={urls} />
</section>
</>
)

3
components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
View File

@@ -1,5 +1,6 @@
.container {
position: relative;
font-family:
Helvetica Neue,
Helvetica,
@@ -7,7 +8,7 @@
sans-serif;
}
.toggle {
.languageSwitcher {
display: flex;
color: #fff;
padding: 3px 15px;

25
components/Current/Header/LanguageSwitcher/Desktop/index.tsx
View File

@@ -11,7 +11,7 @@ import type { LanguageSwitcherProps } from "@/types/components/current/languageS
export default function Desktop({
currentLanguage,
urls,
urlObject,
}: LanguageSwitcherProps) {
const [isOpen, setIsOpen] = useState(false)
const divRef = useRef<HTMLDivElement>(null)
@@ -40,11 +40,26 @@ export default function Desktop({
}
}, [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 (
<div className={styles.container} ref={divRef}>
<button
aria-pressed="false"
className={styles.toggle}
className={styles.languageSwitcher}
onClick={toggleOpen}
>
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
@@ -55,15 +70,15 @@ export default function Desktop({
<span className={styles.caret}></span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{Object.keys(urls).map((key) => {
const url = urls[key as Lang]?.url
{urls.map((key) => {
const url = urlObject[key as Lang]?.url
if (url) {
return (
<li
key={key}
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
>
{urls[key as Lang]?.isExternal ? (
{urlObject[key as Lang]?.isExternal ? (
<Link className={styles.link} href={url}>
{languages[key as Lang]}
</Link>

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

@@ -9,19 +9,28 @@ import type { LanguageSwitcherProps } from "@/types/components/current/languageS
export default function Mobile({
currentLanguage,
urls,
urlObject,
}: LanguageSwitcherProps) {
const [isOpen, setIsOpen] = useState(false)
function toggleOpen() {
setIsOpen((prevIsOpen) => !prevIsOpen)
}
const urls = Object.keys(urlObject)
if (urls.length <= 1 && urls[0] === currentLanguage) {
return (
<div className={styles.languageSwitcher}>
{languages[currentLanguage]}{" "}
</div>
)
}
return (
<div>
<button
aria-pressed="false"
className={styles.toggle}
className={styles.languageSwitcher}
onClick={toggleOpen}
>
{languages[currentLanguage]}{" "}
@@ -29,8 +38,8 @@ export default function Mobile({
<span className={styles.hiddenAccessible}>Choose language</span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{Object.keys(urls).map((key) => {
const url = urls[key as Lang]?.url
{urls.map((key) => {
const url = urlObject[key as Lang]?.url
if (url) {
return (
<li key={key} className={styles.li}>

3
components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
View File

@@ -1,4 +1,5 @@
.toggle {
.languageSwitcher {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 5px 0;
display: block;

24
lib/graphql/Query/AccountPage.graphql
View File

@@ -64,29 +64,35 @@ query GetAccountPageRefs($locale: String!, $uid: String!) {
}
query GetDaDeEnUrlsAccountPage($uid: String!) {
de: account_page(uid: $uid, locale: "de") {
url
de: all_account_page(where: { uid: $uid }, locale: "de") {
items {
url
}
}
en: account_page(uid: $uid, locale: "en") {
url
en: all_account_page(where: { uid: $uid }, locale: "en") {
items {
url
}
}
da: account_page(uid: $uid, locale: "da") {
url
da: all_account_page(where: { uid: $uid }, locale: "da") {
items {
url
}
}
}
query GetFiNoSvUrlsAccountPage($uid: String!) {
fi: account_page(uid: $uid, locale: "fi") {
fi: all_account_page(where: { uid: $uid }, locale: "fi") {
items {
url
}
}
no: account_page(uid: $uid, locale: "no") {
no: all_account_page(where: { uid: $uid }, locale: "no") {
items {
url
}
}
sv: account_page(uid: $uid, locale: "sv") {
sv: all_account_page(where: { uid: $uid }, locale: "sv") {
items {
url
}

9
server/routers/contentstack/config/input.ts
View File

@@ -1,9 +0,0 @@
import z from "zod"
import { Lang } from "@/constants/languages"
export const headerInput = z
.object({
lang: z.nativeEnum(Lang),
})
.optional()

2
types/components/current/languageSwitcher.ts
View File

@@ -9,5 +9,5 @@ export type LanguageSwitcherLink = {
export type LanguageSwitcherProps = {
currentLanguage: Lang
urls: LanguageSwitcherData
urlObject: LanguageSwitcherData
}