components/user-profile.js

class UserProfile extends HTMLElement {
  connectedCallback() {
    const user = JSON.parse(localStorage.getItem('currentUser'));
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .profile-dropdown {
          @apply relative;
        }
        .profile-btn {
          @apply flex items-center space-x-2 cursor-pointer;
        }
        .avatar {
          @apply w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium;
        }
        .dropdown-menu {
          @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden;
        }
        .dropdown-item {
          @apply block px-4 py-2 text-gray-700 hover:bg-gray-100;
        }
      </style>
      <div class="profile-dropdown">
        <div class="profile-btn">
          <div class="avatar">${user.name ? user.name.charAt(0).toUpperCase() : 'U'}</div>
        </div>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">Profile</a>
          <a href="#" class="dropdown-item">Settings</a>
          <a href="#" id="logoutBtn" class="dropdown-item">Logout</a>
        </div>
      </div>
    `;

    const profileBtn = this.shadowRoot.querySelector('.profile-btn');
    const dropdownMenu = this.shadowRoot.querySelector('.dropdown-menu');

    profileBtn.addEventListener('click', () => {
      dropdownMenu.classList.toggle('hidden');
    });

    this.shadowRoot.getElementById('logoutBtn').addEventListener('click', (e) => {
      e.preventDefault();
      localStorage.removeItem('currentUser');
      window.location.reload();
    });
  }
}

customElements.define('user-profile', UserProfile);