web-humas-fe/components/page/menu-link.tsx

"use client";
import React from "react";
import styles from "./menuLinks.module.css";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface MenuLinksProps {
  item: {
    // icon: JSX.Element;
    title: string;
    path: any;
  };
}

const MenuLinks: React.FC<MenuLinksProps> = ({ item }) => {
  const pathname = usePathname();

  console.log(pathname);

  return (
    <Link
      href={item.path}
      className={`flex items-center gap-2  hover:bg-slate-400 dark:hover:bg-[#2e374a] p-2 rounded-md ${
        pathname === item.path ? "bg-slate-300 dark:bg-[#2e374a]" : ""
      }`}
    >
      {/* {item.icon} */}
      {item.title}
    </Link>
  );
};

export default MenuLinks;