components/header.js

class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
        }
        header {
          background: white;
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .rainbow-text {
          background: linear-gradient(
            90deg,
            rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 20%,
            rgba(208, 222, 33, 1) 40%,
            rgba(79, 220, 74, 1) 60%,
            rgba(63, 218, 216, 1) 80%,
            rgba(47, 201, 226, 1) 100%
          );
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      </style>
      <header class="py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
          <div class="flex items-center">
            <i data-feather="award" class="mr-2" style="width: 28px; height: 28px;"></i>
            <h1 class="text-2xl font-bold rainbow-text">Rainbow Unicorn Dashboard</h1>
          </div>
            <nav class="hidden md:flex space-x-6">
              <a href="/" class="hover:text-purple-500 transition">Home</a>
              <a href="/about.html" class="hover:text-purple-500 transition">About</a>
              <a href="#" class="hover:text-purple-500 transition">Magic</a>
              <a href="#" class="hover:text-purple-500 transition">Rainbows</a>
            </nav>
<button class="md:hidden">
            <i data-feather="menu"></i>
          </button>
        </div>
      </header>
    `;
  }
}
customElements.define('custom-header', CustomHeader);