fix: add logic for Link active styles

components/MyPages/Sidebar/index.tsx

@@ -1,20 +1,27 @@
+"use client"
 import { LogOut } from "react-feather"
 import Link from "next/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}>
-        {/* <Link className={`${styles.link} ${styles.active}`} href="#">
-          My Scandic
-        </Link> */}
-        {/* Base styles.active on menuItem href and current path */}
         {menuItems.map((item) => (
-          <>
+          <Fragment key={item.uid}>
-            <Link key={item.uid} className={styles.link} href={item.url}>
+            <Link
+              className={`${styles.link} ${currentPageSlug === item.url ? styles.active : ""}`}
+              href={item.url}
+            >
               {item.linkText || item.title}
             </Link>
             {item.subItems
@@ -22,7 +29,7 @@ export default function Sidebar({ menuItems }: SidebarProps) {
                   return (
                     <Link
                       key={subItem.uid}
-                      className={styles.link}
+                      className={`${styles.link} ${currentPageSlug === subItem.url ? styles.active : ""}`}
                       href={subItem.url}
                     >
                       {subItem.linkText || subItem.title}
@@ -30,7 +37,7 @@ export default function Sidebar({ menuItems }: SidebarProps) {
                   )
                 })
               : null}
-          </>
+          </Fragment>
         ))}
 
         <Link className={styles.link} href="/api/auth/signout">