From e138beb6a8836395576fbfbab3e7448604c49eaa Mon Sep 17 00:00:00 2001 From: charlesr332 <176316996+charlesr332@users.noreply.github.com> Date: Fri, 27 Feb 2026 14:34:50 -0500 Subject: [PATCH 1/2] Add profile picture to navbar --- app/components/Navbar.tsx | 115 ++++++++++++++++++++++++++----- app/upload/page.tsx | 2 +- app/user-page/page.tsx | 2 +- components/login/LoginBody.tsx | 2 +- components/signup/SignUpBody.tsx | 2 +- lib/auth.ts | 12 +++- prisma/schema.prisma | 1 - public/imgs/default-profile.png | Bin 0 -> 13816 bytes public/imgs/user-stock.png | Bin 1156 -> 0 bytes types/next-auth.d.ts | 21 ++++++ 10 files changed, 133 insertions(+), 24 deletions(-) create mode 100644 public/imgs/default-profile.png delete mode 100644 public/imgs/user-stock.png diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 569afac..cef522a 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -1,23 +1,39 @@ "use client"; -import { useState } from "react"; +import { useState, useRef, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import { usePathname } from "next/navigation"; -import { Menu, X } from "lucide-react"; +import { Menu, X, ChevronDown } from "lucide-react"; +import { useSession, signOut } from 'next-auth/react'; const Navbar = () => { const pathname = usePathname(); const [isOpen, setIsOpen] = useState(false); + const [isProfileOpen, setIsProfileOpen] = useState(false); + const { data: session } = useSession(); + const profileRef = useRef(null); + + // Close profile dropdown when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (profileRef.current && !profileRef.current.contains(event.target as Node)) { + setIsProfileOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); const linkClasses = (path: string) => - `px-4 py-2 text-base font-normal transition-colors duration-200 ${ + `px-4 py-2 text-base font-medium transition-all duration-300 ${ pathname === path - ? "underline decoration-2 underline-offset-4 text-black" - : "text-black hover:text-afh-orange" + ? "underline decoration-2 underline-offset-4 text-afh-blue" + : "text-afh-blue hover:text-afh-orange" }`; return ( -