Skip to content

fix: add BOOKMARKS to mobile nav and correct GitHub URL in contribute… #300

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
NamanBharsakale wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: add BOOKMARKS to mobile nav and correct GitHub URL in contribute… #300

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
52 changes: 51 additions & 1 deletion app/components/contribute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function ContributionsSection() {
<div className="text-left w-full md:w-[60%]">
<h3 className="font-semibold w-full text-5xl mb-4" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>Browse and Tackle Issues</h3>
<p className="mt-2 text-2xl w-full" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
Check out the available issues on our <span className="underline"><Link href="https://github.com/pushkarsinghh/opencse/issues">GitHub repository</Link></span>. Pick one to work on, or raise your own if you spot something new!
Check out the available issues on our <span className="underline"><Link href="https://github.com/pushkarscripts/openCSE/issues">GitHub repository</Link></span>. Pick one to work on, or raise your own if you spot something new!
</p>
<ul className="list-disc md:w-[60%] ml-5 text-2xl mt-3 space-y-1" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
<li>Find beginner-friendly and advanced issues</li>
Expand All @@ -24,6 +24,56 @@ export default function ContributionsSection() {
</p>
</div>
</div>

{/* How to Contribute Steps */}
<div className="mt-12 px-6 text-left">
<h3 className="font-semibold text-5xl mb-8" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
How to Contribute
</h3>
<ol className="text-2xl space-y-5" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
<li className="flex items-start gap-4">
<span className="flex-shrink-0 w-9 h-9 bg-[#d2b48c] text-[#1B0D00] rounded-full flex items-center justify-center font-bold text-lg">
1
</span>
<span>
<strong>Fork &amp; Clone</strong> — Fork the repository on GitHub and clone it to your local machine.
</span>
</li>
<li className="flex items-start gap-4">
<span className="flex-shrink-0 w-9 h-9 bg-[#d2b48c] text-[#1B0D00] rounded-full flex items-center justify-center font-bold text-lg">
2
</span>
<span>
<strong>Pick an Issue</strong> — Browse open issues or open a new one to discuss your idea before starting.
</span>
</li>
<li className="flex items-start gap-4">
<span className="flex-shrink-0 w-9 h-9 bg-[#d2b48c] text-[#1B0D00] rounded-full flex items-center justify-center font-bold text-lg">
3
</span>
<span>
<strong>Create a Branch</strong> — Make a dedicated branch for your change (e.g. <code className="bg-[#2b1b0e] px-2 py-0.5 rounded text-xl">feat/topic-name</code>).
</span>
</li>
<li className="flex items-start gap-4">
<span className="flex-shrink-0 w-9 h-9 bg-[#d2b48c] text-[#1B0D00] rounded-full flex items-center justify-center font-bold text-lg">
4
</span>
<span>
<strong>Open a Pull Request</strong> — Push your branch and submit a PR against <code className="bg-[#2b1b0e] px-2 py-0.5 rounded text-xl">main</code>. A maintainer will review it shortly.
</span>
</li>
</ol>
<Link
href="https://github.com/pushkarscripts/openCSE/issues"
target="_blank"
rel="noopener noreferrer"
className="inline-block mt-10 px-8 py-3 bg-[#d2b48c] text-[#1B0D00] font-bold text-2xl hover:opacity-90 transition"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
>
Browse Issues on GitHub →
</Link>
</div>
</section>
);
}
2 changes: 2 additions & 0 deletions app/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export default function Footer() {
<li><Link href="/#subjects" className="hover:text-[#d2b48c] transition">Subjects</Link></li>
<li><Link href="/#contribute" className="hover:text-[#d2b48c] transition">Contribute</Link></li>
<li><Link href="/#sponsor" className="hover:text-[#d2b48c] transition">Sponsor</Link></li>
<li><Link href="/quiz" className="hover:text-[#d2b48c] transition">Quiz</Link></li>
<li><Link href="/bookmarks" className="hover:text-[#d2b48c] transition">Bookmarks</Link></li>
</ul>
</div>

Expand Down
57 changes: 42 additions & 15 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, useRef } from "react";
import { usePathname } from "next/navigation";

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

export default function Navbar() {
const [menuOpen, setMenuOpen] = useState(false);
const navRef = useRef<HTMLElement>(null);
const pathname = usePathname();

useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (navRef.current && !navRef.current.contains(event.target as Node)) {
setMenuOpen(false);
}
}
if (menuOpen) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [menuOpen]);

const linkClass = (href: string) => {
const isActive = !href.includes("#") && pathname === href;
return `hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer${
isActive ? " text-[#d2b48c] underline underline-offset-4" : ""
}`;
};

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">
<nav ref={navRef} 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" }}
Expand All @@ -38,24 +59,24 @@ export default function Navbar() {
}}
>
<li>
<Link href="/" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/" className={linkClass("/")}>
HOME
</Link>
</li>
<li>
<Link href="/#subjects" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">SUBJECTS</Link>
<Link href="/#subjects" className={linkClass("/#subjects")}>SUBJECTS</Link>
</li>
<li>
<Link href="/#contribute" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">CONTRIBUTE</Link>
<Link href="/#contribute" className={linkClass("/#contribute")}>CONTRIBUTE</Link>
</li>
<li>
<Link href="/#sponsor" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">SPONSOR</Link>
<Link href="/#sponsor" className={linkClass("/#sponsor")}>SPONSOR</Link>
</li>
<li>
<Link href="/quiz" className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">QUIZ</Link>
<Link href="/quiz" className={linkClass("/quiz")}>QUIZ</Link>
</li>
<li>
<Link href="/bookmarks" className="hover:opacity-80 transition-opacity">
<Link href="/bookmarks" className={linkClass("/bookmarks")}>
BOOKMARKS
</Link>
</li>
Expand All @@ -64,6 +85,7 @@ export default function Navbar() {
<button
className="md:hidden flex flex-col justify-center items-center w-10 h-10 cursor-pointer"
aria-label="Toggle menu"
aria-expanded={menuOpen}
onClick={() => setMenuOpen((open) => !open)}
>
<span
Expand Down Expand Up @@ -98,32 +120,37 @@ export default function Navbar() {
}}
>
<li>
<Link href="/" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/" onClick={() => setMenuOpen(false)} className={linkClass("/")}>
HOME
</Link>
</li>
<li>
<Link href="/#subjects" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/#subjects" onClick={() => setMenuOpen(false)} className={linkClass("/#subjects")}>
SUBJECTS
</Link>
</li>
<li>
<Link href="/#contribute" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/#contribute" onClick={() => setMenuOpen(false)} className={linkClass("/#contribute")}>
CONTRIBUTE
</Link>
</li>
<li>
<Link href="/#sponsor" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/#sponsor" onClick={() => setMenuOpen(false)} className={linkClass("/#sponsor")}>
SPONSOR
</Link>
</li>
<li>
<Link href="/quiz" onClick={() => setMenuOpen(false)} className="hover:text-[#d2b48c] transition-colors duration-200 cursor-pointer">
<Link href="/quiz" onClick={() => setMenuOpen(false)} className={linkClass("/quiz")}>
QUIZ
</Link>
</li>
<li>
<Link href="/bookmarks" onClick={() => setMenuOpen(false)} className={linkClass("/bookmarks")}>
BOOKMARKS
</Link>
</li>
</ul>
</div>
</nav>
);
}
}