Implement sidebar

Author: anees-asghar

src/app/(authenticated)/layout.tsx

@@ -13,7 +13,7 @@ export default async function AuthenticatedLayout({
   if (!session) redirect("/login");
 
   return (
-    <div className="h-screen text-white flex flex-col">
+    <div className="h-screen text-white flex flex-col relative">
       <Toolbar />
       <div className="flex-1 overflow-y-scroll bg-gray-100 text-black mb-navbar">
         {children}

src/app/(authenticated)/schedule/ScheduleTable.tsx

@@ -8,6 +8,19 @@ import { getEventFullDate } from "@/utils/utils";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
+function getPageHeading(kind: string | null) {
+  switch (kind) {
+    case "keynote":
+      return "Keynotes";
+    case "presentation":
+      return "Presentations";
+    case "workshop":
+      return "Workshops";
+    default:
+      return "Schedule";
+  }
+}
+
 interface ScheduleTableProps {
   sessions: SINFOSession[];
 }
@@ -23,10 +36,15 @@ export default function ScheduleTable({ sessions }: ScheduleTableProps) {
   const placeParam = searchParams.get("place");
 
   const sessionsByDay = useMemo(() => {
-    const sortedSessions = sessions.sort((a, b) =>
-      a.date.localeCompare(b.date)
-    );
-    return sortedSessions.reduce(
+    const sessionsCleaned = sessions
+      .filter(
+        (s) =>
+          (!kindParam || s.kind.toLowerCase() === kindParam) &&
+          (!placeParam || s.place.toLowerCase() === placeParam)
+      )
+      .sort((a, b) => a.date.localeCompare(b.date));
+
+    return sessionsCleaned.reduce(
       (acc, s) => {
         const day = s.date.split("T")[0];
         const daySessions = [...(acc[day] || []), s];
@@ -50,8 +68,6 @@ export default function ScheduleTable({ sessions }: ScheduleTableProps) {
 
   const updateSearchParam = (newDay: string) => {
     const params = new URLSearchParams(searchParams.toString());
-    params.delete("kind");
-    params.delete("place");
 
     if (newDay === dayParam) {
       params.delete("day");
@@ -69,6 +85,12 @@ export default function ScheduleTable({ sessions }: ScheduleTableProps) {
 
   return (
     <>
+      <div className="flex flex-col items-start gap-y-2 p-4 text-start text-sm">
+        <h1 className="text-2xl font-bold">{getPageHeading(kindParam)}</h1>
+        <p className="text-sm text-gray-600">
+          Checkout all the available sessions.
+        </p>
+      </div>
       <GridList>
         {sortedDays.map((d) => (
           <EventDayButton
@@ -83,15 +105,9 @@ export default function ScheduleTable({ sessions }: ScheduleTableProps) {
         .filter((d) => !showingDay || d === showingDay)
         .map((d) => (
           <List key={d} title={getEventFullDate(d)}>
-            {sessionsByDay[d]
-              .filter(
-                (s) =>
-                  (!kindParam || s.kind === kindParam) &&
-                  (!placeParam || s.place === placeParam)
-              )
-              .map((s) => (
-                <SessionTile key={s.id} session={s} onlyShowHours={true} />
-              ))}
+            {sessionsByDay[d].map((s) => (
+              <SessionTile key={s.id} session={s} onlyShowHours={true} />
+            ))}
           </List>
         ))}
     </>

src/app/(authenticated)/schedule/page.tsx

@@ -10,12 +10,6 @@ export default async function Schedule() {
 
   return (
     <div className="container m-auto h-full">
-      <div className="flex flex-col items-start gap-y-2 p-4 text-start text-sm">
-        <h1 className="text-2xl font-bold">Schedule</h1>
-        <p className="text-sm text-gray-600">
-          Checkout all the available sessions.
-        </p>
-      </div>
       <ScheduleTable sessions={sessions} />
     </div>
   );

src/components/BottomNavbar/index.tsx

@@ -22,7 +22,7 @@ export default async function BottomNavbar() {
   if (!user) return <></>;
 
   return (
-    <div className="fixed z-100 bottom-0 left-0 right-0 bg-sinfo-primary">
+    <div className="fixed z-10 bottom-0 left-0 right-0 bg-sinfo-primary">
       <div className="relative container m-auto flex h-navbar flex-row">
         {navbarItemKeysByRole[convertToAppRole(user.role)].map((k) => (
           <NavbarItem key={k} name={k} />

src/components/Toolbar/Sidebar.tsx

@@ -0,0 +1,76 @@
+import { X } from "lucide-react";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+
+interface SidebarProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export default function Sidebar({ show, onClose }: SidebarProps) {
+  async function handleLogout() {
+    await signOut();
+  }
+
+  return (
+    <div
+      className={`z-20 fixed top-0 left-0 h-full w-full bg-sinfo-primary p-10 flex flex-col gap-6 transition-transform duration-300 ${
+        show ? "translate-x-0" : "-translate-x-full"
+      }`}
+    >
+      <div className="flex justify-end">
+        <button onClick={onClose}>
+          <X size={40} />
+        </button>
+      </div>
+
+      {/* Primary Options (grouped) */}
+      <div className="flex flex-col gap-10 text-3xl">
+        <div className="flex flex-col gap-2">
+          <Link href="/profile" onClick={onClose}>
+            Profile
+          </Link>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Link href="/schedule?kind=keynote" onClick={onClose}>
+            Keynotes
+          </Link>
+          <Link href="/schedule?kind=presentation" onClick={onClose}>
+            Presentations
+          </Link>
+          <Link href="/schedule?kind=workshop" onClick={onClose}>
+            Workshops
+          </Link>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Link href="/speakers" onClick={onClose}>
+            Speakers
+          </Link>
+          <Link href="/companies" onClick={onClose}>
+            Companies
+          </Link>
+        </div>
+        <div></div>
+      </div>
+      <div className="flex-1" />
+
+      {/* Secondary Options */}
+      <div className="flex flex-col gap-2 text-xl">
+        <Link href="https://sinfo.org/">Website</Link>
+        <Link href="https://github.com/sinfo/nextjs-sinfo-webapp/issues/new">
+          Report a Bug
+        </Link>
+        {/* todo: the pages below dont exist */}
+        <Link href="#" onClick={onClose}>
+          Privacy Policy
+        </Link>
+        <Link href="#" onClick={onClose}>
+          Code of Conduct
+        </Link>
+        <button className="text-start" onClick={handleLogout}>
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/Toolbar.tsx renamed to src/components/Toolbar/index.tsx

@@ -2,28 +2,33 @@
 
 import { Image } from "next/dist/client/image-component";
 import { sinfoLogo } from "@/assets/images";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { usePathname, useRouter } from "next/navigation";
-import { ArrowLeft, LogOut, Menu, RefreshCcw } from "lucide-react";
+import { ArrowLeft, Menu, RefreshCcw } from "lucide-react";
+import { useState } from "react";
+import Sidebar from "./Sidebar";
 
 export default function Toolbar() {
   const { data: session } = useSession();
   const router = useRouter();
   const currPath = usePathname();
 
-  const showMenu: boolean = currPath === "/home" || currPath === "/profile";
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  async function handleExit() {
-    await signOut();
-  }
+  const showMenu: boolean = currPath === "/home" || currPath === "/profile";
 
   return (
-    <div className="bg-sinfo-primary">
-      <div className="container m-auto p-4">
+    <>
+      <Sidebar show={isExpanded} onClose={() => setIsExpanded(false)} />
+      <div className="bg-sinfo-primary container m-auto p-4 pb-2 flex flex-col gap-4">
         <nav className="flex flex-row items-center">
           <div className="w-1/6 flex justify-start items-center">
             {showMenu ? (
-              <Menu size={32} />
+              <Menu
+                size={32}
+                className="cursor-pointer"
+                onClick={() => setIsExpanded(true)}
+              />
             ) : (
               <ArrowLeft
                 size={32}
@@ -42,18 +47,16 @@ export default function Toolbar() {
               quality={100}
             />
           </div>
-          <div className="w-1/6 flex justify-end items-center gap-x-2">
-            {/* potentially temporary until we have an alternative way to logout */}
-            <RefreshCcw size={32} onClick={() => window.location.reload()} />
-            <LogOut size={32} onClick={handleExit} />
+          <div className="w-1/6 flex justify-end items-center">
+            <RefreshCcw size={28} onClick={() => window.location.reload()} />
           </div>
         </nav>
         {currPath === "/home" && session?.user?.name && (
-          <div className="mt-4 text-lg">
+          <div className="text-lg">
             Welcome, <span className="font-semibold">{session.user.name}!</span>
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 }