components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .header {
          height: 70px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .search-input {
          transition: all 0.3s;
        }
        .search-input:focus {
          width: 300px;
        }
        .notification-badge {
          top: -5px;
          right: -5px;
        }
        .avatar {
          transition: all 0.2s;
        }
        .avatar:hover {
          transform: scale(1.1);
        }
      </style>
      <header class="header bg-white flex items-center justify-between px-6 sticky top-0 z-10">
        <div class="flex items-center">
          <button id="mobileMenuButton" class="mr-4 md:hidden">
            <i data-feather="menu"></i>
          </button>
          <div class="relative">
            <input type="text" placeholder="Search..." class="search-input bg-gray-100 rounded-full py-2 px-4 pl-10 w-40 focus:w-60 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-opacity-50">
            <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <button class="p-2 rounded-full hover:bg-gray-100 relative">
            <i data-feather="bell"></i>
            <span class="notification-badge absolute bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center pulse">3</span>
          </button>
          <button class="p-2 rounded-full hover:bg-gray-100">
            <i data-feather="mail"></i>
          </button>
          <button class="p-2 rounded-full hover:bg-gray-100">
            <i data-feather="help-circle"></i>
          </button>
          <div class="