diff --git a/.gitignore b/.gitignore index a1704ca..e20387b 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.* +package-lock.json .yarn/* !.yarn/patches !.yarn/plugins diff --git a/src/components/common/navbar/index.tsx b/src/components/common/navbar/index.tsx index f3c8a4d..3d88696 100644 --- a/src/components/common/navbar/index.tsx +++ b/src/components/common/navbar/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import Image from "next/image"; import NextLink from "next/link"; // Use NextLink for external and hash links +import { useRouter } from "next/navigation"; import { trackGAEvent } from "@/utils/analytics"; import { AnimatePresence, motion } from "framer-motion"; import { Github, Linkedin, Menu, X, Youtube } from "lucide-react"; @@ -20,10 +21,22 @@ const Navbar = () => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [hoveredIcon, setHoveredIcon] = useState(null); // State for the icon hover + const [activeSection, setActiveSection] = useState(false); + const router = useRouter(); const pathname = usePathname(); const t = useTranslations("Navbar"); + const handleCoreTeamClick = () => { + setActiveSection(true); + if (pathname === "/") { + const el = document.getElementById("core-team"); + if (el) el.scrollIntoView({ behavior: "smooth" }); + } else { + router.push("/#core-team"); + } + }; + const links = [ { href: "/", label: t("home"), external: false, isHashLink: false }, { href: "/#core-team", label: t("core_team"), external: false, isHashLink: true }, @@ -49,6 +62,10 @@ const Navbar = () => { setOpen(false); }, [pathname]); + useEffect(() => { + if (pathname !== "/") setActiveSection(false); + }, [pathname]); + return (
{ // Use NextLink for external or hash links, use localized Link otherwise const LinkComponent = l.external || l.isHashLink ? NextLink : Link; - return ( + return l.isHashLink ? ( + + ) : ( { rel={l.external ? "noopener noreferrer" : undefined} className={cn( "rounded-md px-3 py-2 text-sm font-medium transition-colors", - // Style hash link normally, active style based on path match - l.isHashLink - ? "text-slate-300 hover:text-white" - : active - ? "text-sky-300" - : "text-slate-300 hover:text-white" + active ? "text-sky-300" : "text-slate-300 hover:text-white" )} + onClick={l.href === "/" ? () => setActiveSection(false) : undefined} > {l.label} @@ -268,19 +292,32 @@ const Navbar = () => { checkPath === "/" ? pathname === checkPath : pathname.startsWith(checkPath); const LinkComponent = l.external || l.isHashLink ? NextLink : Link; - return ( + return l.isHashLink ? ( + + ) : ( setActiveSection(false)} className={cn( "rounded-md px-3 py-2 text-sm font-medium transition-colors", - l.isHashLink - ? "text-slate-300 hover:bg-white/5 hover:text-white" - : active - ? "bg-white/5 text-sky-300" - : "text-slate-300 hover:bg-white/5 hover:text-white" + active && !activeSection + ? "bg-white/5 text-sky-300" + : "text-slate-300 hover:bg-white/5 hover:text-white" )} > {l.label}