abdul-kunnummal/gpt-2-chatty-python-pal

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: var(--primary-color, #3b82f6);8          padding: 1rem 2rem;9          display: flex;10          justify-content: space-between;11          align-items: center;12          box-shadow: 0 2px 4px rgba(0,0,0,0.1);13        }14        .logo {15          color: white;16          font-weight: bold;17          font-size: 1.25rem;18          display: flex;19          align-items: center;20          gap: 0.5rem;21        }22        ul {23          display: flex;24          gap: 1.5rem;25          list-style: none;26          margin: 0;27          padding: 0;28          align-items: center;29        }30        a {31          color: white;32          text-decoration: none;33          transition: opacity 0.2s;34          font-weight: 500;35          display: flex;36          align-items: center;37          gap: 0.25rem;38        }39        a:hover {40          opacity: 0.8;41          text-decoration: underline;42        }43        i {44          width: 18px;45          height: 18px;46        }47      </style>48      <nav>49        <div class="logo">50          <i data-feather="cpu"></i>51          <span>GPT-2 Python</span>52        </div>53        <ul>54          <li><a href="/"><i data-feather="home"></i> Home</a></li>55          <li><a href="https://huggingface.co/gpt2" target="_blank"><i data-feather="external-link"></i> GPT-2 Docs</a></li>56        </ul>57      </nav>58    `;59  }60}61customElements.define('custom-navbar', CustomNavbar);