feat: Implement mobile responsive layouts for academics and main header, and introduce a new home header.

Author: parthsali

app/(main)/academics/AcademicsClientView.tsx

@@ -17,7 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { BookOpen } from "lucide-react";
+import { BookOpen, ArrowLeft } from "lucide-react";
 import { addToRecentFiles } from "@/lib/recentFiles";
 import { InitialData } from "@/types/general";
 import { ActiveFile } from "@/types/file";
@@ -190,10 +190,10 @@ export default function AcademicsClientView({ initialData }: Props) {
 
   return (
     <div className="h-[calc(100vh-7rem)] flex flex-col">
-      <div className="p-3 border-b flex items-center gap-4">
+      <div className="p-3 border-b flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-4 bg-background z-10">
         {/* Branch */}
         <Select value={selectedBranchId} onValueChange={handleBranchChange}>
-          <SelectTrigger className="w-[260px]">
+          <SelectTrigger className="w-full md:w-[260px]">
             <SelectValue placeholder="Select Branch..." />
           </SelectTrigger>
           <SelectContent>
@@ -211,7 +211,7 @@ export default function AcademicsClientView({ initialData }: Props) {
           onValueChange={handleYearChange}
           disabled={!selectedBranchId || yearsForSelectedBranch.length === 0}
         >
-          <SelectTrigger className="w-[260px]">
+          <SelectTrigger className="w-full md:w-[260px]">
             <SelectValue placeholder="Select Year..." />
           </SelectTrigger>
           <SelectContent>
@@ -229,7 +229,7 @@ export default function AcademicsClientView({ initialData }: Props) {
           onValueChange={handleSyllabusChange}
           disabled={!selectedYearId || syllabiForSelectedYear.length === 0}
         >
-          <SelectTrigger className="w-[260px]">
+          <SelectTrigger className="w-full md:w-[260px]">
             <SelectValue placeholder="Select Syllabus..." />
           </SelectTrigger>
           <SelectContent>
@@ -242,29 +242,62 @@ export default function AcademicsClientView({ initialData }: Props) {
         </Select>
 
         {/* Search Files */}
-        <div className="ml-auto">
+        <div className="w-full md:w-auto md:ml-auto">
           <AcademicsFileSearch onFileSelect={handleFileSelect} />
         </div>
       </div>
 
-      {/* Main Panel */}
-      <ResizablePanelGroup direction="horizontal" className="flex-grow">
-        <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
-          <AcademicsSidebar
-            onFileSelect={handleFileSelect}
-            subjects={subjectsForSelectedSyllabus}
-            isSyllabusSelected={!!selectedSyllabusId}
-          />
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={75}>
+      {/* Main Panel Content */}
+      <div className="flex-grow overflow-hidden relative">
+        {/* Mobile View */}
+        <div className="md:hidden h-full flex flex-col">
           {activeFile ? (
-            <PdfViewer file={activeFile} key={activeFile.id} />
+            <div className="flex flex-col h-full">
+              <div className="p-2 border-b bg-muted/20 flex items-center">
+                <button
+                  onClick={() => setActiveFile(null)}
+                  className="flex items-center gap-2 text-sm font-medium text-primary hover:underline px-2 py-1"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                  Back to Files
+                </button>
+              </div>
+              <div className="flex-grow overflow-hidden">
+                <PdfViewer file={activeFile} key={activeFile.id} />
+              </div>
+            </div>
           ) : (
-            <WelcomePanel />
+            <div className="flex-grow overflow-hidden">
+              <AcademicsSidebar
+                onFileSelect={handleFileSelect}
+                subjects={subjectsForSelectedSyllabus}
+                isSyllabusSelected={!!selectedSyllabusId}
+              />
+            </div>
           )}
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        </div>
+
+        {/* Desktop View */}
+        <div className="hidden md:block h-full">
+          <ResizablePanelGroup direction="horizontal" className="h-full">
+            <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
+              <AcademicsSidebar
+                onFileSelect={handleFileSelect}
+                subjects={subjectsForSelectedSyllabus}
+                isSyllabusSelected={!!selectedSyllabusId}
+              />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={75}>
+              {activeFile ? (
+                <PdfViewer file={activeFile} key={activeFile.id} />
+              ) : (
+                <WelcomePanel />
+              )}
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
     </div>
   );
 }

app/(main)/academics/AcademicsFileSearch.tsx

@@ -133,32 +133,32 @@ export default function AcademicsFileSearch({
         <>
             <Button
                 variant="outline"
-                className="relative w-[200px] justify-start text-sm text-muted-foreground"
+                className="relative w-full md:w-[260px] justify-start text-sm text-muted-foreground font-normal"
                 onClick={() => setOpen(true)}
             >
-                <Search className="mr-2 h-4 w-4" />
+                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                 <span>Search files...</span>
                 <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
                     <span className="text-xs">⌘</span>K
                 </kbd>
             </Button>
             <Dialog open={open} onOpenChange={setOpen}>
-                <DialogContent className="p-0 max-w-2xl">
-                    <DialogHeader className="px-4 pt-4 pb-2">
+                <DialogContent className="p-0 gap-0 w-[95vw] sm:w-full max-w-2xl max-h-[85vh] rounded-xl flex flex-col overflow-hidden">
+                    <DialogHeader className="px-4 pt-4 pb-2 shrink-0 border-b bg-muted/10">
                         <div className="flex items-center justify-between gap-4">
-                            <div className="flex-1 min-w-0">
-                                <DialogTitle>Search Files</DialogTitle>
-                                <DialogDescription>
-                                    Search across all files globally
+                            <div className="flex-1 min-w-0 text-left">
+                                <DialogTitle className="text-lg tracking-tight">Search Files</DialogTitle>
+                                <DialogDescription className="text-xs sm:text-sm truncate">
+                                    Global file search
                                     {totalResults > 0 && (
-                                        <span className="ml-2 text-primary font-medium">
-                                            • {totalResults} result{totalResults !== 1 ? "s" : ""} found
+                                        <span className="ml-1.5 text-primary font-medium">
+                                            • {totalResults} found
                                         </span>
                                     )}
                                 </DialogDescription>
                             </div>
                             <Select value={resultLimit} onValueChange={setResultLimit}>
-                                <SelectTrigger className="w-[110px] h-8 text-xs focus:ring-0 focus:ring-offset-0 mr-8">
+                                <SelectTrigger className="w-[90px] h-7 text-xs mr-6  bg-background/50">
                                     <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
@@ -171,13 +171,14 @@ export default function AcademicsFileSearch({
                             </Select>
                         </div>
                     </DialogHeader>
-                    <Command shouldFilter={false}>
+                    <Command shouldFilter={false} className="flex-1 flex flex-col overflow-hidden">
                         <CommandInput
                             placeholder="Type to search files..."
                             value={searchQuery}
                             onValueChange={setSearchQuery}
+                            className="border-none focus:ring-0"
                         />
-                        <CommandList className="max-h-[400px]">
+                        <CommandList className="flex-1 overflow-y-auto">
                             {isLoading && (
                                 <div className="flex items-center justify-center p-8">
                                     <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />

app/(main)/academics/PdfViewer.tsx

@@ -78,7 +78,7 @@ export default function PdfViewer({ file }: PdfViewerProps) {
       {/* Transparent header */}
       <header className="absolute top-0 left-0 right-0 z-10 flex h-14 items-center justify-between px-4 bg-background/0 backdrop-blur-xs">
         <div className="flex items-center gap-3 min-w-0">
-          <h3 className="font-semibold text-lg truncate text-foreground">
+          <h3 className="font-semibold text-lg truncate text-background md:text-foreground">
             {file.fileName || "Loading..."}
           </h3>
         </div>

app/(main)/layout.tsx

@@ -5,13 +5,16 @@ import { Header } from "@/components/layout/header";
 import { Sidebar } from "@/components/layout/sidebar";
 import { AnnouncementBanner } from "@/components/AnnouncementBanner";
 import { cn, parseMajor } from "@/lib/utils";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 const Layout = ({ children }: LayoutProps) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   useEffect(() => {
     try {
@@ -94,7 +97,7 @@ const Layout = ({ children }: LayoutProps) => {
       {/* Sidebar */}
       <aside
         className={cn(
-          "fixed inset-y-0 left-0 z-10 hidden flex-col border-r transition-all duration-300 ease-in-out sm:flex",
+          "fixed inset-y-0 left-0 z-10 hidden flex-col border-r transition-all duration-300 ease-in-out md:flex",
           "bg-background/95 backdrop-blur-sm",
           isCollapsed ? "w-20" : "w-72"
         )}
@@ -106,7 +109,7 @@ const Layout = ({ children }: LayoutProps) => {
       <div
         className={cn(
           "flex flex-col flex-1 w-full transition-all duration-300 ease-in-out",
-          isCollapsed ? "sm:pl-20" : "sm:pl-72"
+          isCollapsed ? "md:pl-20" : "md:pl-72"
         )}
       >
         {/* <AnnouncementBanner
@@ -116,11 +119,38 @@ const Layout = ({ children }: LayoutProps) => {
           showAlways={true} // Set to true to show every time page loads
 
         /> */}
-        <Header isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+        <Header
+          isCollapsed={isCollapsed}
+          setIsCollapsed={setIsCollapsed}
+          onOpenMobileMenu={() => setIsMobileMenuOpen(true)}
+        />
         <main className="flex-1 p-6">
           <div className="mx-auto">{children}</div>
         </main>
       </div>
+
+      {/* Mobile Sidebar Overlay */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm md:hidden">
+          <div className="fixed inset-y-0 left-0 z-50 w-72 h-full border-r bg-background shadow-lg transition-transform duration-300 ease-in-out transform translate-x-0">
+            <div className="relative h-full flex flex-col">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-2 top-4 z-50"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                <X className="h-5 w-5" />
+              </Button>
+              <div className="flex-1 overflow-y-auto">
+                <Sidebar isCollapsed={false} onItemClick={() => setIsMobileMenuOpen(false)} />
+              </div>
+            </div>
+          </div>
+          {/* Click outside to close */}
+          <div className="absolute inset-0" onClick={() => setIsMobileMenuOpen(false)} />
+        </div>
+      )}
     </div>
   );
 };

app/page.tsx

@@ -7,11 +7,8 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import Link from "next/link";
-import { ModeToggle } from "@/components/toggle-theme";
-import Logo from "@/components/logo";
 import { getBranches } from "@/lib/api/branch";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import TelegramIcon from "@/components/telegram";
+import { HomeHeader } from "@/components/home-header";
 
 
 export const revalidate = 86400; // 24h ISR
@@ -36,32 +33,7 @@ export default async function Home() {
 
 
       {/* Fixed Logo in Top-Left Corner */}
-      <div className="absolute top-4 px-4 flex flex-row justify-between w-full z-10">
-        <Link href="/" className="flex items-center gap-2 font-semibold">
-          <Logo />
-          <span>Learnverse</span>
-        </Link>
-
-        <div className="flex items-center gap-2">
-          <TooltipProvider>
-            <Tooltip delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Link
-                  href="https://t.me/+oxCuF0R1UIwwYTY1"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex h-9 w-9 items-center justify-center"
-                >
-                  <TelegramIcon className="h-5 w-5" />
-                  <span className="sr-only">Join Telegram channel</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent>Join Telegram channel</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <ModeToggle />
-        </div>
-      </div>
+      <HomeHeader />
 
       <div className="container max-w-4xl text-center">
         <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">
@@ -78,19 +50,19 @@ export default async function Home() {
 
 
         {/* Clickable Year Cards */}
-        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div className="mt-8 grid grid-cols-1 gap-3 sm:mt-12 sm:grid-cols-3 sm:gap-4">
           {branches.map((branch, index) => (
-            <Link href={`/academics`} key={branch._id}>
-              <Card className="group h-full transform transition-transform duration-200 hover:-translate-y-1 hover:border-primary/60">
-                <CardHeader>
+            <Link href={`/academics`} key={branch._id} className="w-full">
+              <Card className="group h-full transform transition-transform duration-200 hover:-translate-y-1 hover:border-primary/60 p-2 sm:p-0">
+                <CardHeader className="p-4 sm:p-6">
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <GraduationCap className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
-                      <CardTitle className="text-lg">{branch.code}</CardTitle>
+                    <div className="flex items-center gap-2 sm:gap-3">
+                      <GraduationCap className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary" />
+                      <CardTitle className="text-base sm:text-lg">{branch.code}</CardTitle>
                     </div>
-                    <ArrowRight className="h-5 w-5 text-muted-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+                    <ArrowRight className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                   </div>
-                  <CardDescription className="pt-2 text-left">
+                  <CardDescription className="pt-1 sm:pt-2 text-left text-xs sm:text-sm">
                     {branch.name.toLowerCase() + " - " + descriptions[index]}
                   </CardDescription>
                 </CardHeader>
@@ -103,17 +75,18 @@ export default async function Home() {
 
 
         {/* Subtle Footer with Core Offerings */}
-        <div className="mt-8 flex justify-center gap-x-4">
-          <Badge variant="secondary">
-            <BadgeCheckIcon />
+        {/*hide this for mobile screens */}
+        <div className="mt-8 flex flex-row items-center justify-center gap-2 sm:flex-row sm:gap-x-4 hidden md:block">
+          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+            <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Comprehensive Notes
           </Badge>
-          <Badge variant="secondary">
-            <BadgeCheckIcon />
+          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+            <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Past Exam Papers
           </Badge>
-          <Badge variant="secondary">
-            <BadgeCheckIcon />
+          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+            <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Reference Books
           </Badge>
         </div>