refactor: Extract Sidebar Link to component

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -30,16 +30,11 @@ function getURL(node: PageLink) {
 function mapMenuItems(navigationItems: NavigationItem[]) {
   return navigationItems.map(({ item }): MenuItem => {
     const { node } = item.pageConnection.edges[0]
-    const {
-      title,
-      system: { uid },
-    } = node
 
     return {
-      title,
-      uid,
+      uid: node.system.uid,
       url: getURL(node),
-      linkText: item.link_text,
+      linkText: item.link_text || node.title,
       subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
     }
   })

components/MyPages/Sidebar/index.tsx

@@ -1,38 +1,29 @@
 "use client"
 import { LogOut } from "react-feather"
-import Link from "next/link"
+import Link from "../../TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
 import { SidebarProps } from "@/types/requests/myPages/navigation"
-import { usePathname } from "next/navigation"
 import { Fragment } from "react"
 
 export default function Sidebar({ menuItems }: SidebarProps) {
-  const currentPageSlug = `/${usePathname()
-    .split("/")
-    .filter((v) => v)
-    .at(-1)}`
-
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         {menuItems.map((item) => (
           <Fragment key={item.uid}>
-            <Link
-              className={`${styles.link} ${currentPageSlug === item.url ? styles.active : ""}`}
-              href={item.url}
-            >
-              {item.linkText || item.title}
+            <Link variant={"sidebar"} href={item.url}>
+              {item.linkText}
             </Link>
             {item.subItems
               ? item.subItems.map((subItem) => {
                   return (
                     <Link
                       key={subItem.uid}
-                      className={`${styles.link} ${currentPageSlug === subItem.url ? styles.active : ""}`}
                       href={subItem.url}
+                      variant={"sidebar"}
                     >
-                      {subItem.linkText || subItem.title}
+                      {subItem.linkText}
                     </Link>
                   )
                 })

components/TempDesignSystem/Link/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { linkVariants } from "./variants"
+
+import NextLink from "next/link"
+
+import type { LinkProps } from "./link"
+import { usePathname } from "next/navigation"
+
+export default function Link({
+  className,
+  href,
+  size,
+  variant,
+  ...props
+}: LinkProps) {
+  const currentPageSlug = `/${usePathname()
+    .split("/")
+    .filter((v) => v)
+    .at(-1)}`
+  const isActive = currentPageSlug === href
+  const classNames = linkVariants({
+    active: isActive,
+    className,
+    size,
+    variant,
+  })
+  return <NextLink className={classNames} href={href} {...props} />
+}

components/TempDesignSystem/Link/link.module.css

@@ -0,0 +1,31 @@
+.link {
+  text-decoration: none;
+}
+
+.default {
+  font-family: var(--ff-fira-sans);
+}
+
+.sidebar {
+  align-items: center;
+  color: var(--some-text-color, #111);
+  display: flex;
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.9rem;
+  position: relative;
+}
+
+.activeSidebar {
+  font-weight: 600;
+}
+
+.activeSidebar::before {
+  bottom: -0.4rem;
+  background-color: var(--some-text-color, #000);
+  content: "";
+  height: 0.2rem;
+  position: absolute;
+  width: 100%;
+}

components/TempDesignSystem/Link/link.ts

@@ -0,0 +1,9 @@
+import { linkVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  href: string
+}

components/TempDesignSystem/Link/variants.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./link.module.css"
+
+export const linkVariants = cva(styles.link, {
+  variants: {
+    active: {
+      true: styles.active,
+    },
+    size: {},
+    variant: {
+      default: styles.default,
+      sidebar: styles.sidebar,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+  compoundVariants: [
+    {
+      class: styles.activeSidebar,
+      active: true,
+      variant: "sidebar",
+    },
+  ],
+})

types/requests/myPages/navigation.ts

@@ -11,7 +11,6 @@ export enum PageLinkEnum {
 
 export type MenuItem = {
   uid: string
-  title: string
   linkText: string
   subItems: MenuItem[] | null
   url: string