VortexHunter23/opencoder-terminal-ai-wizard

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: rgba(17, 24, 39, 0.8);8          backdrop-filter: blur(10px);9          padding: 1rem 2rem;10          display: flex;11          justify-content: space-between;12          align-items: center;13          position: fixed;14          top: 0;15          left: 0;16          right: 0;17          z-index: 1000;18          border-bottom: 1px solid rgba(255, 255, 255, 0.1);19        }20        .logo {21          color: white;22          font-weight: bold;23          font-size: 1.25rem;24          display: flex;25          align-items: center;26          gap: 0.5rem;27        }28        .logo-icon {29          color: #8b5cf6;30        }31        ul {32          display: flex;33          gap: 1.5rem;34          list-style: none;35          margin: 0;36          padding: 0;37        }38        a {39          color: rgba(255, 255, 255, 0.8);40          text-decoration: none;41          transition: color 0.2s;42          font-weight: 500;43        }44        a:hover {45          color: #8b5cf6;46        }47        .github-btn {48          display: flex;49          align-items: center;50          gap: 0.5rem;51          padding: 0.5rem 1rem;52          background: rgba(255, 255, 255, 0.1);53          border-radius: 6px;54          transition: background 0.2s;55        }56        .github-btn:hover {57          background: rgba(255, 255, 255, 0.2);58        }59        @media (max-width: 768px) {60          nav {61            padding: 1rem;62          }63          ul {64            display: none;65          }66        }67      </style>68      <nav>69        <a href="/" class="logo">70          <i data-feather="terminal" class="logo-icon"></i>71          OpenCoder72        </a>73        <ul>74          <li><a href="#features">Features</a></li>75          <li><a href="#about">About</a></li>76          <li><a href="https://opencode.ai/docs">Documentation</a></li>77          <li>78            <a href="https://github.com/sst/opencode" class="github-btn">79              <i data-feather="github"></i>80              GitHub81            </a>82          </li>83        </ul>84      </nav>85    `;86  }87}88customElements.define('custom-navbar', CustomNavbar);