Skip to content

fix: added back searchbar into navbar and added dropdown for buttons #249

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

Merged
merged 2 commits into from
Aug 14, 2025
Merged

fix: added back searchbar into navbar and added dropdown for buttons #249

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
971dab0
fix: added back searchbar into navbar and added dropdown for buttons
shikhar-sahay Aug 13, 2025
859190a
Used shadCN component for dropdown menu
shikhar-sahay Aug 14, 2025
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
107 changes: 81 additions & 26 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,27 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import ccLogo from "../assets/codechef_logo.svg";
import ModeToggle from "@/components/toggle-theme";
import { Button } from "@/components/ui/button";
import { ArrowDownLeftIcon, Pin, ArrowUpRight } from "lucide-react";
import NavDropdownButton from "./NavDropdownButton";
import FloatingNavbar from "./FloatingNavbar";
import PWAInstallButton from "./ui/PWAInstallButton";
import SearchBarChild from "./Searchbar/searchbar-child";

function Navbar() {
const pathname = usePathname();
const [open, setOpen] = useState(false);
const [subjects, setSubjects] = useState<string[]>([]);
const dropdownContainerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
async function getSubjects() {
const res = await fetch("/api/course-list");
const data = await res.json();
setSubjects(data.map((course: { name: string }) => course.name));
}
if (pathname === "/catalogue") getSubjects();
}, [pathname]);

useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
Expand All @@ -36,11 +46,29 @@ function Navbar() {
};
}, [open]);


const renderHomePageButtons = () => (
<>
<Link href="/pinned">
<div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823] h-10">
<Pin className="h-4 w-4" />
Pinned Subjects
</div>
</Link>
<Link href="/request">
<div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823] h-10">
<ArrowUpRight className="h-4 w-4" />
Paper Request
</div>
</Link>
</>
);

return (
<div className="sticky top-0 z-10 w-full bg-[#B2B8FF] px-4 py-4 dark:bg-[#130E1F] md:px-8 md:py-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="https://www.codechefvit.com/" target="_blank">
<div className="flex items-center gap-4 relative">
<Link href="https://www.codechefvit.com/" target="_blank">
<Image
src={ccLogo as HTMLImageElement}
alt="codechef-logo"
Expand All @@ -56,37 +84,65 @@ function Navbar() {
Papers
</Link>

<div className="mt-3 hidden md:flex">
<Link href="/pinned">
<div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
<Pin className="h-4 w-4" />
Pinned Subjects
</div>
</Link>
<div className="ml-2 hidden md:flex">
<Link href="/request">
<div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
<ArrowUpRight className="h-4 w-4" />
Paper Request
{pathname === "/catalogue" ? (
<div
ref={dropdownContainerRef}
className="ml-4 hidden md:block relative"
>
<NavDropdownButton
isOpen={open}
onClick={() => setOpen((prev) => !prev)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

https://ui.shadcn.com/docs/components/dropdown-menu

Why not use this for drop-down

variant="default"
/>
{open && (
<div className="absolute left-0 mt-3 w-56 rounded-2xl bg-[#4B22D1] shadow-2xl border border-[rgba(255,255,255,0.1)] z-50 overflow-hidden backdrop-blur-sm">
<div className="py-2">
<Link href="/pinned">
<button
onClick={() => setOpen(false)}
className="w-full px-4 py-3 text-left text-white hover:bg-[rgba(255,255,255,0.1)] transition-all duration-200 flex items-center gap-3 group"
>
<Pin className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
<span className="font-medium">Pinned Subjects</span>
</button>
</Link>
<Link href="/request">
<button
onClick={() => setOpen(false)}
className="w-full px-4 py-3 text-left text-white hover:bg-[rgba(255,255,255,0.1)] transition-all duration-200 flex items-center gap-3 group"
>
<ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
<span className="font-medium">Paper Request</span>
</button>
</Link>
</div>
</div>
</Link>
)}
</div>
</div>

{/* Desktop: Create Paper Request button */}
) : (
<div className="hidden md:flex items-center h-10">
{renderHomePageButtons()}
</div>
)}
</div>

{pathname === "/catalogue" && (
<div className="hidden md:flex flex-1 justify-center mx-4">
<div className="w-full max-w-[700px]">
<SearchBarChild initialSubjects={subjects} />
</div>
</div>
)}

<div className="hidden items-center gap-4 md:flex">
<div className="rounded-full border border-[#3A3745] p-1">
<ModeToggle />
</div>

<div className="hidden max-w-[200px] md:block">
<PWAInstallButton />
</div>

<Link href={pathname === "/upload" ? "/" : "/upload"}>
<div className="flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
<div className="flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823] h-10">
<ArrowDownLeftIcon className="h-4 w-4 rotate-90" />
<span>
{pathname === "/upload" ? "Search Papers" : "Upload Papers"}
Expand All @@ -95,16 +151,15 @@ function Navbar() {
</Link>
</div>

{/* Mobile: Create Paper Request button inside dropdown */}
<div className="md:hidden" ref={dropdownContainerRef}>
<NavDropdownButton
isOpen={open}
onClick={() => setOpen((prev) => !prev)}
variant="default"
/>
<div
className={`transition-all duration-300 ease-in-out ${
open ? "block" : "hidden"
}`}
className={`transition-all duration-300 ease-in-out ${open ? "block" : "hidden"
}`}
>
<FloatingNavbar onNavigate={() => setOpen(false)} />
</div>
Expand Down