DevlinDecatur/rubric-infographic-wizard

1class CustomHeader extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8          width: 100%;9          box-shadow: 0 2px 4px rgba(0,0,0,0.1);10        }11        nav {12          background: white;13        }14        .nav-container {15          max-width: 1200px;16          margin: 0 auto;17          padding: 1rem 2rem;18          display: flex;19          justify-content: space-between;20          align-items: center;21        }22        .logo {23          font-weight: 700;24          font-size: 1.5rem;25          color: #4f46e5;26          display: flex;27          align-items: center;28        }29        .logo i {30          margin-right: 0.5rem;31        }32        .nav-links {33          display: flex;34          gap: 1.5rem;35        }36        .nav-links a {37          color: #4b5563;38          font-weight: 500;39          text-decoration: none;40          transition: color 0.2s;41        }42        .nav-links a:hover {43          color: #4f46e5;44        }45        @media (max-width: 768px) {46          .nav-container {47            flex-direction: column;48            padding: 1rem;49          }50          .nav-links {51            margin-top: 1rem;52            flex-wrap: wrap;53            justify-content: center;54          }55        }56      </style>57      <nav>58        <div class="nav-container">59          <a href="/" class="logo">60            <i data-feather="zap"></i>61            <span>Rubric Wizard</span>62          </a>63          <div class="nav-links">64            <a href="#design">Design</a>65            <a href="#content">Content</a>66            <a href="#analysis">Analysis</a>67            <a href="#creative">Creative</a>68          </div>69        </div>70      </nav>71    `;72  }73}74customElements.define('custom-header', CustomHeader);