components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          height: 60px;
          backdrop-filter: blur(10px);
        }
      </style>
      <nav class="navbar border-b border-gray-200 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80">
        <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
              <i data-feather="cpu" class="text-white w-4 h-4"></i>
            </div>
            <span class="font-bold text-gray-800 dark:text-white">NeuralNest</span>
          </div>
          <div class="flex items-center space-x-4">
            <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              <i data-feather="moon"></i>
            </button>
            <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              <i data-feather="settings"></i>
            </button>
          </div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);