Skip to content

Commit 5205921

Browse files
adanrsantosadanrsantos
authored
Merge pull request #55 from acmutsa/fix-nav-bar-loading
Add SignOut button and update navigation/logout logic
2 parents b44e67b + abf87bc commit 5205921

File tree

3 files changed

+122
-123
lines changed

3 files changed

+122
-123
lines changed

‎src/components/SignOut.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import { authClient } from "@/lib/auth-client";
5+
import { useRouter } from "next/navigation";
6+
7+
export default function LogoutButton() {
8+
const router = useRouter();
9+
const handleLogout = async () => {
10+
await authClient.signOut();
11+
router.push("/sign-in");
12+
router.refresh();
13+
};
14+
15+
return (
16+
<Button
17+
onClick={handleLogout}
18+
className="text-lg px-4 py-2 border border-border"
19+
>
20+
Logout
21+
</Button>
22+
);
23+
}

‎src/components/auth/signin.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export default function SignIn() {
3232
return;
3333
} else {
3434
toast.success(result.message)
35-
router.push("/home")
35+
router.push("/home");
36+
router.refresh();
3637
}
3738
}
3839

‎src/components/navbar.tsx‎

Lines changed: 97 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
"use client";
21
import Link from "next/link";
2+
import LogoutButton from "./SignOut";
3+
import { headers } from "next/headers"
34
import {
45
DropdownMenu,
56
DropdownMenuTrigger,
@@ -10,146 +11,120 @@ import {
1011
} from "@/components/ui/dropdown-menu";
1112
import { Button } from "@/components/ui/button";
1213
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
13-
import { authClient } from "@/lib/auth-client";
14-
const { useSession, signOut } = authClient;
14+
import { auth } from "@/lib/auth";
1515

16-
export default function Navigation() {
17-
const { data: session } = useSession();
16+
export default async function Navigation() {
17+
const h = await headers();
18+
const session = await auth.api.getSession({
19+
headers: h,
20+
});
1821
const user = session?.user;
1922
const isSignedIn = Boolean(user);
2023
const avatarSrc = user?.image ?? "/user.png";
2124
const displayName = user?.name ?? "User";
2225
const email = user?.email ?? "";
2326

24-
const handleSignOut = async () => {
25-
try {
26-
await signOut();
27-
} catch (error) {
28-
console.error("Failed to sign out", error);
29-
}
30-
};
31-
3227
return (
33-
<div className="p-5" >
34-
<nav className="bg-background w-full flex justify-between items-center px-10 py-6 rounded-md border border-border text-foreground">
28+
<div className="w-full p-2 md:p-5">
29+
<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">
3530
{/* Logo */}
3631
<Link href="/">
37-
<h1 className="text-3xl font-bold hover:text-primary transition-colors">
32+
<h1 className="text-xl md:text-3xl font-bold hover:text-primary transition-colors">
3833
ACM Learn
3934
</h1>
4035
</Link>
41-
4236
{/* Navigation Links */}
43-
<ul className="flex items-center gap-8 font-semibold text-lg">
44-
<li>
45-
<Button className="text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
46-
<Link
47-
href="/explore"
48-
49-
>Explore</Link>
50-
</Button>
51-
</li>
52-
<li>
53-
<Button className=" text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
54-
<Link
55-
href="/categories"
56-
57-
>
58-
Categories
59-
</Link>
60-
</Button>
61-
</li>
37+
<ul className="flex items-center gap-0 md:gap-8 font-semibold">
6238
{isSignedIn && user ? (
6339
<>
64-
65-
<li>
66-
<Button
67-
className="text-lg px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground"
68-
onClick={handleSignOut}
69-
>
70-
Logout
71-
</Button>
72-
</li>
73-
{/* Profile Pic Placeholder */}
74-
<li>
75-
<DropdownMenu>
76-
<DropdownMenuTrigger asChild>
77-
<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">
78-
<AvatarImage
79-
src={avatarSrc}
80-
alt={displayName}
81-
82-
className="object-cover w-full h-full"
83-
/>
84-
<AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
85-
</Avatar>
86-
</DropdownMenuTrigger>
87-
<DropdownMenuContent align="end" className="w-56">
88-
<DropdownMenuLabel>
89-
<p className="font-semibold">{displayName}</p>
90-
{email && <p className="text-sm text-gray-500">{email}</p>}
91-
</DropdownMenuLabel>
92-
<DropdownMenuSeparator />
93-
<DropdownMenuItem asChild>
94-
<Link href="/profile">Profile</Link>
95-
</DropdownMenuItem>
96-
<DropdownMenuItem asChild>
97-
<Link href="/courses">My Courses</Link>
98-
</DropdownMenuItem>
99-
<DropdownMenuItem asChild>
100-
<Link href="/history">History</Link>
101-
</DropdownMenuItem>
102-
<DropdownMenuSeparator />
103-
<DropdownMenuItem asChild>
104-
<button className="text-red-600" onClick={handleSignOut}>
105-
Logout
106-
</button>
107-
</DropdownMenuItem>
108-
</DropdownMenuContent>
109-
</DropdownMenu>
110-
</li>
111-
</>
40+
<li>
41+
<Button className="text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
42+
<Link
43+
href="/explore"
44+
>Explore</Link>
45+
</Button>
46+
</li>
47+
<li>
48+
<Button className=" text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
49+
<Link href="/categories">Categories</Link>
50+
</Button>
51+
</li>
52+
<li>
53+
<DropdownMenu>
54+
<DropdownMenuTrigger asChild>
55+
<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">
56+
<AvatarImage
57+
src={avatarSrc}
58+
alt={displayName}
59+
className="object-cover w-full h-full"
60+
/>
61+
<AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
62+
</Avatar>
63+
</DropdownMenuTrigger>
64+
<DropdownMenuContent align="end" className="w-56">
65+
<DropdownMenuLabel>
66+
<p className="font-semibold">{displayName}</p>
67+
{email && <p className="text-sm text-gray-500">{email}</p>}
68+
</DropdownMenuLabel>
69+
<DropdownMenuSeparator />
70+
<DropdownMenuItem asChild>
71+
<Link href="/profile">Profile</Link>
72+
</DropdownMenuItem>
73+
<DropdownMenuItem asChild>
74+
<Link href="/courses">My Courses</Link>
75+
</DropdownMenuItem>
76+
<DropdownMenuItem asChild>
77+
<Link href="/history">History</Link>
78+
</DropdownMenuItem>
79+
<DropdownMenuSeparator />
80+
<DropdownMenuItem>
81+
<LogoutButton />
82+
</DropdownMenuItem>
83+
</DropdownMenuContent>
84+
</DropdownMenu>
85+
</li>
86+
</>
11287
) : (
11388
<>
114-
<li>
115-
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
116-
<Link
117-
href="/sign-in"
118-
>
119-
Sign in
120-
</Link>
121-
</Button>
122-
123-
</li>
124-
<li>
125-
<DropdownMenu>
126-
<DropdownMenuTrigger asChild>
127-
<Avatar className="block w-12 h-12 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-300">
128-
<AvatarImage
129-
src={ "/user.png"}
130-
alt="Guest profile"
131-
width={48}
132-
height={48}
133-
className="object-cover w-full h-full"
134-
/>
135-
</Avatar>
136-
</DropdownMenuTrigger>
137-
<DropdownMenuContent align="end" className="w-auto">
138-
<DropdownMenuItem asChild className="">
139-
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
140-
<Link
141-
href="/sign-in"
142-
>
143-
Sign in
144-
</Link>
145-
</Button>
146-
</DropdownMenuItem>
147-
</DropdownMenuContent>
148-
</DropdownMenu>
149-
</li>
150-
</>
89+
<li className="hidden md:flex">
90+
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
91+
<Link href="/sign-in">Sign in</Link>
92+
</Button>
93+
</li>
94+
<li className="hidden md:flex">
95+
<Button variant={"outline"} className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
96+
<Link href="/sign-up">Sign Up</Link>
97+
</Button>
98+
</li>
99+
<li>
100+
<DropdownMenu>
101+
<DropdownMenuTrigger asChild>
102+
<Avatar className="block w-12 h-12 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-300">
103+
<AvatarImage
104+
src={"/user.png"}
105+
alt="Guest profile"
106+
width={48}
107+
height={48}
108+
className="object-cover w-full h-full"
109+
/>
110+
</Avatar>
111+
</DropdownMenuTrigger>
112+
<DropdownMenuContent align="end" className="flex flex-col gap-2 py-2">
113+
<DropdownMenuItem asChild>
114+
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
115+
<Link href="/sign-in">Sign in</Link>
116+
</Button>
117+
</DropdownMenuItem>
118+
<DropdownMenuItem asChild>
119+
<Button variant={"outline"} className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
120+
<Link href="/sign-up">Sign Up</Link>
121+
</Button>
122+
</DropdownMenuItem>
123+
</DropdownMenuContent>
124+
</DropdownMenu>
125+
</li>
126+
</>
151127
)}
152-
153128
</ul>
154129
</nav>
155130
</div>

0 commit comments

Comments
 (0)