@bikeshkit/react-navbar-component/dist/Navbar.js

A responsive React Navbar component with social icons

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { FaGithub, FaLinkedin, FaBars, FaTimes } from "react-icons/fa";
export default function Navbar({ name, githubUrl, linkedinUrl, onNavigate, }) {
    const [navOpen, setNavOpen] = useState(false);
    const handleNavClick = (id) => {
        setNavOpen(false);
        onNavigate(id);
    };
    return (_jsxs("nav", { className: "fixed top-0 left-0 right-0 z-50 bg-white bg-opacity-90 backdrop-blur-sm border-b border-gray-200 shadow-sm transition-colors duration-500", style: { backdropFilter: "saturate(180%) blur(8px)" }, children: [_jsxs("div", { className: "max-w-7xl mx-auto flex items-center justify-between px-6 py-4", children: [_jsx("div", { className: "text-gray-900 font-extrabold text-2xl cursor-pointer select-none tracking-wide transition hover:text-pink-600 hover:scale-105", onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), tabIndex: 0, onKeyDown: (e) => {
                            if (e.key === "Enter")
                                window.scrollTo({ top: 0, behavior: "smooth" });
                        }, "aria-label": "Scroll to top", children: name }), _jsxs("ul", { className: "hidden md:flex space-x-10 text-gray-700 font-medium text-lg", children: [["projects", "skills", "services", "contact"].map((section) => (_jsx("li", { className: "relative cursor-pointer after:absolute after:-bottom-1 after:left-0 after:w-0 after:h-[2px] after:bg-pink-600 after:rounded after:transition-[width] after:duration-300 hover:after:w-full hover:text-pink-600", onClick: () => handleNavClick(section), tabIndex: 0, onKeyDown: (e) => {
                                    if (e.key === "Enter")
                                        handleNavClick(section);
                                }, role: "button", "aria-label": `Navigate to ${section}`, children: section.charAt(0).toUpperCase() + section.slice(1) }, section))), _jsx("li", { children: _jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "flex items-center justify-center p-2 rounded hover:text-pink-600 transition-transform duration-300 hover:scale-110", children: _jsx(FaGithub, { className: "text-xl" }) }) }), _jsx("li", { children: _jsx("a", { href: linkedinUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "LinkedIn", className: "flex items-center justify-center p-2 rounded hover:text-pink-600 transition-transform duration-300 hover:scale-110", children: _jsx(FaLinkedin, { className: "text-xl" }) }) })] }), _jsx("button", { onClick: () => setNavOpen(!navOpen), className: "md:hidden text-gray-700 text-3xl focus:outline-none focus:ring-2 focus:ring-pink-400 rounded p-1 hover:bg-pink-200 hover:text-pink-700 transition-colors duration-300", "aria-label": "Toggle menu", "aria-expanded": navOpen, children: navOpen ? _jsx(FaTimes, {}) : _jsx(FaBars, {}) })] }), _jsx("div", { className: `md:hidden fixed top-[56px] right-4 left-4 bg-white bg-opacity-95 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 ${navOpen
                    ? "scale-100 opacity-100 pointer-events-auto"
                    : "scale-95 opacity-0 pointer-events-none"}`, style: { backdropFilter: "saturate(180%) blur(12px)" }, children: _jsxs("ul", { className: "flex flex-col px-6 py-6 space-y-6 text-gray-700 font-semibold text-lg tracking-wide select-none", children: [["projects", "skills", "services", "contact"].map((section) => (_jsx("li", { className: "cursor-pointer hover:text-pink-600 transition duration-300 ease-in-out", onClick: () => handleNavClick(section), tabIndex: 0, onKeyDown: (e) => {
                                if (e.key === "Enter")
                                    handleNavClick(section);
                            }, role: "button", "aria-label": `Navigate to ${section}`, children: section.charAt(0).toUpperCase() + section.slice(1) }, section))), _jsx("li", { children: _jsxs("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub", className: "hover:text-pink-600 transition flex items-center gap-3 font-semibold", children: [_jsx(FaGithub, { className: "text-xl" }), " GitHub"] }) }), _jsx("li", { children: _jsxs("a", { href: linkedinUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "LinkedIn", className: "hover:text-pink-600 transition flex items-center gap-3 font-semibold", children: [_jsx(FaLinkedin, { className: "text-xl" }), " LinkedIn"] }) })] }) })] }));
}