From 55773cda390eacdad89e939c6bf6ac72081ffae6 Mon Sep 17 00:00:00 2001
From: Rashadjaxon <amirjacksonscholar@gmail.com>
Date: Wed, 15 May 2024 09:09:02 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9Dworked=20on=20folder=20side=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/empty-folder-icon.png | Bin 0 -> 5384 bytes
 src/components/FolderSideBar.js  |  21 +++++++++++++++++++++
 src/components/SideBar.js        |   5 ++++-
 src/pages/Main.js                |   6 ++++--
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/empty-folder-icon.png
 create mode 100644 src/components/FolderSideBar.js

diff --git a/src/assets/empty-folder-icon.png b/src/assets/empty-folder-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..30f4bbcbd71e93fdde31f94e24ac10e91bf607ea
GIT binary patch
literal 5384
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

literal 0
HcmV?d00001

diff --git a/src/components/FolderSideBar.js b/src/components/FolderSideBar.js
new file mode 100644
index 0000000..26cc49b
--- /dev/null
+++ b/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
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index c33c291..d56b8e2 100644
--- a/src/components/SideBar.js
+++ b/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} />
         ))}
diff --git a/src/pages/Main.js b/src/pages/Main.js
index f3e3219..95c6438 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -1,7 +1,8 @@
 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")
@@ -9,7 +10,8 @@ const Main = () => {
   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)]">