Skip to content

navbar component #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ishanraj953 wants to merge 3 commits into from
Closed

navbar component #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bdf4889
navbar component
ishanraj953 Feb 20, 2026
769a5c8
Merge branch 'main' into navbar
ishanraj953 Feb 22, 2026
6184064
Merge branch 'main' into navbar
ishanraj953 Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 50 additions & 103 deletions Frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { Menu, X } from "lucide-react";
import ThemeToggle from "./ThemeToggle";
Expand Down Expand Up @@ -64,38 +64,45 @@ export default function Navbar({
}) {
const { token } = useSelector((state) => state.auth);
const navigate = useNavigate();
const location = useLocation();

const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [scrollY, setScrollY] = useState(0);

const styles = NAV_TONES[tone] || NAV_TONES.light;
const links = useMemo(() => buildLinks(isLanding), [isLanding]);

useEffect(() => {
if (variant !== "simple") {
return undefined;
}
if (variant !== "simple") return;
const handleScroll = () => setScrollY(window.scrollY);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, [variant]);

const closeMobileMenu = () => {
setMobileMenuOpen(false);
};
const closeMobileMenu = () => setMobileMenuOpen(false);

const handleSectionClick = (event, sectionId) => {
if (onSectionClick) {
onSectionClick(event, sectionId);
if (onSectionClick) onSectionClick(event, sectionId);
closeMobileMenu();
};

const handleHomeClick = () => {
if (location.pathname === "/") {
window.scrollTo({ top: 0, behavior: "smooth" });
} else {
navigate("/");
}
closeMobileMenu();
};

if (variant === "simple") {
return (
<nav
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrollY > 20
? "bg-skin-primary/95 backdrop-blur-xl shadow-lg shadow-black/5"
: "bg-transparent"
}`}
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrollY > 20
? "bg-skin-primary/95 backdrop-blur-xl shadow-lg shadow-black/5"
: "bg-transparent"
}`}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16 sm:h-20">
Expand All @@ -104,7 +111,6 @@ export default function Navbar({
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center ">
<img src={logo} alt="logo" />

Copilot AI Feb 20, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable 'logo' is used but never imported or defined in this component. This will cause a runtime error when the Navbar is rendered with variant="simple" (as used in FAQ.jsx). You need to add an import statement at the top of the file, such as: import logo from "../assets/intervyologo.png"

Copilot uses AI. Check for mistakes.
</div>

</div>
<div>
<span className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
Expand All @@ -124,10 +130,22 @@ export default function Navbar({
return (
<nav className={styles.nav}>
<div className="px-4 md:px-8 py-4 flex items-center justify-between">
<Link to="/" className="text-xl md:text-2xl font-bold">
<span className={styles.logoPrimary}>Interv</span>
<span className={styles.logoSecondary}>yo</span>
</Link>

<div className="flex items-center gap-6">
<Link to="/" className="text-xl md:text-2xl font-bold">
<span className={styles.logoPrimary}>Interv</span>
<span className={styles.logoSecondary}>yo</span>
</Link>

<Home
size={20}
className="cursor-pointer"
onClick={handleHomeClick}
/>
</div>
</nav>
);
}

<div className="hidden lg:flex items-center gap-8">
{links.map((link) => {
Expand Down Expand Up @@ -175,16 +193,10 @@ export default function Navbar({
) : (
showAuthButtons && (
<>
<Link
to="/login"
className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-sm"
>
<Link to="/login" className="px-4 py-2 bg-black text-white rounded-lg">
Sign In
</Link>
<Link
to="/register"
className="px-4 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-sm"
>
<Link to="/register" className="px-4 py-2 bg-emerald-500 text-white rounded-lg">
Get Started
</Link>
</>
Expand All @@ -195,98 +207,33 @@ export default function Navbar({
<button
onClick={() => setMobileMenuOpen((open) => !open)}
className={`lg:hidden p-2 rounded-lg transition-colors ${styles.menuButton}`}
aria-label="Toggle menu"
>
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>

{mobileMenuOpen && (
<div
className={`lg:hidden absolute top-full left-0 right-0 mt-2 mx-2 overflow-hidden ${styles.mobileMenu}`}
>
<div className={`lg:hidden absolute top-full left-0 right-0 mt-2 mx-2 overflow-hidden ${styles.mobileMenu}`}>
<div className="p-6 space-y-4">
{links.map((link) => {
const isActive = activeKey === link.key;
const className = `block font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors ${
styles.mobileLink
}${isActive ? ` ${styles.activeMobile}` : ""}`;

if (link.isSection) {
return (
<a
key={link.key}
href={link.href}
onClick={
onSectionClick
? (event) => handleSectionClick(event, link.href)
: closeMobileMenu
}
className={className}
>
{link.label}
</a>
);
}

return (
<Link
{links.map((link) =>
link.isSection ? (
<a
key={link.key}
to={link.to}
href={link.href}
onClick={closeMobileMenu}
className={className}
className="block"
>
{link.label}
</a>
) : (
<Link key={link.key} to={link.to} onClick={closeMobileMenu} className="block">
{link.label}
</Link>
);
})}

{showThemeToggle && (
<div className="flex items-center justify-between py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors">
<span className="text-gray-600 font-medium">Theme</span>
<ThemeToggle />
</div>
)}

{(showDashboardButton || showAuthButtons) && (
<div className="pt-4 border-t border-gray-200 space-y-3">
{token ? (
showDashboardButton && (
<button
onClick={() => {
navigate("/dashboard");
closeMobileMenu();
}}
className="w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all"
>
Dashboard
</button>
)
) : (
showAuthButtons && (
<>
<Link
to="/login"
onClick={closeMobileMenu}
className="block w-full px-6 py-3 bg-black text-white rounded-lg hover:bg-gray-800 font-semibold shadow-lg transition-all text-center"
>
Sign In
</Link>
<Link
to="/register"
onClick={closeMobileMenu}
className="block w-full px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 font-semibold shadow-lg transition-all text-center"
>
Get Started
</Link>
</>
)
)}
</div>
)
)}
</div>
</div>
)}
</nav>
);
}
}
5 changes: 3 additions & 2 deletions Frontend/src/pages/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
import { Link, useNavigate } from "react-router-dom";
import React, { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useNavigate, Link } from "react-router-dom";
import { useSelector } from "react-redux";
import { motion, useInView, useAnimation } from "framer-motion";
import {
Expand All @@ -22,7 +23,6 @@ import {
Lightbulb,
Star,
} from "lucide-react";
import { useState } from "react";
import Navbar from "../components/Navbar";
import Lenis from "@studio-freight/lenis";

Expand Down Expand Up @@ -190,7 +190,8 @@ export default function AboutUs() {

return (
<div className="bg-skin-primary text-skin-primary transition-colors duration-300">

<Navbar tone="skin" activeKey="about" showThemeToggle />

{/* Hero Section */}
<section className="pt-40 pb-20 px-6 relative overflow-hidden bg-skin-secondary text-skin-primary transition-colors duration-300">
<div
Expand Down
5 changes: 4 additions & 1 deletion Frontend/src/pages/ContactUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import Navbar from "../components/Navbar";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import { submitContactForm } from "../services/operations/contactAPI";
import Lenis from "@studio-freight/lenis";

Expand Down Expand Up @@ -68,6 +70,7 @@ export default function ContactUs() {

return (
<div className="bg-skin-primary text-skin-primary min-h-screen flex flex-col transition-colors duration-300">
<Navbar tone="skin" showThemeToggle />

{/* Hero Section */}
<section className="pt-40 pb-20 px-6 relative overflow-hidden bg-skin-secondary text-skin-primary transition-colors duration-300">
Expand Down