From c883bee10ed40792c2ae35bdd9745649cfffa2f2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 13 Feb 2024 14:42:56 +0000
Subject: feature: Add login page and logout button

---
 packages/web/app/dashboard/components/Sidebar.tsx  | 16 +++++-----
 .../dashboard/components/SidebarProfileOptions.tsx | 35 ++++++++++++++++++++++
 packages/web/app/dashboard/layout.tsx              |  2 +-
 3 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 packages/web/app/dashboard/components/SidebarProfileOptions.tsx

(limited to 'packages/web/app/dashboard')

diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index d2ec14a6..0563e26f 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -11,6 +11,8 @@ import {
 import { redirect } from "next/navigation";
 import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
+import Link from "next/link";
+import SidebarProfileOptions from "./SidebarProfileOptions";
 
 export default async function Sidebar() {
   const session = await getServerAuthSession();
@@ -20,10 +22,12 @@ export default async function Sidebar() {
 
   return (
     <aside className="flex h-full w-60 flex-col border-r p-4">
-      <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
-        <Brain />
-        <span className="ml-2 text-base font-semibold">Remember</span>
-      </div>
+      <Link href={"/dashboard/bookmarks"}>
+        <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
+          <Brain />
+          <span className="ml-2 text-base font-semibold">Remember</span>
+        </div>
+      </Link>
       <hr />
       <div>
         <ul className="mt-5 space-y-2 text-sm font-medium">
@@ -52,9 +56,7 @@ export default async function Sidebar() {
       </div>
       <div className="mt-auto flex justify-between">
         <div className="my-auto"> {session.user.name} </div>
-        <Button variant="ghost" className="h-10">
-          <MoreHorizontal />
-        </Button>
+        <SidebarProfileOptions />
       </div>
     </aside>
   );
diff --git a/packages/web/app/dashboard/components/SidebarProfileOptions.tsx b/packages/web/app/dashboard/components/SidebarProfileOptions.tsx
new file mode 100644
index 00000000..f931b63e
--- /dev/null
+++ b/packages/web/app/dashboard/components/SidebarProfileOptions.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { LogOut, MoreHorizontal } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+export default function SidebarProfileOptions() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem
+          onClick={() =>
+            signOut({
+              callbackUrl: "/",
+            })
+          }
+        >
+          <LogOut className="mr-2 size-4" />
+          <span>Sign Out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/web/app/dashboard/layout.tsx b/packages/web/app/dashboard/layout.tsx
index f39bd6fb..9d3568a5 100644
--- a/packages/web/app/dashboard/layout.tsx
+++ b/packages/web/app/dashboard/layout.tsx
@@ -10,7 +10,7 @@ export default async function Dashboard({
       <div className="flex-none">
         <Sidebar />
       </div>
-      <div className="flex-1 overflow-y-auto bg-gray-100">{children}</div>
+      <main className="flex-1 overflow-y-auto bg-gray-100">{children}</main>
     </div>
   );
 }
-- 
cgit v1.2.3-70-g09d2