feature: Add login page and logout button

3 files changed, 45 insertions, 8 deletions

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>
   );
 }