"use client"; import { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { useTheme } from "../Contexts/ThemeContext"; import { SunIcon, MoonIcon, Menu, X } from "lucide-react"; interface NavigationBarProps { activeSection: string; } const NavigationBar: React.FC = ({ activeSection }) => { const { theme, toggleTheme } = useTheme(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const navItems = [ { id: "home", label: "Home" }, { id: "about", label: "About" }, { id: "skills", label: "Skills" }, { id: "experience", label: "Experience" }, { id: "projects", label: "Projects" }, { id: "education", label: "Education" }, { id: "contact", label: "Contact" }, ]; useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const scrollToSection = (sectionId: string) => { setIsMobileMenuOpen(false); const element = document.getElementById(sectionId); if (element) { window.scrollTo({ top: element.offsetTop - 80, behavior: "smooth", }); } }; return (
{ e.preventDefault(); scrollToSection("home"); }} >
Logo Youssef
{/* Desktop Menu */}
{navItems.map((item) => ( { e.preventDefault(); scrollToSection(item.id); }} > {item.label} {activeSection === item.id && ( )} ))} {theme === "dark" ? ( ) : ( )}
{/* Mobile Menu Button */}
{theme === "dark" ? ( ) : ( )} setIsMobileMenuOpen(!isMobileMenuOpen)} > {isMobileMenuOpen ? ( ) : ( )}
{/* Mobile Menu */} {isMobileMenuOpen && (
{navItems.map((item) => ( { e.preventDefault(); scrollToSection(item.id); }} > {item.label} ))}
)}
); }; export default NavigationBar;