Merge branch 'UserProfile' into 'main'

Log Out button

See merge request !18

app/(content)/layout.tsx

@@ -5,7 +5,6 @@ import { dashboardConfig } from "@/lib/config/dashboard"
 interface DashboardLayoutProps {
     children?: React.ReactNode
 }
-
 export default async function ContentLayout({
     children,
 }: DashboardLayoutProps) {
@@ -15,7 +14,6 @@ export default async function ContentLayout({
                 <aside className="hidden w-[200px] flex-col md:flex">
                     <div className="sticky top-0">
                         <DashboardNav items={dashboardConfig.sidebarNav} />
-                        <button>Logout</button>
                     </div>
                 </aside>
                 <main className="flex w-full flex-1 flex-col overflow-hidden">

components/nav.tsx

@@ -7,6 +7,7 @@ import { SidebarNavItem } from "@/types";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ModeToggle } from "./mode-toggle";
+import {signIn, signOut, useSession } from "next-auth/react"
 
 interface DashboardNavProps {
     items: SidebarNavItem[]
@@ -14,11 +15,11 @@ interface DashboardNavProps {
 
 export default function DashboardNav({ items }: DashboardNavProps) {
     const path = usePathname()
-
+    const { data: session } = useSession();
     if (!items?.length) {
         return null
     }
-
+    
     const isLoaded = true
     const user = "test"
 
@@ -30,7 +31,7 @@ export default function DashboardNav({ items }: DashboardNavProps) {
                     <Icons.logoWhite className="h-7 w-7 hidden dark:block" />
                 </Link>
             </div>
-            {isLoaded && user ?
+            {session?.user && isLoaded && user ?
                 (items.map((item, index) => {
                     const Icon = Icons[item.icon as keyof IconsType || "arrowRight"];
                     if (item.title === "My Profile") {
@@ -62,7 +63,15 @@ export default function DashboardNav({ items }: DashboardNavProps) {
                     </p>
                 </div>
             }
-            <ModeToggle />
+            {session?.user &&
+            <>
+            <p className="text-sky-600"> {session?.user.name}</p>
+            <button className=" text-red-500" onClick={() => signOut()}>
+                Sign Out
+            </button>
+            </>
+            }
+        <ModeToggle />
         </nav>
     )
 }
\ No newline at end of file