feat: simplify desktop navbar auth to Profile dropdown

This commit is contained in:
2026-04-26 09:37:58 -05:00
parent 8692b9828f
commit af3ce06f5e
+19 -11
View File
@@ -10,7 +10,8 @@ import { routes } from "@/lib/routes"
import { usePathname, useRouter, useSearchParams } from "next/navigation" import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useDebounce } from "@/lib/hooks/useDebounce" import { useDebounce } from "@/lib/hooks/useDebounce"
import { authClient, useSession } from "@/lib/auth-client" import { authClient, useSession } from "@/lib/auth-client"
import { LogOut, User } from "lucide-react" import { LogOut, User, Bookmark } from "lucide-react"
import { authRoutes } from "@/lib/routes"
export default function Navbar() { export default function Navbar() {
const pathname = usePathname() const pathname = usePathname()
@@ -237,16 +238,14 @@ export default function Navbar() {
/> />
) : session ? ( ) : session ? (
<motion.li <motion.li
key='dashboard-link' key='profile-menu'
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className='relative' className='relative'
> >
<button <button
onClick={() => onClick={() => setUserMenuOpen(!userMenuOpen)}
setUserMenuOpen(!userMenuOpen)
}
className='flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors uppercase' className='flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors uppercase'
> >
{session.user.image ? ( {session.user.image ? (
@@ -263,19 +262,28 @@ export default function Navbar() {
<User className='h-3 w-3 text-text' /> <User className='h-3 w-3 text-text' />
</div> </div>
)} )}
<span className='max-w-25 truncate'> <span>Profile</span>
{session.user.name}
</span>
</button> </button>
{userMenuOpen && ( {userMenuOpen && (
<> <>
<div <div
className='fixed inset-0 z-40' className='fixed inset-0 z-40'
onClick={() => onClick={() => setUserMenuOpen(false)}
setUserMenuOpen(false)
}
/> />
<div className='absolute right-0 top-full mt-1 w-48 bg-[#1a1020] border border-white/10 rounded-lg shadow-lg z-50 py-1'> <div className='absolute right-0 top-full mt-1 w-48 bg-[#1a1020] border border-white/10 rounded-lg shadow-lg z-50 py-1'>
{authRoutes.map((route) => (
<Link
key={route.href}
href={route.href}
onClick={() => setUserMenuOpen(false)}
className='w-full flex items-center gap-2 px-3 py-2 text-sm text-text/70 hover:text-text hover:bg-text/5 transition-colors'
>
{route.icon === "User" && <User className='h-4 w-4' />}
{route.icon === "Bookmark" && <Bookmark className='h-4 w-4' />}
{route.title}
</Link>
))}
<div className='my-1 border-t border-white/10' />
<button <button
onClick={async () => { onClick={async () => {
setUserMenuOpen(false) setUserMenuOpen(false)