adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: align navbar profile button styling with other nav links

Browse Source
This commit is contained in:
adrianbonpin
2026-04-26 08:03:50 -05:00
parent 8dfbd3ca5e
commit a49e0d8ff0
1 changed files with 188 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/navbar.tsx
+23 -9
View File
@@ -18,6 +18,7 @@ export default function Navbar() {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const isLanding = pathname === "/" const isLanding = pathname === "/"
const isAuthRoute = pathname.startsWith("/login") || pathname.startsWith("/signup") || pathname.startsWith("/forgot-password") || pathname.startsWith("/reset-password")
const [searchQuery, setSearchQuery] = useState( const [searchQuery, setSearchQuery] = useState(
() => searchParams.get("q") || "", () => searchParams.get("q") || "",
@@ -117,11 +118,19 @@ export default function Navbar() {
(route) => route.href !== "/" && route.href !== "/search", (route) => route.href !== "/" && route.href !== "/search",
) )
// Hide navbar on auth routes
if (isAuthRoute) {
return null
}
return ( return (
<> <>
<AnimatePresence>
<motion.nav <motion.nav
key='navbar'
initial={{ opacity: 0, y: "-100%" }} initial={{ opacity: 0, y: "-100%" }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "-100%" }}
className='w-full flex flex-row px-4 md:px-[10svw] py-2 items-center gap-4 md:gap-8 justify-between border-b border-border sticky top-0 z-50 backdrop-blur-sm bg-background/80' className='w-full flex flex-row px-4 md:px-[10svw] py-2 items-center gap-4 md:gap-8 justify-between border-b border-border sticky top-0 z-50 backdrop-blur-sm bg-background/80'
> >
<Link <Link
@@ -178,7 +187,8 @@ export default function Navbar() {
onClick={() => { onClick={() => {
setSearchQuery("") setSearchQuery("")
if (!isLanding) { if (!isLanding) {
const params = new URLSearchParams( const params =
new URLSearchParams(
searchParams.toString(), searchParams.toString(),
) )
params.delete("q") params.delete("q")
@@ -213,7 +223,10 @@ export default function Navbar() {
{route.title} {route.title}
</Link> </Link>
))} ))}
<AnimatePresence mode='popLayout' initial={false}> <AnimatePresence
mode='popLayout'
initial={false}
>
{isSessionLoading ? ( {isSessionLoading ? (
<motion.li <motion.li
key='loading-placeholder' key='loading-placeholder'
@@ -234,23 +247,23 @@ export default function Navbar() {
onClick={() => onClick={() =>
setUserMenuOpen(!userMenuOpen) setUserMenuOpen(!userMenuOpen)
} }
className='flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/5 transition-colors' className='flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors uppercase'
> >
{session.user.image ? ( {session.user.image ? (
<Image <Image
src={session.user.image} src={session.user.image}
alt='' alt=''
width={28} width={20}
height={28} height={20}
unoptimized unoptimized
className='h-7 w-7 rounded-full' className='h-5 w-5 rounded-full'
/> />
) : ( ) : (
<div className='h-7 w-7 rounded-full bg-secondary flex items-center justify-center'> <div className='h-5 w-5 rounded-full bg-secondary flex items-center justify-center'>
<User className='h-3.5 w-3.5 text-text' /> <User className='h-3 w-3 text-text' />
</div> </div>
)} )}
<span className='text-sm text-text max-w-25 truncate'> <span className='max-w-25 truncate'>
{session.user.name} {session.user.name}
</span> </span>
</button> </button>
@@ -304,6 +317,7 @@ export default function Navbar() {
<MenuIcon className='h-5 w-5' /> <MenuIcon className='h-5 w-5' />
</button> </button>
</motion.nav> </motion.nav>
</AnimatePresence>
{/* Mobile Sidebar Overlay */} {/* Mobile Sidebar Overlay */}
<AnimatePresence> <AnimatePresence>