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 isLanding = pathname === "/"
const isAuthRoute = pathname.startsWith("/login") || pathname.startsWith("/signup") || pathname.startsWith("/forgot-password") || pathname.startsWith("/reset-password")
const [searchQuery, setSearchQuery] = useState(
() => searchParams.get("q") || "",
@@ -117,11 +118,19 @@ export default function Navbar() {
(route) => route.href !== "/" && route.href !== "/search",
)
// Hide navbar on auth routes
if (isAuthRoute) {
return null
}
return (
<>
<AnimatePresence>
<motion.nav
key='navbar'
initial={{ opacity: 0, y: "-100%" }}
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'
>
<Link
@@ -178,7 +187,8 @@ export default function Navbar() {
onClick={() => {
setSearchQuery("")
if (!isLanding) {
const params = new URLSearchParams(
const params =
new URLSearchParams(
searchParams.toString(),
)
params.delete("q")
@@ -213,7 +223,10 @@ export default function Navbar() {
{route.title}
</Link>
))}
<AnimatePresence mode='popLayout' initial={false}>
<AnimatePresence
mode='popLayout'
initial={false}
>
{isSessionLoading ? (
<motion.li
key='loading-placeholder'
@@ -234,23 +247,23 @@ export default function Navbar() {
onClick={() =>
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 ? (
<Image
src={session.user.image}
alt=''
width={28}
height={28}
width={20}
height={20}
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'>
<User className='h-3.5 w-3.5 text-text' />
<div className='h-5 w-5 rounded-full bg-secondary flex items-center justify-center'>
<User className='h-3 w-3 text-text' />
</div>
)}
<span className='text-sm text-text max-w-25 truncate'>
<span className='max-w-25 truncate'>
{session.user.name}
</span>
</button>
@@ -304,6 +317,7 @@ export default function Navbar() {
<MenuIcon className='h-5 w-5' />
</button>
</motion.nav>
</AnimatePresence>
{/* Mobile Sidebar Overlay */}
<AnimatePresence>