Skip to content

Cleaned up Navbar #11

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
vexed289 wants to merge 3 commits into
base: main
Choose a base branch
from
+43 −20
Open

Cleaned up Navbar #11

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
fe7a86f
Cleaned up Navbar - made it bigger, removed intrusive Get Started ico…
vexed289 Aug 6, 2026
5f45599
bug fix
vexed289 Aug 6, 2026
680a90e
bug fix
vexed289 Aug 6, 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
47 changes: 34 additions & 13 deletions src/app/components/navigation/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,62 @@
'use client'

import { useState } from "react";
import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";


const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false);
const [hidden, setHidden] = useState(false);
const lastYPos = useRef(0);

// Makes navbar disappear on scroll
useEffect(() => {


const hasScrolled = () => {
const currentYPos = window.scrollY;
setHidden(currentYPos > 200 && currentYPos>lastYPos.current);
lastYPos.current = currentYPos;
};
window.addEventListener("scroll", hasScrolled);

return () => {
window.removeEventListener("scroll", hasScrolled)
};
}, []);

const toggleMenu = () => {
setMenuOpen(!menuOpen);
};

return (
<header className="sticky top-0 z-50 w-full bg-slate-900 border-b border-slate-700">
<header className={`fixed top-0 z-50 w-full bg-slate-900 border-b border-slate-700 transition-all duration-300
${hidden ? "opacity-0 -translate-y-full pointer-events-none" : "opacity-100 translate-y-0"
}`}>
<div className="mx-auto max-w-[95vw] px-6 sm:px-8">
<div className="flex h-16 items-center justify-between">
<div className={`flex h-18 items-center justify-between transition-all duration-300`}>
{/* Logo */}
<Link href="/" className="flex items-center select-none" onClick={() => setMenuOpen(false)}>
<Link href="/" className="flex items-center justify-center select-none" onClick={() => setMenuOpen(false)}>
<img
src="/GCSE Log Logo.svg"
alt="GCSE Log"
className="h-10 drop-shadow-sm"
className="block h-12 drop-shadow-sm translate-y-[2.5px] brightness-175 hover:brightness-200 transition-all duration-300"
/>
</Link>

{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-8 text-sm font-medium text-white">
<Link href="/" className="hover:text-purple-200 transition-colors">
<nav className="hidden md:flex items-center gap-10 text-lg font-medium text-white">
<Link href="/" className="hover:text-purple-300 transition-colors">
Home
</Link>
<Link href="/subjects" className="hover:text-purple-200 transition-colors">
<Link href="/subjects" className="hover:text-purple-300 transition-colors">
Browse
</Link>
<Link href="/#about" className="hover:text-purple-200 transition-colors">
<Link href="/#about" className="hover:text-purple-300 transition-colors">
About
</Link>
<Link href="/opportunities" className="hover:text-purple-200 transition-colors">
<Link href="/opportunities" className="hover:text-purple-300 transition-colors">
Opportunities
</Link>
</nav>
Expand All @@ -44,9 +65,9 @@ const Navbar = () => {
<div className="flex items-center gap-3">
<Link
href="/subjects"
className="hidden sm:inline-flex items-center gap-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 text-sm font-semibold transition-all duration-200"
className="hidden sm:inline-flex items-center gap-2 rounded-xl border-b border-white/20 bg-white/5 hover:bg-purple-700 hover:border-purple-700 text-white px-4 py-2 text-base font-semibold transition-all duration-200"
>
Get Started <ArrowRight size={16}/>
Submit Resources <ArrowRight size={16}/>
</Link>

{/* Mobile menu button */}
Expand Down Expand Up @@ -107,4 +128,4 @@ const Navbar = () => {
);
};

export default Navbar;
export default Navbar;
16 changes: 9 additions & 7 deletions src/app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,13 +450,15 @@ function CallToAction() {
export default function Home() {
return (
<div className="bg-slate-900 text-slate-300" style={{ fontFamily: 'DM Sans, sans-serif' }}>
<Navbar />
<Hero />
<Features />
<FeaturedResources />
<About />
<CallToAction />
<Footer />
<Navbar />
<main className={"pt-[72px]"}> {/*added padding of Navbar.height because fixed now*/}
<Hero />
<Features />
<FeaturedResources />
<About />
<CallToAction />
<Footer />
</main>
</div>
);
}