33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Logo from "@/image/logo.png";
|
||
|
|
import { ListIcon } from "@phosphor-icons/react/dist/ssr";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
export default function Navbar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
const menu = [
|
||
|
|
{ label: "About Us", url: "/" },
|
||
|
|
{ label: "Services", url: "/" },
|
||
|
|
{ label: "Portfolio", url: "/portfolio" },
|
||
|
|
{ label: "Process", url: "/" },
|
||
|
|
{ label: "Kontak", url: "/" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white px-4 py-6 flex items-center w-full justify-between md:py-5.5 md:px-16">
|
||
|
|
<Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
|
||
|
|
<ListIcon className="size-8 text-secondary-400 cursor-pointer md:hidden" />
|
||
|
|
<div className="md:flex gap-7.5 hidden">
|
||
|
|
{menu?.map((item) => (
|
||
|
|
<Link href={item?.url} key={item?.label}>
|
||
|
|
<div className={`font-medium ${pathname === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|