Skip to content

Add SignOut button and update navigation/logout logic #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adanrsantos merged 2 commits into from
Nov 24, 2025
Merged

Add SignOut button and update navigation/logout logic #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07ee226
Add SignOut button and update navigation/logout logic
Jaime1108 Nov 24, 2025
abf87bc
everything looked good just touchedup issue with asChild
adanrsantos Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/components/SignOut.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
"use client";

import { Button } from "@/components/ui/button";
import { authClient } from "@/lib/auth-client";
import { useRouter } from "next/navigation";

export default function LogoutButton() {
const router = useRouter();
const handleLogout = async () => {
await authClient.signOut();
router.push("/sign-in");
router.refresh();
};

return (
<Button
onClick={handleLogout}
className="text-lg px-4 py-2 border border-border"
>
Logout
</Button>
);
}
3 changes: 2 additions & 1 deletion src/components/auth/signin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export default function SignIn() {
return;
} else {
toast.success(result.message)
router.push("/home")
router.push("/home");
router.refresh();
}
}

Expand Down
219 changes: 97 additions & 122 deletions src/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";
import Link from "next/link";
import LogoutButton from "./SignOut";
import { headers } from "next/headers"
import {
DropdownMenu,
DropdownMenuTrigger,
Expand All @@ -10,146 +11,120 @@ import {
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { authClient } from "@/lib/auth-client";
const { useSession, signOut } = authClient;
import { auth } from "@/lib/auth";

export default function Navigation() {
const { data: session } = useSession();
export default async function Navigation() {
const h = await headers();
const session = await auth.api.getSession({
headers: h,
});
const user = session?.user;
const isSignedIn = Boolean(user);
const avatarSrc = user?.image ?? "/user.png";
const displayName = user?.name ?? "User";
const email = user?.email ?? "";

const handleSignOut = async () => {
try {
await signOut();
} catch (error) {
console.error("Failed to sign out", error);
}
};

return (
<div className="p-5" >
<nav className="bg-background w-full flex justify-between items-center px-10 py-6 rounded-md border border-border text-foreground">
<div className="w-full p-2 md:p-5">
<nav className="bg-background w-full flex justify-between items-center px-4 md:px-8 py-2 rounded-md border border-border text-foreground">
{/* Logo */}
<Link href="/">
<h1 className="text-3xl font-bold hover:text-primary transition-colors">
<h1 className="text-xl md:text-3xl font-bold hover:text-primary transition-colors">
ACM Learn
</h1>
</Link>

{/* Navigation Links */}
<ul className="flex items-center gap-8 font-semibold text-lg">
<li>
<Button className="text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
<Link
href="/explore"

>Explore</Link>
</Button>
</li>
<li>
<Button className=" text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
<Link
href="/categories"

>
Categories
</Link>
</Button>
</li>
<ul className="flex items-center gap-0 md:gap-8 font-semibold">
{isSignedIn && user ? (
<>

<li>
<Button
className="text-lg px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground"
onClick={handleSignOut}
>
Logout
</Button>
</li>
{/* Profile Pic Placeholder */}
<li>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar className="w-12 h-12 border-2 border-white rounded-full overflow-hidden transition-all duration-300 hover:border-blue-300 hover:drop-shadow-[1px_1px_40px_rgba(255,215,100,1)] cursor-pointer">
<AvatarImage
src={avatarSrc}
alt={displayName}

className="object-cover w-full h-full"
/>
<AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>
<p className="font-semibold">{displayName}</p>
{email && <p className="text-sm text-gray-500">{email}</p>}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">Profile</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/courses">My Courses</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/history">History</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<button className="text-red-600" onClick={handleSignOut}>
Logout
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
</>
<li>
<Button className="text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
<Link
href="/explore"
>Explore</Link>
</Button>
</li>
<li>
<Button className=" text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
<Link href="/categories">Categories</Link>
</Button>
</li>
<li>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar className="w-12 h-12 border-2 border-white rounded-full overflow-hidden transition-all duration-300 hover:border-blue-300 hover:drop-shadow-[1px_1px_40px_rgba(255,215,100,1)] cursor-pointer">
<AvatarImage
src={avatarSrc}
alt={displayName}
className="object-cover w-full h-full"
/>
<AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>
<p className="font-semibold">{displayName}</p>
{email && <p className="text-sm text-gray-500">{email}</p>}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">Profile</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/courses">My Courses</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/history">History</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogoutButton />
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
</>
) : (
<>
<li>
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link
href="/sign-in"
>
Sign in
</Link>
</Button>

</li>
<li>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar className="block w-12 h-12 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-300">
<AvatarImage
src={ "/user.png"}
alt="Guest profile"
width={48}
height={48}
className="object-cover w-full h-full"
/>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-auto">
<DropdownMenuItem asChild className="">
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link
href="/sign-in"
>
Sign in
</Link>
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
</>
<li className="hidden md:flex">
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link href="/sign-in">Sign in</Link>
</Button>
</li>
<li className="hidden md:flex">
<Button variant={"outline"} className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link href="/sign-up">Sign Up</Link>
</Button>
</li>
<li>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar className="block w-12 h-12 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-300">
<AvatarImage
src={"/user.png"}
alt="Guest profile"
width={48}
height={48}
className="object-cover w-full h-full"
/>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="flex flex-col gap-2 py-2">
<DropdownMenuItem asChild>
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link href="/sign-in">Sign in</Link>
</Button>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Button variant={"outline"} className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
<Link href="/sign-up">Sign Up</Link>
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
</>
)}

</ul>
</nav>
</div>
Expand Down