refactor: Extract Sidebar Link to component

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>
                   )
                 })