Dabelu/skyhawk-fpv-drones

1class CustomHeader extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        :host {7          display: block;8        }9        10        * {11          margin: 0;12          padding: 0;13          box-sizing: border-box;14        }15        16        header {17          background-color: rgba(17, 24, 39, 0.9);18          backdrop-filter: blur(10px);19          padding: 1rem 0;20          position: sticky;21          top: 0;22          z-index: 100;23          border-bottom: 1px solid #374151;24        }25        26        .container {27          max-width: 1200px;28          margin: 0 auto;29          padding: 0 1rem;30          display: flex;31          justify-content: space-between;32          align-items: center;33        }34        35        .logo {36          display: flex;37          align-items: center;38          text-decoration: none;39        }40        41        .logo-icon {42          width: 40px;43          height: 40px;44          background: linear-gradient(135deg, #3b82f6, #1d4ed8);45          border-radius: 50%;46          display: flex;47          align-items: center;48          justify-content: center;49          margin-right: 12px;50        }51        52        .logo-text {53          font-size: 1.5rem;54          font-weight: 700;55          background: linear-gradient(90deg, #3b82f6, #60a5fa);56          -webkit-background-clip: text;57          -webkit-text-fill-color: transparent;58          background-clip: text;59        }60        61        nav ul {62          display: flex;63          list-style: none;64        }65        66        nav ul li {67          margin-left: 2rem;68        }69        70        nav ul li a {71          color: #d1d5db;72          text-decoration: none;73          font-weight: 500;74          transition: color 0.3s;75          display: flex;76          align-items: center;77        }78        79        nav ul li a:hover {80          color: #3b82f6;81        }82        83        nav ul li a i {84          margin-right: 8px;85        }86        87        .mobile-menu-btn {88          display: none;89          background: none;90          border: none;91          color: #d1d5db;92          font-size: 1.5rem;93          cursor: pointer;94        }95        96        @media (max-width: 768px) {97          .nav-menu {98            position: fixed;99            top: 70px;100            left: -100%;101            width: 100%;102            height: calc(100vh - 70px);103            background-color: rgba(17, 24, 39, 0.95);104            flex-direction: column;105            align-items: center;106            padding-top: 2rem;107            transition: left 0.3s ease;108          }109          110          .nav-menu.active {111            left: 0;112          }113          114          nav ul {115            flex-direction: column;116            width: 100%;117          }118          119          nav ul li {120            margin: 1rem 0;121            text-align: center;122          }123          124          .mobile-menu-btn {125            display: block;126          }127        }128      </style>129      130      <header>131        <div class="container">132          <a href="/" class="logo">133            <div class="logo-icon">134              <i data-feather="navigation" class="text-white w-5 h-5"></i>135            </div>136            <div class="logo-text">SkyHawk</div>137          </a>138          139          <button class="mobile-menu-btn" id="mobileMenuBtn">140            <i data-feather="menu"></i>141          </button>142          143          <nav class="nav-menu" id="navMenu">144            <ul>145              <li><a href="/"><i data-feather="home"></i> Home</a></li>146              <li><a href="#"><i data-feather="shopping-bag"></i> Products</a></li>147              <li><a href="#"><i data-feather="settings"></i> Solutions</a></li>148              <li><a href="#"><i data-feather="users"></i> Support</a></li>149              <li><a href="#"><i data-feather="phone"></i> Contact</a></li>150            </ul>151          </nav>152        </div>153      </header>154    `;155    156    // Add event listeners after content is rendered157    setTimeout(() => {158      const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');159      const navMenu = this.shadowRoot.getElementById('navMenu');160      161      mobileMenuBtn.addEventListener('click', () => {162        navMenu.classList.toggle('active');163        const menuIcon = mobileMenuBtn.querySelector('i');164        if (navMenu.classList.contains('active')) {165          menuIcon.setAttribute('data-feather', 'x');166        } else {167          menuIcon.setAttribute('data-feather', 'menu');168        }169        feather.replace();170      });171    }, 0);172  }173}174 175customElements.define('custom-header', CustomHeader);