From a421a16955157c4ef1aebad3ff6e5b041aa18702 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Tue, 4 Feb 2025 17:55:41 +0000
Subject: [PATCH] FEAT: Added Sidebar

SideBar now available with Logo on top
---
 frontend/src/components/Layout/ListRow.tsx  |  2 +-
 frontend/src/components/Layout/Navbar.tsx   | 17 +++++++++++++++--
 frontend/src/components/Layout/Sidebar.tsx  |  8 ++++++--
 frontend/src/components/aside/GenreList.tsx | 18 ++++++++++++++++++
 4 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/aside/GenreList.tsx

diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index 30a155e..3c50446 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -32,7 +32,7 @@ const ListItem: React.FC<ListItemProps> = ({
       className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
       onClick={onItemClick}
     >
-      <div className="relative w-full pt-[56.25%]">
+      <div className="relative w-full pt-[56.25%] ">
         {thumbnail ? (
           <img
             src={thumbnail}
diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index 43a67d4..5c28d84 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -27,6 +27,7 @@ const Navbar: React.FC<NavbarProps> = ({
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { isLoggedIn } = useAuth();
   const isVideoPage = location.pathname.includes("/EduGuru");
+  const [showSideBar, setShowSideBar] = useState(false);
 
   useEffect(() => {
     if (showAuthModal) {
@@ -49,6 +50,10 @@ const Navbar: React.FC<NavbarProps> = ({
       });
   };
 
+  const handleSideBar = () => {
+    setShowSideBar(!showSideBar);
+  }
+
   return (
     <div
       id="navbar"
@@ -74,13 +79,21 @@ const Navbar: React.FC<NavbarProps> = ({
 
       {isLoggedIn && (
         <>
-          <Button extraClasses="absolute top-[75px] left-[20px]">
+          <Button onClick={() => handleSideBar()}
+          extraClasses={`absolute ${
+          showSideBar ? `top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
+          bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
+          over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` : 
+          "top-[75px] left-[20px]"
+        } transition-all duration-300 z-[99]`}
+      >              
             <SidebarIcon className="h-15 w-15 mr-1" />
           </Button>
-          <Sidebar />
+          {showSideBar && <Sidebar extraClasses="h-screen"/>}
         </>
       )}
 
+
       <Button
         extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap"
         onClick={() => console.log("Settings - TODO")}
diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index 9c31bb7..0498c3f 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 
-const Sidebar: React.FC = () => {
-  return <div></div>;
+interface SideBarProps {
+  extraClasses?: string;
+}
+
+const Sidebar: React.FC<SideBarProps> = ( {extraClasses}) => {
+  return <div className={`${extraClasses} " fixed top-0 left-0 z-0 w-[250px] bg-gray-800 text-white p-4 z-[0]"`}></div>;
 };
 
 export default Sidebar;
diff --git a/frontend/src/components/aside/GenreList.tsx b/frontend/src/components/aside/GenreList.tsx
new file mode 100644
index 0000000..2a07965
--- /dev/null
+++ b/frontend/src/components/aside/GenreList.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { useState } from "react";
+
+interface GenreListProps {
+
+}
+
+const GenreList: React.FC<GenreListProps> = () => {
+
+  const [genres, setGenres] = useState(true)
+
+
+  return (
+    <div>GenreList</div>
+  )
+}
+
+export default GenreList;
\ No newline at end of file