import React, { useEffect, useState } from "react";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
<link
href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.css"
rel="stylesheet"
/>;
/**
* Represents the Navbar component.
* @interface
*/
function Navbar() {
/**
* State to manage the current path.
* @type {string}
* @default " "
* @name path
* @memberOf Navbar
*/
const [path, setPath] = useState(" ");
/**
* Retrieves the current location using the `useLocation` hook from react-router-dom.
* @type {Object}
* @name location
* @memberOf Navbar
*/
const location = useLocation();
/**
* State to manage the body scroll position.
* @type {number}
* @default 0
* @name bodyScrollPosition
* @memberOf Navbar
*/
const [bodyScrollPosition, setBodyScrollPosition] = useState(0);
/**
* Adds a scroll event listener to track the scroll position.
*/
useEffect(() => {
const handleScroll = () => {
const scrollHeight = window.scrollY;
setBodyScrollPosition(scrollHeight);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
/**
* Updates the path based on the scroll position.
*/
useEffect(() => {
if (bodyScrollPosition >= 0) {
setPath("");
}
let aboutPosition = document
.getElementById("about")
?.getBoundingClientRect()?.top;
let projectsPosition = document
.getElementById("projects")
?.getBoundingClientRect()?.top;
let investmentPosition = document
.getElementById("investment-portfolio")
?.getBoundingClientRect()?.top;
let eventsPosition = document
.getElementById("public_events")
?.getBoundingClientRect()?.top;
let newsPosition = document
.getElementById("news")
?.getBoundingClientRect()?.top;
let contactPosition = document
.getElementById("contact")
?.getBoundingClientRect()?.top;
if (
!aboutPosition &&
!projectsPosition &&
!investmentPosition &&
!eventsPosition &&
!newsPosition &&
!contactPosition
) {
return;
} else {
// console.log(investmentPosition);
if (aboutPosition <= 250 && aboutPosition >= -1010) {
setPath("#about");
}
if (projectsPosition <= 150 && projectsPosition >= -2808.75) {
setPath("#projects");
}
if (investmentPosition <= 200 && investmentPosition >= -772.71) {
setPath("#investment-portfolio");
}
if (eventsPosition <= 220 && eventsPosition >= -333) {
setPath("#public_events");
}
if (newsPosition <= 260 && newsPosition >= -333) {
setPath("#news");
}
if (contactPosition <= 300) {
setPath("#contact");
}
}
}, [bodyScrollPosition]);
useEffect(() => {
setPath(location.hash);
}, [location]);
/**
* State to manage whether to show the scroll arrow.
* @type {boolean}
* @default false
* @name showScroll
* @memberOf Navbar
*/
const [showScroll, setShowScroll] = useState(false);
/**
* Checks the scroll position and updates `showScroll` state.
*/
const checkScrollTop = () => {
if (!showScroll && window.pageYOffset > 400) {
setShowScroll(true);
} else if (showScroll && window.pageYOffset <= 400) {
setShowScroll(false);
}
};
window.addEventListener("scroll", checkScrollTop);
return (
<div
className={
!showScroll
? "header"
: " fixed top-0 left-0 w-100 z-50 backdrop-blur-sm bg-white/30"
}
>
<nav className="nav flex flex-wrap items-center justify-between px-4 container sticky top-0 z-50">
<div className="flex flex-no-shrink items-center mr-6 py-3 text-grey-darkest logo">
<a href="/">
<img src="/psmsLogo.png" alt="PSMS" />
</a>
</div>
<input className="menu-btn hidden" type="checkbox" id="menu-btn" />
<label
className="menu-icon block cursor-pointer lg:hidden px-2 py-4 relative select-none"
htmlFor="menu-btn"
>
<span className="navicon bg-grey-darkest flex items-center relative"></span>
</label>
<ul className="menu border-b md:border-none flex justify-end list-reset m-0 w-full md:w-auto">
<li className="px-4 py-3">
<a href="#" className={!path ? "active font-[600]" : "font-[600]"}>
Home
</a>
</li>
<li className="px-4 py-3">
<a
href="#about"
className={path === "#about" ? "active font-[600]" : "font-[600]"}
>
About Us
</a>
</li>
<li className="px-4 py-3">
<a
href="#projects"
className={
path === "#projects" ? "active font-[600]" : "font-[600]"
}
>
Projects
</a>
</li>
<li className="px-4 py-3">
<a
href="#investment-portfolio"
className={
path === "#investment-portfolio"
? "active font-[600]"
: "font-[600]"
}
>
Investments
</a>
</li>
<li className="px-4 py-3">
<a
href="#public_events"
className={
path === "#public_events" ? "active font-[600]" : "font-[600]"
}
>
Events
</a>
</li>
<li className="px-4 py-3">
<a
href="#news"
className={path === "#news" ? "active font-[600]" : "font-[600]"}
>
News
</a>
</li>
<li className="px-4 py-3">
<a
href="#contact"
className={
path === "#contact" ? "active font-[600]" : "font-[600]"
}
>
Contact
</a>
</li>
<li className="py-2 px-3">
{/* <a href="https://myshare.rkdholdings.com.np/portal-login/" target="_blank" className="rounded relative d-inline-flex group items-center justify-center px-3.5 py-2
cursor-pointer border-2 active:border-[#6eccaf] active:shadow-none shadow-lg border-[#6eccaf] text-[#6eccaf]">
<span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
<span className="relative d-flex font-[600]"> Login </span>
</a> */}
<NavLink
to="/login"
className="rounded relative d-inline-flex group items-center justify-center px-3.5 py-2
cursor-pointer border-2 active:border-[#6eccaf] active:shadow-none shadow-lg border-[#6eccaf] text-[#6eccaf]"
>
<span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
<span className="relative d-flex font-[600]"> Login </span>
</NavLink>
</li>
<li className="py-2 ">
<a
href="/signup"
className="rounded relative d-inline-flex group items-center justify-center px-3.5 py-2
cursor-pointer border-b-4 border-l-2 active:border-[6eccaf] active:shadow-none shadow-lg bg-gradient-to-tr from-[#6eccaf] to-[#86ddc1] border-[#58e3b7] text-white"
>
<span className="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
<span className="relative d-flex font-[600]"> Sign up </span>
</a>
</li>
</ul>
</nav>
</div>
);
}
export default Navbar;
Source