Fix: Resolve dropdown conflicts between search and profile menus

frontend/src/App.jsx

@@ -17,6 +17,7 @@ import { AuthProvider } from './context/AuthProvider';
 import { useAuth } from './hooks/useAuth';
 import { SocketProvider } from './context/SocketProvider';
 import { ThemeProvider } from './context/ThemeProvider';
+import EmailVerificationPrompt from './components/EmailVerificationPrompt';
 import AppLayout from './components/AppLayout';
 import Footer from './components/ui/Footer';
 
@@ -151,10 +152,14 @@ function ProtectedRoute({ children }) {
   }
 
   if (!user) {
-    return <Navigate to="/login" replace />;
-  }
+  return <Navigate to="/login" replace />;
+}
+
+if (!user.emailVerified) {
+  return <EmailVerificationPrompt />;
+}
 
-  return <AppLayout>{children}</AppLayout>;
+return <AppLayout>{children}</AppLayout>;
 }
 
 

frontend/src/components/EmailVerificationPrompt.jsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { sendEmailVerification } from "firebase/auth";
+import { useAuth } from "../hooks/useAuth";
+import { useNavigate } from "react-router-dom";
+
+export default function EmailVerificationPrompt() {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const resendEmail = async () => {
+    try {
+      setLoading(true);
+
+      await sendEmailVerification(user);
+
+      setMessage("Verification email sent successfully.");
+    } catch (error) {
+      setMessage(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  const checkVerification = async () => {
+    try {
+      await user.reload();
+
+      if (user.emailVerified) {
+        navigate("/dashboard");
+      } else {
+        setMessage("Email is still not verified.");
+      }
+
+    } catch (error) {
+      setMessage(error.message);
+    }
+  };
+
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="max-w-md text-center p-6 rounded-lg border">
+
+        <h1 className="text-2xl font-bold mb-4">
+          Verify your email
+        </h1>
+
+        <p className="mb-6">
+          We sent a verification link to:
+        </p>
+
+        <strong>
+          {user?.email}
+        </strong>
+
+        <div className="mt-6 flex flex-col gap-3">
+
+          <button
+            onClick={resendEmail}
+            disabled={loading}
+          >
+            {loading ? "Sending..." : "Resend verification email"}
+          </button>
+
+
+          <button
+            onClick={checkVerification}
+          >
+            I've verified, continue
+          </button>
+
+        </div>
+
+
+        {message && (
+          <p className="mt-4">
+            {message}
+          </p>
+        )}
+
+      </div>
+    </div>
+  );
+}

frontend/src/components/Navbar.jsx

@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { useAuth } from '../hooks/useAuth'
 import { useTheme } from '../hooks/useTheme'
 import { motion, AnimatePresence } from 'framer-motion'
+import useClickOutside from '../hooks/useClickOutside'
 import {
   Search,
   FileText,
@@ -33,19 +34,44 @@ export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [scrolled, setScrolled] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
-  const [showDropdown, setShowDropdown] = useState(false)
+
+  // DECOUPLED STATES - Replaced single showDropdown with two distinct states
+  const [searchDropdownOpen, setSearchDropdownOpen] = useState(false)
+  const [profileDropdownOpen, setProfileDropdownOpen] = useState(false)
+
   const [notificationCount] = useState(3)
 
+  // Refs for click outside handling
+  const searchRef = useRef(null)
+  const profileRef = useRef(null)
+
+  // Use custom hooks for outside click detection
+  useClickOutside(searchRef, () => setSearchDropdownOpen(false))
+  useClickOutside(profileRef, () => setProfileDropdownOpen(false))
+
   useEffect(() => {
     const handleScroll = () => {
-      setScrolled(window.scrollY>20)
+      setScrolled(window.scrollY > 20)
     }
 
     window.addEventListener('scroll', handleScroll)
 
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  // Handle Escape key to close both dropdowns
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape') {
+        setSearchDropdownOpen(false)
+        setProfileDropdownOpen(false)
+      }
+    }
+
+    window.addEventListener('keydown', handleEscape)
+    return () => window.removeEventListener('keydown', handleEscape)
+  }, [])
+
   const handleLogout = async () => {
     try {
       await logout()
@@ -70,6 +96,17 @@ export default function Navbar() {
     }
   }
 
+  // Mutual exclusion handlers
+  const openProfileDropdown = () => {
+    setProfileDropdownOpen(true)
+    setSearchDropdownOpen(false) // Close search dropdown if open
+  }
+
+  const openSearchDropdown = () => {
+    setSearchDropdownOpen(true)
+    setProfileDropdownOpen(false) // Close profile dropdown if open
+  }
+
   const isActive = (path) => location.pathname === path
 
   const publicLinks = [
@@ -131,8 +168,8 @@ export default function Navbar() {
           {/* Desktop Navigation */}
           <div className="hidden lg:flex items-center gap-2">
 
-            {/* Search Bar */}
-            <div className="relative">
+            {/* Search Bar - with ref and decoupled state */}
+            <div className="relative" ref={searchRef}>
               <div className="flex items-center bg-muted border border-border rounded-xl px-3 py-2 w-72 focus-within:ring-2 focus-within:ring-primary/40 transition-all">
                 <Search className="w-4 h-4 text-muted-foreground mr-2" />
 
@@ -141,20 +178,34 @@ export default function Navbar() {
                   placeholder="Search anything..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  onFocus={() => setShowDropdown(true)}
-                  onBlur={() => setTimeout(() => setShowDropdown(false), 200)}
+                  onFocus={() => {
+                    if (searchBlurTimeoutRef.current) {
+                      clearTimeout(searchBlurTimeoutRef.current)
+                      searchBlurTimeoutRef.current = null
+                    }
+                    openSearchDropdown()
+                  }}
+                  onBlur={() => {
+                    if (searchBlurTimeoutRef.current) {
+                      clearTimeout(searchBlurTimeoutRef.current)
+                    }
+                    searchBlurTimeoutRef.current = setTimeout(() => {
+                      setSearchDropdownOpen(false)
+                      searchBlurTimeoutRef.current = null
+                    }, 200)
+                  }}
                   className="bg-transparent outline-none text-sm w-full text-foreground placeholder:text-muted-foreground"
                 />
               </div>
 
-              {/* Suggestions Dropdown */}
+              {/* Search Suggestions Dropdown - uses searchDropdownOpen only */}
               <AnimatePresence>
-                {showDropdown && (
+                {searchDropdownOpen && (
                   <motion.div
                     initial={{ opacity: 0, y: 8 }}
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0, y: 8 }}
-                    className="absolute top-14 left-0 w-full bg-background border border-border rounded-xl shadow-xl overflow-hidden"
+                    className="absolute top-14 left-0 w-full bg-background border border-border rounded-xl shadow-xl overflow-hidden z-50"
                   >
                     {searchSuggestions.map((item, index) => (
                       <button
@@ -240,13 +291,13 @@ export default function Navbar() {
                   )}
                 </button>
 
-                {/* User Dropdown */}
-                <div className="relative">
+                {/* User Profile Dropdown - with ref and decoupled state */}
+                <div className="relative" ref={profileRef}>
                   <button
-                    onClick={() => setShowDropdown(!showDropdown)}
+                    onClick={() => openProfileDropdown()}
                     className="flex items-center gap-2 px-3 py-2 bg-muted border border-border rounded-full hover:bg-accent transition-all"
                     aria-label="User menu"
-                    aria-expanded={showDropdown}
+                    aria-expanded={profileDropdownOpen}
                   >
                     <div className="w-8 h-8 rounded-full overflow-hidden bg-primary/20 flex items-center justify-center">
                       <img
@@ -263,17 +314,19 @@ export default function Navbar() {
                     <ChevronDown className="w-4 h-4 text-muted-foreground" />
                   </button>
 
+                  {/* Profile Menu Dropdown - uses profileDropdownOpen only */}
                   <AnimatePresence>
-                    {showDropdown && (
+                    {profileDropdownOpen && (
                       <motion.div
                         initial={{ opacity: 0, y: 10 }}
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, y: 10 }}
-                        className="absolute right-0 top-14 w-52 bg-background border border-border rounded-2xl shadow-xl overflow-hidden"
+                        className="absolute right-0 top-14 w-52 bg-background border border-border rounded-2xl shadow-xl overflow-hidden z-50"
                       >
                         <Link
                           to="/profile"
                           className="flex items-center gap-2 px-4 py-3 hover:bg-muted transition-colors text-sm"
+                          onClick={() => setProfileDropdownOpen(false)}
                         >
                           <User className="w-4 h-4" />
                           Profile
@@ -282,13 +335,17 @@ export default function Navbar() {
                         <Link
                           to="/settings"
                           className="flex items-center gap-2 px-4 py-3 hover:bg-muted transition-colors text-sm"
+                          onClick={() => setProfileDropdownOpen(false)}
                         >
                           <Palette className="w-4 h-4" />
                           Settings
                         </Link>
 
                         <button
-                          onClick={handleLogout}
+                          onClick={() => {
+                            handleLogout()
+                            setProfileDropdownOpen(false)
+                          }}
                           className="flex items-center gap-2 w-full px-4 py-3 text-left hover:bg-destructive/10 text-destructive transition-colors text-sm"
                         >
                           <LogOut className="w-4 h-4" />
@@ -396,9 +453,6 @@ export default function Navbar() {
                   </Link>
                 ))}
 
-
-
-
               {user ? (
                 <button
                   onClick={() => {
@@ -433,4 +487,4 @@ export default function Navbar() {
       </AnimatePresence>
     </nav>
   )
-}
+}

frontend/src/context/AuthProvider.jsx

@@ -6,7 +6,8 @@ import {
   signOut,
   GoogleAuthProvider,
   signInWithPopup,
-  updateProfile
+  updateProfile,
+  sendEmailVerification
 } from 'firebase/auth'
 import { auth } from '../config/firebase'
 import { AuthContext } from './AuthContext'
@@ -57,6 +58,9 @@ export function AuthProvider({ children }) {
   const signup = async (email, password, displayName) => {
     if (!auth) throw new Error("Authentication service is not configured. Please check your environment variables and authentication provider setup. Refer to the project setup documentation for configuration instructions.")
     const result = await createUserWithEmailAndPassword(auth, email, password)
+
+    await sendEmailVerification(result.user)
+
     if (displayName) {
       await updateProfile(result.user, { displayName })
     }

frontend/src/hooks/useClickOutside.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+
+/**
+ * Custom hook that triggers a callback when clicking outside of a referenced element
+ * @param {React.RefObject} ref - React ref object pointing to the element to monitor
+ * @param {Function} callback - Function to call when clicking outside
+ */
+const useClickOutside = (ref, callback) => {
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    }
+
+    // Add event listener when component mounts
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('touchstart', handleClickOutside)
+
+    // Cleanup event listeners when component unmounts
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('touchstart', handleClickOutside)
+    }
+  }, [ref, callback])
+}
+
+export default useClickOutside