125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import { menu, close } from "src/assets";
|
|
import { styles } from "src/style";
|
|
import { navLinks } from "src/constans";
|
|
import Link from "next/link";
|
|
import logo2 from "../../src/assets/logo2.png";
|
|
import Image from "next/image";
|
|
|
|
const Navbar = () => {
|
|
const [active, setActive] = useState("");
|
|
const [toggle, setToggle] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollTop = window.scrollY;
|
|
if (scrollTop > 100) {
|
|
setScrolled(true);
|
|
} else {
|
|
setScrolled(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<nav
|
|
className={`sm:px-16 px-6 w-full flex items-center py-5 fixed top-0 z-20 tr03 ${
|
|
scrolled ? "bg-black" : "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="w-full flex justify-between items-center max-w-7xl mx-auto">
|
|
<div className="flex">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2"
|
|
onClick={() => {
|
|
setActive("");
|
|
window.scrollTo(0, 0);
|
|
}}
|
|
>
|
|
<Image
|
|
src={logo2}
|
|
alt="ldsdogo"
|
|
className="w-[120px] object-contain "
|
|
/>{" "}
|
|
</Link>
|
|
<ul className="list-none hidden sm:flex flex-row gap-10 p-3 mx-10">
|
|
{navLinks.map((nav) => (
|
|
<li
|
|
key={nav.id}
|
|
className={`${
|
|
active === nav.title ? "text-white" : "text-white"
|
|
} hover:text-gray-400 text-[19px] font-medium cursor-pointer tr03`}
|
|
onClick={() => setActive(nav.title)}
|
|
>
|
|
<>
|
|
{nav.go ? (
|
|
<Link href={`/${nav.id}`}>{nav.title}</Link>
|
|
) : (
|
|
<a href={`/#${nav.id}`}>{nav.title}</a>
|
|
)}
|
|
</>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<Link href="/login">
|
|
<button className=" btn btn-primary px-10 rounded-full py-2 xs:hidden lg:block">
|
|
Get started
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="sm:hidden flex flex-1 justify-end items-center">
|
|
<Image
|
|
src={toggle ? close : menu}
|
|
alt="menu"
|
|
className="w-[18px] h-[28px] object-contain"
|
|
onClick={() => setToggle(!toggle)}
|
|
/>
|
|
|
|
<div
|
|
className={`${
|
|
!toggle ? "hidden" : "flex"
|
|
} p-6 bg-white absolute top-20 right-5 my-2 min-w-[140px] z-10 rounded-xl`}
|
|
>
|
|
<ul className="list-none flex justify-end items-start flex-1 flex-col gap-4">
|
|
{navLinks.map((nav) => (
|
|
<li
|
|
key={nav.id}
|
|
className={`font-poppins font-medium cursor-pointer text-[16px] ${
|
|
active === nav.title ? "text-white" : "text-secondary"
|
|
}`}
|
|
onClick={() => {
|
|
setToggle(!toggle);
|
|
setActive(nav.title);
|
|
}}
|
|
>
|
|
<>
|
|
{nav.go ? (
|
|
<Link href={`/${nav.id}`}>{nav.title}</Link>
|
|
) : (
|
|
<a href={`/#${nav.id}`}>{nav.title}</a>
|
|
)}
|
|
</>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|