Skip to content

Commit 94ae8dd

Browse files
karannfrkarannfr
committed
fixed: #264, navbar responsiveness, footer responsiveness, paper count stat updated
1 parent 71be45b commit 94ae8dd

8 files changed

Lines changed: 150 additions & 33 deletions

File tree

‎src/components/CatalogueContent.tsx‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,24 @@ import Error from "./Error";
1717
import { Filter } from "lucide-react";
1818
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
1919
import { Pin } from "lucide-react";
20-
20+
import SearchBarChild from "./Searchbar/searchbar-child"
2121
import Link from "next/link";
22+
import { usePathname } from "next/navigation";
2223
import {
2324
getSecureUrl,
2425
generateFileName,
2526
downloadFile,
2627
} from "@/util/download_paper";
28+
import type { ICourses } from "@/interface";
2729

2830
const CatalogueContent = () => {
2931
const router = useRouter();
3032
const searchParams = useSearchParams();
3133
const [isMounted, setIsMounted] = useState(false);
32-
34+
const pathname: string = usePathname() ?? "/";
3335
// Initialize state with defaults, set later in useEffect
3436
const [subject, setSubject] = useState<string | null>(null);
37+
const [subjects, setSubjects] = useState<string[]>([]);
3538
const [selectedExams, setSelectedExams] = useState<string[]>([]);
3639
const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
3740
const [selectedYears, setSelectedYears] = useState<string[]>([]);
@@ -75,6 +78,31 @@ const CatalogueContent = () => {
7578
void fetchRelatedSubjects();
7679
}, [subject]);
7780

