50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client';
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import Jefes from "../../../public/jefes_logo.jpg";
|
|
import { usePathname } from "next/navigation";
|
|
import classnames from 'classnames';
|
|
|
|
const NavBar = () => {
|
|
const currentPath = usePathname();
|
|
console.log(currentPath);
|
|
|
|
// Create an array to hold the list items
|
|
const links = [
|
|
{ label: "Home", href: "/home" },
|
|
{ label: "Menu", href: "/menu" },
|
|
{ label: "AboutUs", href: "/about-us" },
|
|
{ label: "Contact", href: "/contact"},
|
|
{ label: "Dashboard", href: "/dashboard" },
|
|
{ label: "Users", href: "/users" },
|
|
{ label: "Issues", href: "/issues" },
|
|
];
|
|
|
|
return (
|
|
<nav className="flex gap-4 border-b mb-5 px-5 h-14 items-center">
|
|
<Link href="/">
|
|
<Image src={Jefes} width={50} height={50} alt="Logo" />
|
|
</Link>
|
|
<ul className="flex gap-4 hover:cursor-pointer">
|
|
{links.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
|
|
// replace with classnames object instead
|
|
className={classnames({
|
|
'text-emerald-400': link.href === currentPath,
|
|
'text-white' : link.href !== currentPath,
|
|
'hover:text-zinc-500': true,
|
|
})}
|
|
href={link.href}>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|