Many changes.

components/ClickAwayHandler.tsx

@@ -3,6 +3,7 @@ import React, { useRef, useEffect, ReactNode, RefObject } from "react";
 interface Props {
   children: ReactNode;
   onClickOutside: Function;
+  className?: string;
 }
 
 function useOutsideAlerter(
@@ -27,9 +28,17 @@ function useOutsideAlerter(
   }, [ref, onClickOutside]);
 }
 
-export default function OutsideAlerter({ children, onClickOutside }: Props) {
+export default function OutsideAlerter({
+  children,
+  onClickOutside,
+  className,
+}: Props) {
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef, onClickOutside);
 
-  return <div ref={wrapperRef}>{children}</div>;
+  return (
+    <div ref={wrapperRef} className={className}>
+      {children}
+    </div>
+  );
 }

components/CollectionCards.tsx

@@ -0,0 +1,32 @@
+import useCollectionSlice from "@/store/collection";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+export default function Collections() {
+  const { collections } = useCollectionSlice();
+
+  return (
+    <div className="flex flex-wrap">
+      {collections.map((e, i) => {
+        const formattedDate = new Date(e.createdAt).toLocaleString("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+        });
+
+        return (
+          <div
+            className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:shadow duration-100"
+            key={i}
+          >
+            <div className="flex justify-between text-sky-900">
+              <p className="text-lg w-max">{e.name}</p>
+              <FontAwesomeIcon icon={faChevronRight} className="w-3" />
+            </div>
+            <p className="text-sm text-sky-300">{formattedDate}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

components/Collections.tsx

@@ -1,28 +0,0 @@
-import { useEffect, useState } from "react";
-
-interface Collections {
-  id: number;
-  name: string;
-  createdAt: string;
-}
-
-export default function Collections() {
-  const [collections, setCollections] = useState<Collections[]>([]);
-  useEffect(() => {
-    fetch("/api/routes/collections/getCollections")
-      .then((res) => res.json())
-      .then((data) => setCollections(data.response));
-  }, []);
-
-  return (
-    <div className="flex flex-wrap">
-      {collections.map((e, i) => {
-        return (
-          <div className="p-5 bg-gray-200 m-2 w-max rounded" key={i}>
-            <p>{e.name}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

components/Navbar.tsx

@@ -2,7 +2,7 @@ import { signOut } from "next-auth/react";
 
 export default function Navbar() {
   return (
-    <div className="flex justify-between p-5">
+    <div className="flex justify-between p-5 border-solid border-b-sky-100 border border-l-white">
       <p>Navbar</p>
       <div onClick={() => signOut()} className="cursor-pointer w-max">
         Sign Out

components/Sidebar.tsx

@@ -1,16 +1,26 @@
 import { useSession } from "next-auth/react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useState } from "react";
+import useCollectionSlice from "@/store/collection";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder, faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faDatabase,
+  faPlus,
+  faChevronDown,
+} from "@fortawesome/free-solid-svg-icons";
 
 export default function Sidebar() {
-  const { data: session, status } = useSession();
+  const { data: session } = useSession();
 
-  const [addCollection, setAddCollection] = useState(false);
+  const [collectionInput, setCollectionInput] = useState(false);
+
+  const { collections, addCollection } = useCollectionSlice();
 
   const user = session?.user;
 
-  const toggleAddCollection = () => {
-    setAddCollection(!addCollection);
+  const toggleCollectionInput = () => {
+    setCollectionInput(!collectionInput);
   };
 
   const submitCollection = async (
@@ -19,42 +29,62 @@ export default function Sidebar() {
     const collectionName: string = (event.target as HTMLInputElement).value;
 
     if (event.key === "Enter" && collectionName) {
-      await fetch("/api/routes/collections/postCollection", {
-        body: JSON.stringify({ collectionName }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        method: "POST",
-      })
-        .then((res) => res.json())
-        .then((data) => console.log(data));
+      addCollection(collectionName);
+      (event.target as HTMLInputElement).value = "";
     }
   };
 
   return (
-    <div className="fixed bg-gray-200 top-0 bottom-0 left-0 w-80 p-5">
-      <div className="flex justify-between gap-5 items-center h-9">
-        <p>{user?.name}</p>
+    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border">
+      <div className="flex gap-3 items-center mb-5 cursor-pointer w-fit text-gray-600">
+        <FontAwesomeIcon icon={faUserCircle} className="h-8" />
+        <div className="flex items-center gap-1">
+          <p>{user?.name}</p>
+          <FontAwesomeIcon icon={faChevronDown} className="h-3" />
+        </div>
+      </div>
 
-        {addCollection ? (
-          <ClickAwayHandler onClickOutside={toggleAddCollection}>
+      <div className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <FontAwesomeIcon icon={faDatabase} className="w-4" />
+        <p>All Collections</p>
+      </div>
+
+      <div className="text-gray-500 flex items-center justify-between mt-5">
+        <p>Collections</p>
+        {collectionInput ? (
+          <ClickAwayHandler
+            onClickOutside={toggleCollectionInput}
+            className="w-fit"
+          >
             <input
               type="text"
               placeholder="Enter Collection Name"
-              className="w-48 rounded p-2"
+              className="w-44 rounded p-1"
               onKeyDown={submitCollection}
               autoFocus
             />
           </ClickAwayHandler>
         ) : (
-          <div
-            onClick={toggleAddCollection}
-            className="select-none cursor-pointer bg-white rounded p-2"
-          >
-            Create Collection +
-          </div>
+          <FontAwesomeIcon
+            icon={faPlus}
+            onClick={toggleCollectionInput}
+            className="select-none cursor-pointer rounded p-2 w-3"
+          />
         )}
       </div>
+      <div>
+        {collections.map((e, i) => {
+          return (
+            <div
+              className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
+              key={i}
+            >
+              <FontAwesomeIcon icon={faFolder} className="w-4" />
+              <p>{e.name}</p>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }