rcok/add-nasa-theme-https-3vdpmvj

1class CustomSidebar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        aside {7          width: 300px;8          background: #1f2937;9          padding: 1.5rem;10          border-radius: 0.75rem;11          height: fit-content;12        }13        h3 {14          font-size: 1.25rem;15          font-weight: 600;16          margin-bottom: 1rem;17          color: #60a5fa;18        }19        ul { list-style: none; padding: 0; margin: 0; }20        li { margin-bottom: 0.75rem; }21        a {22          display: flex;23          align-items: center;24          gap: 0.5rem;25          color: #d1d5db;26          text-decoration: none;27          padding: 0.5rem;28          border-radius: 0.375rem;29          transition: all 0.2s;30        }31        a:hover {32          background: #374151;33          color: #ffffff;34        }35        i { width: 18px; height: 18px; }36        .sidebar-divider {37          height: 1px;38          background: #374151;39          margin: 1rem 0;40        }41      </style>42      <aside>43        <h3>Quick Links</h3>44        <ul>45          <li><a href="/"><i data-feather="home"></i> Home</a></li>46          <li><a href="/help.html"><i data-feather="help-circle"></i> RPA Help</a></li>47        </ul>48        <div class="sidebar-divider"></div>49        <h3>Popular Topics</h3>50        <ul>51          <li><a href="#"><i data-feather="zap"></i> Error Handling</a></li>52          <li><a href="#"><i data-feather="key"></i> Credentials</a></li>53          <li><a href="#"><i data-feather="download"></i> Package Deploy</a></li>54          <li><a href="#"><i data-feather="server"></i> Control Room</a></li>55        </ul>56      </aside>57    `;58    feather.replace();59  }60}61customElements.define('custom-sidebar', CustomSidebar);