81+
useEffect(() => {
82+
if (pathname !== "/catalogue") return;
83+
84+
const getSubjects = async () => {
85+
try {
86+
const res = await fetch("/api/course-list");
87+
if (!res.ok) return;
88+
89+
const json: unknown = await res.json();
90+
91+
if (Array.isArray(json)) {
92+
const filtered = json
93+
.filter((item): item is ICourses => typeof item === "object" && item !== null && "name" in item)
94+
.map(item => item.name);
95+
setSubjects(filtered);
96+
} else {
97+
console.error("Invalid data returned from API:", json);
98+
}
99+
} catch (err) {
100+
console.error("Failed to fetch courses", err);
101+
}
102+
};
103+
104+
void getSubjects();
105+
}, [pathname]);
78106
// Set initial state from searchParams on client-side mount
79107
useEffect(() => {
80108
setIsMounted(true);
@@ -352,7 +380,10 @@ const CatalogueContent = () => {
352380
</SheetContent>
353381
</Sheet>}
354382

355-
<div className="p-7">
383+
<div className="p-7 flex flex-col items-start">
384+
<div className="md:hidden flex flex-col items-start w-full mb-8">
385+
<SearchBarChild initialSubjects={subjects} />
386+
</div>
356387
<div className="flex items-center gap-2">
357388
<div>
358389
<p className="text-s font-semibold text-gray-700 dark:text-white/80">

‎src/components/Error.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Error = ({
1313
<div
1414
className={`flex h-[80%] flex-1 items-center justify-center ${filtersPulled ? "blur-xl" : ""}`}
1515
>
16-
<div className="-mt-48 text-center text-lg">{message}</div>
16+
<div className="-mt-48 text-center md:text-lg text-sm">{message}</div>
1717
</div>
1818
);
1919
};

‎src/components/FloatingNavbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function FloatingNavbar({ onNavigate }: Props) {
1515
const [isOpen, setIsOpen] = useState(false);
1616

1717
return (
18-
<div className="fixed right-6 top-0 z-50 flex flex-col items-end h-full pointer-events-none">
18+
<div className="fixed right-6 top-2 flex flex-col items-end h-full pointer-events-none">
1919
{}
2020
<button
2121
className="mt-[1.25rem] flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95 pointer-events-auto"

‎src/components/Footer.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@ export default function Footer() {
5050
};
5151

5252
return (
53-
<footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-6 py-10 sm:pt-28 md:pt-36 text-white dark:from-[#070114] dark:to-[#1F0234]">
54-
<div className="mx-auto flex max-w-7xl flex-wrap justify-between gap-y-10 text-center sm:text-left mb-16">
53+
<footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-6 py-10 pt-16 md:pt-20 lg:pt-36 text-white dark:from-[#070114] dark:to-[#1F0234]">
54+
<div className="mx-auto flex max-w-7xl flex-col lg:flex-row justify-between gap-y-10 text-center lg:text-left mb-16">
5555
{/* Branding & Socials */}
56-
<div className="flex w-full flex-col gap-4 sm:w-[45%] lg:w-[30%]">
56+
<div className="flex w-full flex-col gap-4 lg:w-[30%]">
5757
<h1 className="bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text font-jost text-5xl font-bold text-transparent dark:to-[#FFC6E8]">
5858
Papers
5959
</h1>
60-
<div className="flex flex-wrap justify-center gap-2 sm:justify-start">
60+
<div className="flex flex-wrap justify-center gap-2 lg:justify-start">
6161
{[
6262
[
6363
"https://www.instagram.com/codechefvit/",
@@ -94,23 +94,23 @@ export default function Footer() {
9494
</div>
9595

9696
{/* Events */}
97-
<div className="flex w-full flex-col gap-2 text-black dark:text-white sm:w-[45%] lg:w-[15%]">
97+
<div className="flex w-full flex-col gap-2 text-black dark:text-white lg:w-[15%]">
9898
<h3 className="font-jost text-xl font-semibold">Events</h3>
9999
<Link href="https://devsoc25.codechefvit.com" target="_blank">DevSoc</Link>
100100
<Link href="https://gravitas.codechefvit.com" target="_blank">CookOff</Link>
101101
<Link href="https://gravitas.codechefvit.com" target="_blank">Clueminati</Link>
102102
</div>
103103

104104
{/* Projects */}
105-
<div className="flex w-full flex-col gap-2 text-black dark:text-white sm:w-[45%] lg:w-[20%]">
105+
<div className="flex w-full flex-col gap-2 text-black dark:text-white lg:w-[20%]">
106106
<h3 className="font-jost text-xl font-semibold">Our Projects</h3>
107107
<Link href="https://papers.codechefvit.com" target="_blank">Papers</Link>
108108
<Link href="https://contactify.codechefvit.com" target="_blank">Contactify</Link>
109109
<Link href="https://ffcs.codechefvit.com" target="_blank">FFCS-inator</Link>
110110
</div>
111111

112112
{/* Suggestions */}
113-
<div className="flex w-full flex-col gap-1 text-black dark:text-white sm:w-[45%] lg:w-[25%] items-center sm:items-start">
113+
<div className="flex w-full flex-col gap-1 text-black dark:text-white lg:w-[25%] items-center lg:items-start">
114114
<Link
115115
href={`mailto:codechefvit@gmail.com`}
116116
className="flex items-center gap-2 font-jost text-xl font-semibold mb-2"

‎src/components/Navbar.tsx‎

Lines changed: 85 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,45 @@ function Navbar() {
5252
const renderHomePageButtons = () => (
5353
<>
5454
<Link href="/pinned" className="ml-2">
55-
<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">
56-
<Pin className="h-4 w-4" />
57-
Pinned Subjects
55+
<div className="flex items-center
56+
gap-1 sm:gap-2
57+
rounded-full border border-[#3A3745]
58+
bg-[#e8e9ff] dark:bg-black
59+
px-2.5 sm:px-3.5 md:px-4
60+
py-1 sm:py-1.5 md:py-2
61+
text-xs sm:text-sm md:text-base
62+
font-semibold
63+
text-gray-700 dark:text-white
64+
transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
65+
h-8 sm:h-9 md:h-10">
66+
67+
<Pin className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
68+
<span className="truncate">Pinned Subjects</span>
5869
</div>
5970
</Link>
60-
<Link href="/request" className="ml-2">
61-
<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">
62-
<ArrowUpRight className="h-4 w-4" />
63-
Paper Request
71+
72+
<Link href="/request" className="ml-2 mt-2 sm:mt-0">
73+
<div className="flex items-center
74+
gap-1 sm:gap-2
75+
rounded-full border border-[#3A3745]
76+
bg-[#e8e9ff] dark:bg-black
77+
px-2.5 sm:px-3.5 md:px-4
78+
py-1 sm:py-1.5 md:py-2
79+
text-xs sm:text-sm md:text-base
80+
font-semibold
81+
text-gray-700 dark:text-white
82+
transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
83+
h-8 sm:h-9 md:h-10">
84+
85+
<ArrowUpRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
86+
<span className="truncate">Paper Request</span>
6487
</div>
6588
</Link>
6689
</>
6790
);
6891

6992
return (
70-
<div className="sticky top-0 z-[9999] w-full bg-[#B2B8FF] px-4 py-4 dark:bg-[#130E1F] md:px-8 md:py-5">
93+
<div className="sticky top-0 z-[50] w-full bg-[#B2B8FF] px-4 py-4 dark:bg-[#130E1F] md:px-8 md:py-5">
7194
<div className="flex items-center justify-between">
7295
{}
7396
<div className="flex items-center gap-4 relative">
@@ -83,7 +106,7 @@ function Navbar() {
83106
</Link>
84107

85108
{pathname === "/catalogue" ? (
86-
<div className="ml-4 hidden md:block relative">
109+
<div className="ml-4 hidden xl:block relative">
87110
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
88111
<DropdownMenuTrigger asChild>
89112
<button
@@ -116,37 +139,82 @@ function Navbar() {
116139
</DropdownMenu>
117140
</div>
118141
) : (
119-
<div className="hidden md:flex items-center h-10">{renderHomePageButtons()}</div>
142+
<>
143+
<div className="ml-2 hidden lg:block xl:hidden relative">
144+
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
145+
<DropdownMenuTrigger asChild>
146+
<button
147+
className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
148+
aria-label="Toggle dropdown"
149+
>
150+
<ChevronDown
151+
className={`h-5 w-5 transition-transform duration-200 ${dropdownOpen ? "rotate-180" : ""}`}
152+
/>
153+
</button>
154+
</DropdownMenuTrigger>
155+
156+
<DropdownMenuContent
157+
className="w-56 rounded-2xl bg-[#4B22D1] text-white border border-[rgba(255,255,255,0.1)] shadow-2xl backdrop-blur-sm"
158+
align="start"
159+
>
160+
<DropdownMenuItem asChild>
161+
<Link href="/pinned" className="flex items-center gap-3">
162+
<Pin className="h-4 w-4" />
163+
<span className="font-medium">Pinned Subjects</span>
164+
</Link>
165+
</DropdownMenuItem>
166+
<DropdownMenuItem asChild>
167+
<Link href="/request" className="flex items-center gap-3">
168+
<ArrowUpRight className="h-4 w-4" />
169+
<span className="font-medium">Paper Request</span>
170+
</Link>
171+
</DropdownMenuItem>
172+
</DropdownMenuContent>
173+
</DropdownMenu>
174+
</div>
175+
<div className="hidden xl:flex items-center h-10">{renderHomePageButtons()}</div></>
120176
)}
121177
</div>
122178

123179
{}
124180
{pathname === "/catalogue" && (
125-
<div className="hidden md:flex flex-1 justify-center mx-4">
181+
<div className="hidden md:flex flex-1 justify-center mr-12 ml-8 ">
126182
<div className="w-full max-w-[700px]">
127183
<SearchBarChild initialSubjects={subjects} />
128184
</div>
129185
</div>
130186
)}
131187

132188
{}
133-
<div className="hidden items-center gap-4 md:flex">
134-
<div className="rounded-full border border-[#3A3745] p-1">
189+
<div className={`${pathname === "/catalogue" ? "xl:flex" : "lg:flex"} hidden items-center gap-4`}>
190+
<div className="rounded-full border border-[#3A3745] p-1" >
135191
<ModeToggle />
136192
</div>
137193
<div className="hidden max-w-[200px] md:block">
138194
<PWAInstallButton />
139195
</div>
140196
<Link href={pathname === "/upload" ? "/" : "/upload"}>
141-
<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">
142-
<ArrowDownLeftIcon className="h-4 w-4 rotate-90" />
143-
<span>{pathname === "/upload" ? "Search Papers" : "Upload Papers"}</span>
197+
<div className="flex items-center
198+
gap-1 sm:gap-1.5 md:gap-2
199+
rounded-full border border-[#3A3745]
200+
bg-[#e8e9ff] dark:bg-black
201+
px-2.5 sm:px-3.5 md:px-4
202+
py-1 sm:py-1.5 md:py-2
203+
text-xs sm:text-sm md:text-base
204+
font-semibold
205+
text-gray-700 dark:text-white
206+
transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
207+
h-8 sm:h-9 md:h-10">
208+
<ArrowDownLeftIcon className="h-3.5 w-3.5 sm:h-4 sm:w-4 rotate-90" />
209+
<span className="truncate">
210+
{pathname === "/upload" ? "Search Papers" : "Upload Papers"}
211+
</span>
144212
</div>
145213
</Link>
146214
</div>
147215

148216
{}
149-
<div className="md:hidden">
217+
<div className={`${pathname === "/catalogue" ? "xl:hidden" : "lg:hidden"}`}>
150218
<FloatingNavbar onNavigate={() => void 0} />
151219
</div>
152220
</div>

‎src/components/Searchbar/searchbar-child.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function SearchBarChild({
101101
}, []);
102102

103103
return (
104-
<div className="mx-auto w-full max-w-xl font-play">
104+
<div className="md:mx-auto w-full max-w-xl font-play">
105105
<form
106106
onSubmit={(e) => {
107107
e.preventDefault();

‎src/components/screens/Info.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function Info() {
3939
/>
4040
<FeatureCard
4141
isHighlight
42-
highlightText="1200+"
42+
highlightText="1500+"
4343
subText="Past Year Papers"
4444
/>
4545
<FeatureCard

‎src/components/ui/PWAInstallButton.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,15 @@ const PWAInstallButton = () => {
5454

5555
return (
5656
<>
57-
<div className="flex w-fit items-center justify-between rounded-full border border-[#3A3745] bg-[#e8e9ff] px-4 py-2 text-gray-700 shadow-md transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#2b2b30] md:hidden">
57+
<div className="flex w-fit items-center justify-between
58+
gap-1.5
59+
rounded-full border border-[#3A3745]
60+
bg-[#e8e9ff] dark:bg-black
61+
px-2.5 py-1.5
62+
text-xs font-medium text-gray-700
63+
shadow-md transition
64+
hover:bg-slate-50 dark:text-white dark:hover:bg-[#2b2b30]
65+
md:hidden h-9">
5866
<div className="flex items-center gap-3">
5967
<Image
6068
src="/papers_logo.png"
@@ -75,7 +83,17 @@ const PWAInstallButton = () => {
7583

7684
<div
7785
onClick={handleInstall}
78-
className="hidden cursor-pointer items-center gap-3 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-5 py-2 text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] md:flex"
86+
className="hidden md:flex
87+
cursor-pointer items-center
88+
gap-2 sm:gap-2.5 md:gap-3
89+
rounded-full border border-[#3A3745]
90+
bg-[#e8e9ff] dark:bg-black
91+
px-3 sm:px-4 md:px-5
92+
py-1.5 sm:py-2
93+
text-sm sm:text-base
94+
text-gray-700 dark:text-white
95+
transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
96+
h-9 sm:h-10"
7997
>
8098
<Image src="/papers_logo.png" alt="Papers App" width={28} height={28} />
8199
<span className="text-sm font-semibold">Papers App</span>

0 commit comments

Comments
 (0)