feat: logout btn

Author: agmmtoo

app/(protected)/borrows/page.tsx

@@ -69,29 +69,31 @@ export default async function Borrows({
 
   return (
     <div className="space-y-4">
-      <h1 className="text-2xl font-semibold">Borrows</h1>
-      <div className="flex justify-between items-center">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <Link href="/" passHref legacyBehavior>
-                <BreadcrumbLink>Home</BreadcrumbLink>
-              </Link>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
+      <nav className="backdrop-blur sticky top-0 z-10">
+        <h1 className="text-2xl font-semibold">Borrows</h1>
+        <div className="flex justify-between items-center">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <Link href="/" passHref legacyBehavior>
+                  <BreadcrumbLink>Home</BreadcrumbLink>
+                </Link>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
 
-            <BreadcrumbItem>
-              <BreadcrumbPage>Borrows</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-        <Button asChild>
-          <Link href="/borrows/new">
-            <Book className="mr-2 h-4 w-4" />
-            New Borrow
-          </Link>
-        </Button>
-      </div>
+              <BreadcrumbItem>
+                <BreadcrumbPage>Borrows</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <Button asChild>
+            <Link href="/borrows/new">
+              <Book className="mr-2 h-4 w-4" />
+              New Borrow
+            </Link>
+          </Button>
+        </div>
+      </nav>
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {res.data.map((borrow) => (
           <ListCardBorrow key={borrow.id} borrow={borrow} />

app/(protected)/subscriptions/page.tsx

@@ -76,26 +76,28 @@ export default async function Subscriptions({
 
   return (
     <div className="space-y-4">
-      <h1 className="text-2xl font-semibold">Subscriptions</h1>
-      <div className="flex justify-between items-center">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <Link href="/" passHref legacyBehavior>
-                <BreadcrumbLink>Home</BreadcrumbLink>
-              </Link>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
+      <nav className="backdrop-blur sticky top-0 z-10">
+        <h1 className="text-2xl font-semibold">Subscriptions</h1>
+        <div className="flex justify-between items-center">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <Link href="/" passHref legacyBehavior>
+                  <BreadcrumbLink>Home</BreadcrumbLink>
+                </Link>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
 
-            <BreadcrumbItem>
-              <BreadcrumbPage>Subscriptions</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-        <Button asChild>
-          <Link href="/subscriptions/new">New Subscription</Link>
-        </Button>
-      </div>
+              <BreadcrumbItem>
+                <BreadcrumbPage>Subscriptions</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <Button asChild>
+            <Link href="/subscriptions/new">New Subscription</Link>
+          </Button>
+        </div>
+      </nav>
 
       <Table>
         {/* <TableCaption>List of books available in the library.</TableCaption> */}

app/page.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { IsLoggedIn } from '@/lib/firebase/firebase'
 import Landing from '@/components/landing'
+import { cookies } from 'next/headers'
 
 const menuItems = [
   { title: 'Dashboard', icon: ChartSpline, href: '/dashboard', level: 3 },
@@ -42,6 +43,13 @@ const menuItems = [
   // { title: 'My Borrows', icon: BookCopy, href: '/borrows/me', level: 2 },
 ]
 
+async function logoutAction() {
+  'use server'
+  const cookieStore = await cookies()
+  const sessionName = process.env.SESSION_COOKIE_NAME as string
+  cookieStore.delete(sessionName)
+}
+
 export default async function LibraryDashboard() {
   const claim = await IsLoggedIn()
 
@@ -62,8 +70,13 @@ export default async function LibraryDashboard() {
 
   return (
     <main className="min-h-screen p-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-2xl font-bold mb-8">Librarease</h1>
+      <div className="max-w-2xl mx-auto space-y-4">
+        <div className="flex justify-between items-center">
+          <h1 className="text-2xl font-bold">Librarease</h1>
+          <Button variant="ghost" onClick={logoutAction}>
+            Logout
+          </Button>
+        </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {menuItems.map((item) => {
             if (item.level > userLvl) return null