Spaces:
Running
Running
| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| nav { | |
| background: white; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-weight: bold; | |
| font-size: 1.25rem; | |
| color: #3b82f6; | |
| } | |
| .logo span { | |
| color: #10b981; | |
| } | |
| .actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| button { | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.375rem; | |
| font-weight: 500; | |
| } | |
| .primary { | |
| background: #3b82f6; | |
| color: white; | |
| } | |
| .secondary { | |
| border: 1px solid #e5e7eb; | |
| } | |
| </style> | |
| <nav> | |
| <div class="logo">Crew<span>Control</span></div> | |
| <div class="actions"> | |
| <button class="secondary">Docs</button> | |
| <button class="primary">New Agent</button> | |
| </div> | |
| </nav> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |