feat: breadcrumbs for My Pages

components/MyPages/Breadcrumbs/Breadcrumb.tsx

@@ -0,0 +1,9 @@
+import styles from "./breadcrumbs.module.css"
+
+export default function Breadcrumb({ children }: React.PropsWithChildren) {
+  return (
+    <li className={styles.listItem}>
+      <p className={styles.currentPage}>{children}</p>
+    </li>
+  )
+}

components/MyPages/Breadcrumbs/BreadcrumbWithLink.tsx

@@ -0,0 +1,17 @@
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+export default function BreadcrumbsWithLink({
+  children,
+  href,
+}: React.PropsWithChildren<{ href: string }>) {
+  return (
+    <li className={styles.listItem}>
+      <Link className={styles.link} href={href}>
+        {children}
+      </Link>
+      <span aria-hidden="true">/</span>
+    </li>
+  )
+}

components/MyPages/Breadcrumbs/Client.tsx

@@ -1,49 +0,0 @@
-"use client"
-import { Fragment } from "react"
-import { usePathname } from "next/navigation"
-
-import Link from "@/components/TempDesignSystem/Link"
-
-import styles from "./breadcrumbs.module.css"
-
-import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
-
-export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
-  const pathname = usePathname()
-  /** Temp solution until we can get breadcrumbs from CS */
-  const path = pathname.replace(`/${lang}`, '')
-  const currentBreadcrumbs = breadcrumbs?.[path]
-  if (!currentBreadcrumbs?.length) {
-    return null
-  }
-
-  return (
-    <>
-      <li className={styles.listItem}>
-        <span>/</span>
-      </li>
-      {currentBreadcrumbs.map(breadcrumb => {
-        if (breadcrumb.href) {
-          return (
-            <Fragment key={breadcrumb.title}>
-              <li className={styles.listItem}>
-                <Link className={styles.link} href={breadcrumb.href}>
-                  {breadcrumb.title}
-                </Link>
-              </li>
-              <li className={styles.listItem}>
-                <span>/</span>
-              </li>
-            </Fragment>
-          )
-        }
-
-        return (
-          <li className={styles.listItem} key={breadcrumb.title}>
-            <p className={styles.currentPage}>{breadcrumb.title}</p>
-          </li>
-        )
-      })}
-    </>
-  )
-}

components/MyPages/Breadcrumbs/breadcrumbs.module.css

@@ -27,6 +27,11 @@
   line-height: 1.56rem;
 }
 
+.listItem {
+  display: flex;
+  gap: 0.4rem;
+}
+
 .currentPage {
   margin: 0;
 }
@@ -37,4 +42,4 @@
     padding-left: 2.4rem;
     padding-top: 2rem;
   }
-}
+}

components/MyPages/Breadcrumbs/index.tsx

@@ -1,20 +1,31 @@
-import ClientBreadcrumbs from "./Client"
-import Link from "@/components/TempDesignSystem/Link"
+import { _ } from "@/lib/translation"
+
+import Breadcrumb from "./Breadcrumb"
+import BreadcrumbsWithLink from "./BreadcrumbWithLink"
 
 import styles from "./breadcrumbs.module.css"
 
 import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
 
-export default function Breadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
-        <li className={styles.listItem}>
-          <Link className={styles.link} href="#">
-            Home
-          </Link>
-        </li>
-        <ClientBreadcrumbs breadcrumbs={breadcrumbs} lang={lang} />
+        <BreadcrumbsWithLink href="#">{_("Home")}</BreadcrumbsWithLink>
+        {breadcrumbs.map((breadcrumb) => {
+          if (breadcrumb.href) {
+            return (
+              <BreadcrumbsWithLink
+                key={breadcrumb.title}
+                href={breadcrumb.href}
+              >
+                {breadcrumb.title}
+              </BreadcrumbsWithLink>
+            )
+          }
+
+          return <Breadcrumb>{breadcrumb.title}</Breadcrumb>
+        })}
       </ul>
     </nav>
   )

components/MyPages/Sidebar/helpers.ts

@@ -24,7 +24,7 @@ export function mapMenuItems(navigationItems: NavigationItem[]) {
       lang: node.system.locale,
       subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
       uid: node.system.uid,
-      url: `/${node.system.locale}/${getURL(node)}`.replaceAll("//+", "/"),
+      url: `/${node.system.locale}/${getURL(node)}`.replaceAll(/\/\/+/g, "/"),
     }
   })
 }

components/MyPages/Sidebar/index.tsx

@@ -30,21 +30,22 @@ export default async function Sidebar({ lang }: SidebarProps) {
         </Title>
         {menuItems.map((item) => (
           <Fragment key={item.uid}>
-            <Link href={item.url} variant="sidebar">
+            <Link href={item.url} partialMatch variant="sidebar">
               {item.linkText}
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
-                  return (
-                    <Link
-                      key={subItem.uid}
-                      href={subItem.url}
-                      variant="sidebar"
-                    >
-                      {subItem.linkText}
-                    </Link>
-                  )
-                })
+                return (
+                  <Link
+                    key={subItem.uid}
+                    href={subItem.url}
+                    partialMatch
+                    variant="sidebar"
+                  >
+                    {subItem.linkText}
+                  </Link>
+                )
+              })
               : null}
           </Fragment>
         ))}

components/TempDesignSystem/Link/index.tsx

@@ -10,12 +10,16 @@ import type { LinkProps } from "./link"
 export default function Link({
   className,
   href,
+  partialMatch = false,
   size,
   variant,
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
-  const isActive = currentPageSlug === href
+  let isActive = currentPageSlug === href
+  if (partialMatch && !isActive) {
+    isActive = currentPageSlug.startsWith(href)
+  }
   const classNames = linkVariants({
     active: isActive,
     className,

components/TempDesignSystem/Link/link.ts

@@ -4,6 +4,7 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  VariantProps<typeof linkVariants> {
+    VariantProps<typeof linkVariants> {
   href: string
+  partialMatch?: boolean
 }