FEAT: Added Sidebar

SideBar now available with Logo on top

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}

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")}

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;

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;