📝worked on folder side bar

src/components/FolderSideBar.js

@@ -0,0 +1,21 @@
+import React from "react"
+import FolderIcon from "../assets/empty-folder-icon.png"
+
+const FolderSideBar = () => {
+  return (
+    <div className="ig:flex h-screen">
+      <div className="w-full">
+        <div className="flex-row justify-center flex w-full bg-neutral pb-2">
+          <img className="w-8 p-1" src={FolderIcon} alt="clear folder icon" />
+          <h1 className="text-2xl ">Public</h1>
+        </div>
+        <div className="flex-row justify-center flex w-full pt-2">
+          <img className="w-8 p-1" src={FolderIcon} alt="clear folder icon" />
+          <h1 className="text-2xl ">Private</h1>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FolderSideBar

src/components/SideBar.js

@@ -3,7 +3,10 @@ import NotesCard from "./NotesCard"
 const SideBar = ({ notes }) => {
   return (
     <>
-      <div data-testid="sidebar-component" className="h-screen overflow-scroll">
+      <div
+        data-testid="sidebar-component"
+        className="h-screen overflow-scroll bg-neutral"
+      >
         {notes?.map((note) => (
           <NotesCard key={note.id} note={note} />
         ))}

src/pages/Main.js

@@ -1,15 +1,17 @@
 import React from "react"
-import SideBar from "../components/SideBar"
 import Note from "../components/Note"
 import { useFetchGet } from "../utilities/useFetchGet"
+import FolderSideBar from "../components/FolderSideBar"
+import SideBar from "../components/SideBar"
 
 const Main = () => {
   const { data } = useFetchGet("notes")
   const notes = data
   return (
     <div className="h-[calc(100vh-100px)] overflow-hidden">
       <div className="flex h-full">
-        <div className="w-64 bg-lightGray">
+        <div className="flex w-96 flex-row bg-lightGray">
+          <FolderSideBar />
           <SideBar notes={notes} />
         </div>
         <div className="w-[calc(100vw-16rem)]">