improve user profile dropdown UI in header

Author: Mishra-coder

frontend/src/App.jsx

@@ -6,8 +6,7 @@ import ProductDetail from './components/ProductDetail'
 import { ALL_PRODUCTS } from './data/products'
 import { motion, AnimatePresence } from 'framer-motion'
 import { X, ShoppingBag, Heart, User, Trash2 } from 'lucide-react'
-import { GoogleLogin } from '@react-oauth/google'
-import { jwtDecode } from 'jwt-decode'
+import { GoogleLogin, googleLogout } from '@react-oauth/google'
 
 function App() {
   const [selectedCategories, setSelectedCategories] = useState([]);
@@ -281,7 +280,8 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
               <div className="google-btn-wrap">
                 <GoogleLogin
                   onSuccess={(credentialResponse) => {
-                    const decoded = jwtDecode(credentialResponse.credential);
+                    const base64 = credentialResponse.credential.split('.')[1];
+                    const decoded = JSON.parse(atob(base64));
                     onLoginSuccess(decoded);
                     onClose();
                   }}

frontend/src/components/Header.jsx

@@ -4,6 +4,7 @@ import { Search, ShoppingCart, Heart, User, Menu, X } from 'lucide-react';
 const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav, loggedInUser, onLogout }) => {
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [showUserMenu, setShowUserMenu] = useState(false);
 
   return (
     <header className="sticky-header glass">
@@ -52,10 +53,25 @@ const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav
 
           <div className="user-actions">
             {loggedInUser ? (
-              <div className="user-profile-btn">
-                <img src={loggedInUser.picture} alt={loggedInUser.name} className="user-avatar" />
-                <span className="user-name">{loggedInUser.name.split(' ')[0]}</span>
-                <button className="logout-btn" onClick={onLogout}>Logout</button>
+              <div className="user-profile-wrap">
+                <button className="user-avatar-btn" onClick={() => setShowUserMenu(!showUserMenu)}>
+                  <img src={loggedInUser.picture} alt={loggedInUser.name} className="user-avatar" />
+                </button>
+                {showUserMenu && (
+                  <div className="user-dropdown">
+                    <div className="user-dropdown-info">
+                      <img src={loggedInUser.picture} alt={loggedInUser.name} className="user-avatar-lg" />
+                      <div>
+                        <p className="user-dropdown-name">{loggedInUser.name}</p>
+                        <p className="user-dropdown-email">{loggedInUser.email}</p>
+                      </div>
+                    </div>
+                    <hr className="dropdown-divider" />
+                    <button className="dropdown-logout" onClick={() => { onLogout(); setShowUserMenu(false); }}>
+                      Logout
+                    </button>
+                  </div>
+                )}
               </div>
             ) : (
               <button className="action-btn" title="Profile" onClick={() => onOpenOverlay('login')}>

frontend/src/index.css

@@ -1006,8 +1006,14 @@ ul {
 .google-btn-wrap > div { width: 100% !important; }
 
 /* User Profile in Header */
-.user-profile-btn { display: flex; align-items: center; gap: 8px; }
-.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
-.user-name { font-size: 13px; font-weight: 600; }
-.logout-btn { font-size: 12px; background: none; border: 1px solid #ddd; border-radius: 6px; padding: 4px 10px; cursor: pointer; color: #666; }
-.logout-btn:hover { border-color: #e85d04; color: #e85d04; }
+.user-profile-wrap { position: relative; }
+.user-avatar-btn { background: none; border: none; cursor: pointer; padding: 0; border-radius: 50%; }
+.user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #e85d04; }
+.user-avatar-lg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
+.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); padding: 16px; min-width: 220px; z-index: 999; }
+.user-dropdown-info { display: flex; align-items: center; gap: 12px; }
+.user-dropdown-name { font-weight: 700; font-size: 14px; margin: 0; }
+.user-dropdown-email { font-size: 12px; color: #888; margin: 2px 0 0; }
+.dropdown-divider { border: none; border-top: 1px solid #f0f0f0; margin: 12px 0; }
+.dropdown-logout { width: 100%; background: #fff0e6; color: #e85d04; border: none; border-radius: 8px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer; }
+.dropdown-logout:hover { background: #e85d04; color: #fff; }