Skip to content

feat:add active navigation section highlighting and improve hero responsiveness #288

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

Open
akshatsinghai6682-sketch wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat:add active navigation section highlighting and improve hero responsiveness #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 10 additions & 13 deletions app/components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export default function HeroSection() {
return (
<section
className="relative overflow-hidden text-center
py-12 sm:py-6 md:py-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16
rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-15 mb-6
py-12 sm:py-10 md:py-12 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16
rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-16 mb-6
min-h-[70vh] sm:min-h-fit flex items-center justify-center"
style={{
backgroundImage: "url('/HeroBG.png')",
Expand All @@ -31,21 +31,18 @@ export default function HeroSection() {
{/* Content Container */}
<div className="relative z-10 px-2 sm:px-4 md:px-6 lg:px-8">
<h1
className={`font-bold ${roadRage.variable} text-black text-center
text-7xl sm:text-6xl md:text-5xl lg:text-[90px] xl:text-[112px]
leading-snug sm:leading-tight md:leading-tight lg:leading-[95px] xl:leading-[102px] pt-6 sm:pt-8 md:pt-10 lg:pt-[70px]`}
style={{
fontFamily: "var(--font-road-rage), 'Road Rage', cursive",
fontWeight: 400,
}}
className={`${roadRage.className} text-black text-center
text-5xl sm:text-6xl md:text-7xl lg:text-[90px] xl:text-[112px]
leading-tight sm:leading-tight md:leading-snug lg:leading-[95px] xl:leading-[102px]
pt-6 sm:pt-8 md:pt-10 lg:pt-[70px]`}
>
Learn Computer Science & Engineering
<br className="hidden md:block" />
&nbsp;the Open Way.
</h1>

<p
className="mt-6 sm:mt-6 text-xl sm:text-lg md:text-2xl lg:text-3xl xl:text-[45px] text-black"
className="mt-6 text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-[45px] text-black"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
>
Free, open, and beginner-friendly documentation
Expand All @@ -58,9 +55,9 @@ export default function HeroSection() {
const el = document.getElementById("subjects");
if (el) el.scrollIntoView({ behavior: "smooth" });
}}
className="mt-12 sm:mt-10 mb-8 sm:mb-8 px-6 sm:px-8 md:px-12 lg:px-18
py-3 sm:py-3.5 md:py-5 lg:py-6 rounded-full
text-xl sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl
className="mt-12 sm:mt-10 mb-8 px-8 sm:px-10 md:px-12 lg:px-16
py-3 sm:py-4 md:py-5 lg:py-6 rounded-full
text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl
bg-[#38220b] text-white hover:bg-[#2a1809] hover:scale-105
transition-all duration-300 cursor-pointer font-semibold"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
Expand Down
165 changes: 103 additions & 62 deletions app/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"use client";
import Link from "next/link";
import { Road_Rage } from "next/font/google";
import { useState } from "react";
import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";

const roadRage = Road_Rage({
variable: "--font-road-rage",
Expand All @@ -11,55 +12,120 @@ const roadRage = Road_Rage({

export default function Navbar() {
const [menuOpen, setMenuOpen] = useState(false);
const [activeSection, setActiveSection] = useState("home");
const pathname = usePathname();

const isHomePage = pathname === "/";

useEffect(() => {
if (!isHomePage) return;

const sections = ["subjects", "contribute", "sponsor"];

const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveSection(entry.target.id);
}
});
},
{
rootMargin: "-40% 0px -55% 0px",
threshold: 0,
}
);

sections.forEach((id) => {
const el = document.getElementById(id);
if (el) observer.observe(el);
});

const handleScroll = () => {
if (window.scrollY < 100) setActiveSection("home");
};
window.addEventListener("scroll", handleScroll, { passive: true });

return () => {
observer.disconnect();
window.removeEventListener("scroll", handleScroll);
};
}, [isHomePage]);

const linkClass = (section: string) => {
const isActive = isHomePage && activeSection === section;
return `transition-colors duration-200 cursor-pointer ${isActive
? "text-[#d2b48c] border-b-2 border-[#d2b48c] pb-0.5"
: "hover:text-[#d2b48c]"
}`;
};

const navLinks = (onClickFn?: () => void) => (
<>
<li>
<Link href="/" onClick={onClickFn} className={linkClass("home")}>
HOME
</Link>
</li>
<li>
<Link href="/#subjects" onClick={onClickFn} className={linkClass("subjects")}>
SUBJECTS
</Link>
</li>
<li>
<Link href="/#contribute" onClick={onClickFn} className={linkClass("contribute")}>
CONTRIBUTE
</Link>
</li>
<li>
<Link href="/#sponsor" onClick={onClickFn} className={linkClass("sponsor")}>
SPONSOR
</Link>
</li>
<li>
<Link
href="/quiz"
onClick={onClickFn}
className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer"
>
QUIZ
</Link>
</li>
</>
);

return (
<nav className="fixed h-14 top-0 inset-x-0 z-50 flex justify-between items-center pr-6 pl-4 py-1 bg-[#1B0D00] text-white">
<Link href="/"><div className="flex items-center gap-1">
<img src="/mascot.png" alt="openCSE" className="w-8 h-11 pt-0.5" />
{/* <img src="/logo.png" alt="openCSE" className="w-38 h-17" /> */}
<span
className={`${roadRage.className} text-3xl font-bold`}
style={{ color: "white", fontSize: "30px" }}
>
openCSE
</span>
</div></Link>
<Link href="/">
<div className="flex items-center gap-1">
<img src="/mascot.png" alt="openCSE" className="w-8 h-11 pt-0.5" />
<span
className={`${roadRage.className} text-3xl`}
style={{ color: "white", fontSize: "30px" }}
>
openCSE
</span>
</div>
</Link>

{/* Desktop Menu */}
<ul
className="hidden md:flex gap-6 font-bold"
className="hidden md:flex gap-6"
style={{
color: "white",
textAlign: "right",
fontFamily: '"Road Rage", sans-serif',
fontSize: "28px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "normal",
}}
>
<li>
<Link href="/" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
HOME
</Link>
</li>
<li>
<Link href="/#subjects" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">SUBJECTS</Link>
</li>
<li>
<Link href="/#contribute" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">CONTRIBUTE</Link>
</li>
<li>
<Link href="/#sponsor" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">SPONSOR</Link>
</li>
<li>
<Link href="/quiz" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">QUIZ</Link>
</li>
{navLinks()}
<li>
<Link href="/bookmarks" className="hover:opacity-80 transition-opacity">
BOOKMARKS
</Link>
</li>
</ul>

{/* Mobile Hamburger */}
<button
className="md:hidden flex flex-col justify-center items-center w-10 h-10 cursor-pointer"
Expand All @@ -79,49 +145,24 @@ export default function Navbar() {
}`}
/>
</button>

{/* Mobile Menu */}
<div
className={`md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg transition-all duration-300 origin-top ${menuOpen
? "opacity-100 scale-y-100"
: "opacity-0 scale-y-0 pointer-events-none"
? "opacity-100 scale-y-100"
: "opacity-0 scale-y-0 pointer-events-none"
}`}
>
<ul
className="flex flex-col items-center gap-4 py-4 font-bold"
className="flex flex-col items-center gap-4 py-4"
style={{
color: "white",
fontFamily: '"Road Rage", sans-serif',
fontSize: "28px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "normal",
}}
>
<li>
<Link href="/" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
HOME
</Link>
</li>
<li>
<Link href="/#subjects" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
SUBJECTS
</Link>
</li>
<li>
<Link href="/#contribute" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
CONTRIBUTE
</Link>
</li>
<li>
<Link href="/#sponsor" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
SPONSOR
</Link>
</li>
<li>
<Link href="/quiz" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
QUIZ
</Link>
</li>
{navLinks(() => setMenuOpen(false))}
</ul>
</div>
</nav>
Expand Down