Merge pull request tryyang2001#32 from vivienherq/sidebar

Update sidebar items and style
vivienherq · Mar 18, 2024 · bbd83ac · bbd83ac
2 parents 3ad4159 + 36ac58f
commit bbd83ac
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 31 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -21,8 +21,10 @@ export default function RootLayout({
       <body className={inter.className + " min-h-screen"}>
         <Providers>
           <div className="flex flex-row justify-start">
-            <SideBar />
-            <div className="bg-white flex-1 p-4 text-black border border-dashed">
+            <div>
+              <SideBar />
+            </div>
+            <div className="h-screen bg-white flex-1 p-4 text-black overflow-auto">
               {children}
             </div>
           </div>

diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx
@@ -1,29 +1,46 @@
 "use client";
 
 import { useState } from "react";
-import { Avatar, Button, User } from "@nextui-org/react";
+import { Avatar, Button, User, Spacer } from "@nextui-org/react";
 import { HiOutlineChevronDoubleLeft, HiMenu } from "react-icons/hi";
+import { useRouter } from "next/navigation";
+import {
+  MdOutlineAssignment,
+  MdOutlineUploadFile,
+  MdOutlineLogout,
+} from "react-icons/md";
 import classNames from "classnames";
 
+const menuItems = [
+  {
+    id: 1,
+    label: "Assignments",
+    icon: <MdOutlineAssignment className="text-2xl" />,
+    link: "/assignments/dashboard",
+  },
+  {
+    id: 2,
+    label: "Submissions",
+    icon: <MdOutlineUploadFile className="text-2xl" />,
+    link: "/assignments/submissions",
+  },
+];
+
 const SideBar = () => {
+  const router = useRouter();
   const userName = "Jane Doe";
   const userEmail = "janedoe@u.nus.edu";
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isCollapsible, setIsCollapsible] = useState(false);
 
   const wrapperClasses = classNames(
-    "px-4 pt-8 pb-4 bg-gray-200 text-black flex justify-between flex-col border border-dashed",
+    "h-screen px-4 pt-8 pb-4 bg-lightgrey text-black flex flex-col",
     {
       ["w-60"]: !isCollapsed,
       ["w-20"]: isCollapsed,
     }
   );
 
-  const collapseIconClasses = classNames(
-    "p-4 rounded bg-gray-300 absolute right-0",
-    { "rotate-180": isCollapsed }
-  );
-
   const onMouseOver = () => {
     setIsCollapsible(!isCollapsible);
   };
@@ -32,6 +49,10 @@ const SideBar = () => {
     setIsCollapsed(!isCollapsed);
   };
 
+  const handleNavigate = (route: any) => {
+    router.push(route);
+  };
+
   return (
     <div
       className={wrapperClasses}
@@ -45,31 +66,83 @@ const SideBar = () => {
               <Button
                 isIconOnly
                 onClick={handleToggleCollapse}
-                className="text-black shadow-lg"
+                className="text-black"
               >
                 <HiMenu className="text-2xl" />
               </Button>
-              <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+              <Avatar
+                showFallback
+                name="Jane"
+                src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+              />
+              <Spacer y={60} />
+              {menuItems.map((item: any) => (
+                <Button
+                  isIconOnly
+                  key={item.id}
+                  // onClick={handleToggleCollapse}
+                  className="text-black"
+                  onPress={() => handleNavigate(item.link)}
+                >
+                  {item.icon}
+                </Button>
+              ))}
+              <Spacer y={72} />
+              <Spacer y={6} />
+              <Button
+                isIconOnly
+                // onClick={handleToggleCollapse}
+                className="text-black"
+              >
+                <MdOutlineLogout className="text-2xl" />
+              </Button>
             </div>
           ) : (
-            <User
-              name={userName}
-              description={userEmail}
-              avatarProps={{
-                src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
-              }}
-            />
+            <div className="flex flex-col w-full items-start">
+              <Button
+                isIconOnly
+                onClick={handleToggleCollapse}
+                className="text-black"
+              >
+                <HiOutlineChevronDoubleLeft className="text-2xl" />
+              </Button>
+              <User
+                name={userName}
+                description={userEmail}
+                avatarProps={{
+                  src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+                  alt: "Jane",
+                  showFallback: true,
+                }}
+              />
+              <Spacer y={60} />
+              {menuItems.map((item: any) => (
+                <Button
+                  // isIconOnly
+                  // onClick={handleToggleCollapse}
+                  key={item.id}
+                  className="flex text-black text-left items-center justify-start p-2"
+                  fullWidth={true}
+                  startContent={item.icon}
+                  onPress={() => handleNavigate(item.link)}
+                >
+                  {item.label}
+                </Button>
+              ))}
+              <Spacer y={72} />
+              <Spacer y={6} />
+              <Button
+                // isIconOnly
+                // onClick={handleToggleCollapse}
+                className="flex text-black w-full text-left items-center justify-start p-2"
+                fullWidth={true}
+                startContent={<MdOutlineLogout className="text-2xl" />}
+              >
+                Log Out
+              </Button>
+            </div>
           )}
         </div>
-        {!isCollapsed && isCollapsible && (
-          <Button
-            isIconOnly
-            onClick={handleToggleCollapse}
-            className="text-black shadow-lg absolute right-0"
-          >
-            <HiOutlineChevronDoubleLeft className="text-2xl" />
-          </Button>
-        )}
       </div>
     </div>
   );

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -17,10 +17,7 @@ const config: Config = {
         background: "#032539",
         white: "#ffffff",
         logo: "#07c1ff",
-      },
-      colours: {
-        white: "#ffffff",
-        lightgrey: "#eeeeee",
+        lightgrey: "#d4d4d8",
       },
     },
   },