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

30 lines
713 B
TypeScript

'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