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

Langswitcher as parallel instead of Header. Using promise.all and added some Suspenses

Browse Source
This commit is contained in:
Linus Flood
2024-09-11 19:59:25 +02:00
parent e61fa91644
commit 1d9a8f9e70
15 changed files with 144 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/MyPages/Breadcrumbs/index.tsx
View File

@@ -1,3 +1,5 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
@@ -16,44 +18,46 @@ export default async function Breadcrumbs() {
return (
<nav className={styles.breadcrumbs}>
<ul className={styles.list}>
{homeBreadcrumb ? (
<li className={styles.listItem}>
<Link
className={styles.homeLink}
color="peach80"
href={homeBreadcrumb.href!}
variant="breadcrumb"
>
<HouseIcon color="peach80" />
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
) : null}
<Suspense>
{homeBreadcrumb ? (
<li className={styles.listItem}>
<Link
className={styles.homeLink}
color="peach80"
href={homeBreadcrumb.href!}
variant="breadcrumb"
>
<HouseIcon color="peach80" />
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
) : null}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title}
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
)
}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
<Footnote color="burgundy" textTransform="bold">
{breadcrumb.title}
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</Footnote>
</li>
)
}
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Footnote color="burgundy" textTransform="bold">
{breadcrumb.title}
</Footnote>
</li>
)
})}
})}
</Suspense>
</ul>
</nav>
)

79
components/MyPages/Sidebar/index.tsx
View File

@@ -1,4 +1,4 @@
import { Fragment } from "react"
import { Fragment, Suspense } from "react"
import { logout } from "@/constants/routes/handleAuth"
import { serverClient } from "@/lib/trpc/server"
@@ -14,46 +14,49 @@ import styles from "./sidebar.module.css"
export default async function SidebarMyPages() {
const navigation = await serverClient().contentstack.myPages.navigation.get()
const { formatMessage } = await getIntl()
if (!navigation) {
return null
}
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Subtitle type="two">{navigation.title}</Subtitle>
{navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="beige" />
<ul className={styles.list}>
{menuItem.links.map((link) => (
<li key={link.uid}>
<Link
color="burgundy"
href={link.originalUrl || link.url}
partialMatch
size={menuItem.display_sign_out_link ? "small" : "regular"}
variant="sidebar"
>
{link.linkText}
</Link>
</li>
))}
{menuItem.display_sign_out_link ? (
<li>
<Link
color="burgundy"
href={logout[getLang()]}
prefetch={false}
size="small"
variant="sidebar"
>
{formatMessage({ id: "Log out" })}
</Link>
</li>
) : null}
</ul>
</Fragment>
))}
<Subtitle type="two">{navigation?.title}</Subtitle>
<Suspense>
{navigation?.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="beige" />
<ul className={styles.list}>
{menuItem.links.map((link) => (
<li key={link.uid}>
<Link
color="burgundy"
href={link.originalUrl || link.url}
partialMatch
prefetch={true}
size={
menuItem.display_sign_out_link ? "small" : "regular"
}
variant="sidebar"
>
{link.linkText}
</Link>
</li>
))}
{menuItem.display_sign_out_link ? (
<li>
<Link
color="burgundy"
href={logout[getLang()]}
prefetch={false}
size="small"
variant="sidebar"
>
{formatMessage({ id: "Log out" })}
</Link>
</li>
) : null}
</ul>
</Fragment>
))}
</Suspense>
</nav>
</aside>
)