sidebar update

3 files changed, 67 insertions, 25 deletions

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 2bb3159a..90029cc1 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -31,7 +31,7 @@ body {
 }
 
 [vaul-drawer-wrapper] {
-  @apply bg-rgray-1;
+  @apply bg-rgray-2;
 }
 
 @layer utilities {
diff --git a/apps/web/src/assets/Memories.tsx b/apps/web/src/assets/Memories.tsx
new file mode 100644
index 00000000..09093f26
--- /dev/null
+++ b/apps/web/src/assets/Memories.tsx
@@ -0,0 +1,42 @@
+export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
+  props,
+) => (
+  <svg
+    width="89"
+    height="53"
+    viewBox="0 0 89 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="0.40697"
+      y="8.52821"
+      width="43.0286"
+      height="43.0286"
+      rx="5.5"
+      transform="rotate(-12 0.40697 8.52821)"
+      fill="var(--gray-4)"
+      stroke="var(--gray-8)"
+    />
+    <rect
+      x="20.8257"
+      y="9.19775"
+      width="43"
+      height="43"
+      rx="5.5"
+      fill="var(--gray-4)"
+      stroke="var(--gray-8)"
+    />
+    <rect
+      x="47.6965"
+      y="-0.612372"
+      width="43.0286"
+      height="43.0286"
+      rx="5.5"
+      transform="rotate(15 47.6965 -0.612372)"
+      fill="var(--gray-4)"
+      stroke="var(--gray-8)"
+    />
+  </svg>
+);
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 4f295bb3..7f2908ff 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -2,6 +2,8 @@
 import { StoredContent } from "@/server/db/schema";
 import { AddNewPagePopover, PageItem } from "./PagesItem";
 import { CategoryItem } from "./CategoryItem";
+import { MemoryIcon } from "../../assets/Memories";
+import { Trash2, User2 } from "lucide-react";
 
 export default async function Sidebar() {
   const pages: StoredContent[] = [
@@ -28,30 +30,28 @@ export default async function Sidebar() {
   ];
 
   return (
-    <aside className="bg-rgray-3 flex h-screen w-[25%] flex-col items-start py-5 font-light">
-      <div className="flex items-center justify-center gap-1 px-5 text-xl font-normal">
-        <img src="/brain.png" alt="logo" className="h-10 w-10" />
-        SuperMemory
-      </div>
-      <div className="flex h-1/3 w-full flex-col items-start justify-center p-2">
-        <h1 className="mb-1 flex w-full items-center justify-center px-3 font-normal">
-          Pages
-          <AddNewPagePopover />
-        </h1>
-        {pages.map((item) => (
-          <PageItem key={item.id} item={item} />
-        ))}
-      </div>
-      <div className="flex h-1/2 w-full flex-col items-start  p-2">
-        <h1 className="mb-1 flex w-full items-center justify-center px-3 font-normal">
-          Categories
-          <AddNewPagePopover />
-        </h1>
-        {pages.map((item) => (
-          <CategoryItem key={item.id} item={item} />
-        ))}
-      </div>
-      <button>y</button>
+    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-3 py-5 font-light">
+      <button
+        // data-state-on="true"
+        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-4 py-3 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <MemoryIcon className="h-14 w-14" />
+        <span className="">Memories</span>
+      </button>
+      <button
+        // data-state-on="true"
+        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md p-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <Trash2 strokeWidth={1.3} className="h-8 w-8" />
+        <span className="">Trash</span>
+      </button>
+      <button
+        // data-state-on="true"
+        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md p-3 px-4 py-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <User2 strokeWidth={1.3} className="h-8 w-8" />
+        <span className="">Profile</span>
+      </button>
     </aside>
   );
 }