-
-
diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx
index cbc8706c..0cfe5502 100644
--- 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:
,
+ link: "/assignments/dashboard",
+ },
+ {
+ id: 2,
+ label: "Submissions",
+ icon:
,
+ 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 (
{
-
+
+
+ {menuItems.map((item: any) => (
+
+ ))}
+
+
+
) : (
-
+
+
+
+
+ {menuItems.map((item: any) => (
+
+ ))}
+
+
+ }
+ >
+ Log Out
+
+
)}
- {!isCollapsed && isCollapsible && (
-