Skip to content

Commit abf87bc

Browse files
adanrsantosadanrsantos
committed
everything looked good just touchedup issue with asChild
1 parent 07ee226 commit abf87bc

File tree

3 files changed

+95
-114
lines changed

3 files changed

+95
-114
lines changed

‎src/components/SignOut.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { useRouter } from "next/navigation";
77
export default function LogoutButton() {
88
const router = useRouter();
99
const handleLogout = async () => {
10-
await authClient.signOut();
11-
router.refresh();
12-
window.location.href = "/sign-in";
13-
};
14-
10+
await authClient.signOut();
11+
router.push("/sign-in");
12+
router.refresh();
13+
};
14+
1515
return (
1616
<Button
1717
onClick={handleLogout}

‎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-
window.location.href = "/home";
35+
router.push("/home");
36+
router.refresh();
3637
}
3738
}
3839

‎src/components/navbar.tsx‎

Lines changed: 88 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import Link from "next/link";
32
import LogoutButton from "./SignOut";
43
import { headers } from "next/headers"
@@ -14,7 +13,6 @@ import { Button } from "@/components/ui/button";
1413
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
1514
import { auth } from "@/lib/auth";
1615

17-
1816
export default async function Navigation() {
1917
const h = await headers();
2018
const session = await auth.api.getSession({
@@ -27,124 +25,106 @@ export default async function Navigation() {
2725
const email = user?.email ?? "";
2826

2927
return (
30-
<div className="p-5" >
31-
<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">
3230
{/* Logo */}
3331
<Link href="/">
34-
<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">
3533
ACM Learn
3634
</h1>
3735
</Link>
38-
3936
{/* Navigation Links */}
40-
<ul className="flex items-center gap-8 font-semibold text-lg">
41-
<li>
42-
<Button className="text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
43-
<Link
44-
href="/explore"
45-
46-
>Explore</Link>
47-
</Button>
48-
</li>
49-
<li>
50-
<Button className=" text-lg pr-5 bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
51-
<Link
52-
href="/categories"
53-
54-
>
55-
Categories
56-
</Link>
57-
</Button>
58-
</li>
37+
<ul className="flex items-center gap-0 md:gap-8 font-semibold">
5938
{isSignedIn && user ? (
6039
<>
61-
62-
<li>
63-
<>
64-
<LogoutButton /> {/* CLIENT BUTTON */}
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>
6586
</>
66-
67-
</li>
68-
{/* Profile Pic Placeholder */}
69-
<li>
70-
<DropdownMenu>
71-
<DropdownMenuTrigger asChild>
72-
<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">
73-
<AvatarImage
74-
src={avatarSrc}
75-
alt={displayName}
76-
77-
className="object-cover w-full h-full"
78-
/>
79-
<AvatarFallback>{displayName.charAt(0).toUpperCase()}</AvatarFallback>
80-
</Avatar>
81-
</DropdownMenuTrigger>
82-
<DropdownMenuContent align="end" className="w-56">
83-
<DropdownMenuLabel>
84-
<p className="font-semibold">{displayName}</p>
85-
{email && <p className="text-sm text-gray-500">{email}</p>}
86-
</DropdownMenuLabel>
87-
<DropdownMenuSeparator />
88-
<DropdownMenuItem asChild>
89-
<Link href="/profile">Profile</Link>
90-
</DropdownMenuItem>
91-
<DropdownMenuItem asChild>
92-
<Link href="/courses">My Courses</Link>
93-
</DropdownMenuItem>
94-
<DropdownMenuItem asChild>
95-
<Link href="/history">History</Link>
96-
</DropdownMenuItem>
97-
<DropdownMenuSeparator />
98-
<DropdownMenuItem asChild>
99-
<>
100-
<LogoutButton /> {/* CLIENT BUTTON */}
101-
</>
102-
</DropdownMenuItem>
103-
</DropdownMenuContent>
104-
</DropdownMenu>
105-
</li>
106-
</>
10787
) : (
10888
<>
109-
<li>
110-
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
111-
<Link
112-
href="/sign-in"
113-
>
114-
Sign in
115-
</Link>
116-
</Button>
117-
118-
</li>
119-
<li>
120-
<DropdownMenu>
121-
<DropdownMenuTrigger asChild>
122-
<Avatar className="block w-12 h-12 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-300">
123-
<AvatarImage
124-
src={ "/user.png"}
125-
alt="Guest profile"
126-
width={48}
127-
height={48}
128-
className="object-cover w-full h-full"
129-
/>
130-
</Avatar>
131-
</DropdownMenuTrigger>
132-
<DropdownMenuContent align="end" className="w-auto">
133-
<DropdownMenuItem asChild className="">
134-
<Button className="px-4 py-2 border border-border rounded-md transition-all duration-300 hover:bg-muted hover:text-foreground">
135-
<Link
136-
href="/sign-in"
137-
>
138-
Sign in
139-
</Link>
140-
</Button>
141-
</DropdownMenuItem>
142-
</DropdownMenuContent>
143-
</DropdownMenu>
144-
</li>
145-
</>
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+
</>
146127
)}
147-
148128
</ul>
149129
</nav>
150130
</div>

0 commit comments

Comments
 (0)