From a49e0d8ff0cb4f9b37ccfd224a5f35a02ae07488 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sun, 26 Apr 2026 08:03:50 -0500
Subject: [PATCH] fix: align navbar profile button styling with other nav links

---
 components/navbar.tsx | 362 ++++++++++++++++++++++--------------------
 1 file changed, 188 insertions(+), 174 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 1611e58..255b960 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -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,193 +118,206 @@ export default function Navbar() {
         (route) => route.href !== "/" && route.href !== "/search",
     )
 
+    // Hide navbar on auth routes
+    if (isAuthRoute) {
+        return null
+    }
+
     return (
         <>
-            <motion.nav
-                initial={{ opacity: 0, y: "-100%" }}
-                animate={{ opacity: 1, y: 0 }}
-                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
-                    href='/'
-                    className='flex flex-row gap-2 items-center font-bold text-lg py-1 shrink-0'
+            <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'
                 >
-                    <Image
-                        src={logo}
-                        alt='DeckyVault Logo'
-                        className='h-6 my-1 w-auto'
-                    />
-                    {!isLanding && (
-                        <motion.span className='hidden md:inline-block'>
-                            DeckyVault
-                        </motion.span>
-                    )}
-                </Link>
+                    <Link
+                        href='/'
+                        className='flex flex-row gap-2 items-center font-bold text-lg py-1 shrink-0'
+                    >
+                        <Image
+                            src={logo}
+                            alt='DeckyVault Logo'
+                            className='h-6 my-1 w-auto'
+                        />
+                        {!isLanding && (
+                            <motion.span className='hidden md:inline-block'>
+                                DeckyVault
+                            </motion.span>
+                        )}
+                    </Link>
 
-                <AnimatePresence>
-                    {!isLanding && (
-                        <motion.label
-                            key='search-bar'
-                            layoutId='search-bar'
-                            initial={{ opacity: 0, scale: 0.95 }}
-                            animate={{ opacity: 1, scale: 1 }}
-                            exit={{ opacity: 0, scale: 0.95 }}
-                            transition={{ duration: 0.3 }}
-                            className={`flex flex-row items-center gap-2 flex-1 bg-text/5 px-2 py-1 rounded-md border placeholder:text-text/60 group transition-colors cursor-text ${
-                                isFocused || forceFocusStyles
-                                    ? "border-primary/80 ring-2 ring-primary/50 ring-offset-2 ring-offset-background"
-                                    : "border-border hover:border-border-active"
-                            }`}
-                        >
-                            <Gamepad2Icon
-                                className={`h-4 w-4 transition-colors shrink-0 ${
+                    <AnimatePresence>
+                        {!isLanding && (
+                            <motion.label
+                                key='search-bar'
+                                layoutId='search-bar'
+                                initial={{ opacity: 0, scale: 0.95 }}
+                                animate={{ opacity: 1, scale: 1 }}
+                                exit={{ opacity: 0, scale: 0.95 }}
+                                transition={{ duration: 0.3 }}
+                                className={`flex flex-row items-center gap-2 flex-1 bg-text/5 px-2 py-1 rounded-md border placeholder:text-text/60 group transition-colors cursor-text ${
                                     isFocused || forceFocusStyles
-                                        ? "stroke-accent"
-                                        : ""
+                                        ? "border-primary/80 ring-2 ring-primary/50 ring-offset-2 ring-offset-background"
+                                        : "border-border hover:border-border-active"
                                 }`}
-                            />
-                            <input
-                                ref={inputRef}
-                                type='text'
-                                placeholder='search by game or appid...'
-                                value={searchQuery}
-                                onChange={handleSearchChange}
-                                onKeyDown={handleKeyDown}
-                                onFocus={() => setIsFocused(true)}
-                                onBlur={() => setIsFocused(false)}
-                                className='flex-1 outline-none bg-transparent text-sm min-w-0'
-                            />
-                            <motion.button>
-                                <CircleXIcon
-                                    onClick={() => {
-                                        setSearchQuery("")
-                                        if (!isLanding) {
-                                            const params = new URLSearchParams(
-                                                searchParams.toString(),
-                                            )
-                                            params.delete("q")
-                                            router.replace(
-                                                `/search?${params.toString()}`,
-                                                {
-                                                    scroll: false,
-                                                },
-                                            )
-                                        }
-                                    }}
-                                    className={`h-3 w-3 transition-color cursor-default hover:stroke-accent transition-all ${
+                            >
+                                <Gamepad2Icon
+                                    className={`h-4 w-4 transition-colors shrink-0 ${
                                         isFocused || forceFocusStyles
-                                            ? "opacity-100"
-                                            : "opacity-0"
+                                            ? "stroke-accent"
+                                            : ""
                                     }`}
                                 />
-                            </motion.button>
-                        </motion.label>
-                    )}
-                </AnimatePresence>
-
-                {/* Desktop Navigation Links */}
-                <ul className='hidden md:flex flex-row items-center gap-6 shrink-0'>
-                    {navbarRoutes.map((route) => (
-                        <Link
-                            key={route.href}
-                            href={route.href}
-                            title={`Navigate to ${route.title}`}
-                            className='text-sm font-medium hover:text-primary transition-colors uppercase'
-                        >
-                            {route.title}
-                        </Link>
-                    ))}
-                    <AnimatePresence mode='popLayout' initial={false}>
-                        {isSessionLoading ? (
-                            <motion.li
-                                key='loading-placeholder'
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                                className='w-20 h-8 rounded-lg bg-white/3 animate-pulse'
-                            />
-                        ) : session ? (
-                            <motion.li
-                                key='dashboard-link'
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                                className='relative'
-                            >
-                                <button
-                                    onClick={() =>
-                                        setUserMenuOpen(!userMenuOpen)
-                                    }
-                                    className='flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/5 transition-colors'
-                                >
-                                    {session.user.image ? (
-                                        <Image
-                                            src={session.user.image}
-                                            alt=''
-                                            width={28}
-                                            height={28}
-                                            unoptimized
-                                            className='h-7 w-7 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>
-                                    )}
-                                    <span className='text-sm text-text max-w-25 truncate'>
-                                        {session.user.name}
-                                    </span>
-                                </button>
-                                {userMenuOpen && (
-                                    <>
-                                        <div
-                                            className='fixed inset-0 z-40'
-                                            onClick={() =>
-                                                setUserMenuOpen(false)
+                                <input
+                                    ref={inputRef}
+                                    type='text'
+                                    placeholder='search by game or appid...'
+                                    value={searchQuery}
+                                    onChange={handleSearchChange}
+                                    onKeyDown={handleKeyDown}
+                                    onFocus={() => setIsFocused(true)}
+                                    onBlur={() => setIsFocused(false)}
+                                    className='flex-1 outline-none bg-transparent text-sm min-w-0'
+                                />
+                                <motion.button>
+                                    <CircleXIcon
+                                        onClick={() => {
+                                            setSearchQuery("")
+                                            if (!isLanding) {
+                                                const params =
+                                                    new URLSearchParams(
+                                                        searchParams.toString(),
+                                                    )
+                                                params.delete("q")
+                                                router.replace(
+                                                    `/search?${params.toString()}`,
+                                                    {
+                                                        scroll: 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'>
-                                            <button
-                                                onClick={async () => {
-                                                    setUserMenuOpen(false)
-                                                    await authClient.signOut()
-                                                }}
-                                                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'
-                                            >
-                                                <LogOut className='h-4 w-4' />
-                                                Sign out
-                                            </button>
-                                        </div>
-                                    </>
-                                )}
-                            </motion.li>
-                        ) : (
-                            <motion.li
-                                key='sign-in-link'
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                            >
-                                <Link
-                                    href='/login'
-                                    className='text-sm font-medium hover:text-primary transition-colors uppercase'
-                                >
-                                    login
-                                </Link>
-                            </motion.li>
+                                        }}
+                                        className={`h-3 w-3 transition-color cursor-default hover:stroke-accent transition-all ${
+                                            isFocused || forceFocusStyles
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        }`}
+                                    />
+                                </motion.button>
+                            </motion.label>
                         )}
                     </AnimatePresence>
-                </ul>
 
-                {/* Mobile Hamburger Button */}
-                <button
-                    onClick={() => setMobileMenuOpen(true)}
-                    className='flex md:hidden flex-row items-center justify-center p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors'
-                    aria-label='Open menu'
-                >
-                    <MenuIcon className='h-5 w-5' />
-                </button>
-            </motion.nav>
+                    {/* Desktop Navigation Links */}
+                    <ul className='hidden md:flex flex-row items-center gap-6 shrink-0'>
+                        {navbarRoutes.map((route) => (
+                            <Link
+                                key={route.href}
+                                href={route.href}
+                                title={`Navigate to ${route.title}`}
+                                className='text-sm font-medium hover:text-primary transition-colors uppercase'
+                            >
+                                {route.title}
+                            </Link>
+                        ))}
+                        <AnimatePresence
+                            mode='popLayout'
+                            initial={false}
+                        >
+                            {isSessionLoading ? (
+                                <motion.li
+                                    key='loading-placeholder'
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    className='w-20 h-8 rounded-lg bg-white/3 animate-pulse'
+                                />
+                            ) : session ? (
+                                <motion.li
+                                    key='dashboard-link'
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    className='relative'
+                                >
+                                    <button
+                                        onClick={() =>
+                                            setUserMenuOpen(!userMenuOpen)
+                                        }
+                                        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={20}
+                                                height={20}
+                                                unoptimized
+                                                className='h-5 w-5 rounded-full'
+                                            />
+                                        ) : (
+                                            <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='max-w-25 truncate'>
+                                            {session.user.name}
+                                        </span>
+                                    </button>
+                                    {userMenuOpen && (
+                                        <>
+                                            <div
+                                                className='fixed inset-0 z-40'
+                                                onClick={() =>
+                                                    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'>
+                                                <button
+                                                    onClick={async () => {
+                                                        setUserMenuOpen(false)
+                                                        await authClient.signOut()
+                                                    }}
+                                                    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'
+                                                >
+                                                    <LogOut className='h-4 w-4' />
+                                                    Sign out
+                                                </button>
+                                            </div>
+                                        </>
+                                    )}
+                                </motion.li>
+                            ) : (
+                                <motion.li
+                                    key='sign-in-link'
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                >
+                                    <Link
+                                        href='/login'
+                                        className='text-sm font-medium hover:text-primary transition-colors uppercase'
+                                    >
+                                        login
+                                    </Link>
+                                </motion.li>
+                            )}
+                        </AnimatePresence>
+                    </ul>
+
+                    {/* Mobile Hamburger Button */}
+                    <button
+                        onClick={() => setMobileMenuOpen(true)}
+                        className='flex md:hidden flex-row items-center justify-center p-2 -mr-2 rounded-md hover:bg-text/5 transition-colors'
+                        aria-label='Open menu'
+                    >
+                        <MenuIcon className='h-5 w-5' />
+                    </button>
+                </motion.nav>
+            </AnimatePresence>
 
             {/* Mobile Sidebar Overlay */}
             <AnimatePresence>