feat: simplify desktop navbar auth to Profile dropdown
This commit is contained in:
+19
-11
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user