| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| header { | |
| background-color: white; | |
| box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| position: sticky; | |
| top: 0; | |
| z-index: 30; | |
| } | |
| .header-container { | |
| max-width: 72rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| } | |
| @media (min-width: 640px) { | |
| .header-container { | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .header-container { | |
| padding-left: 2rem; | |
| padding-right: 2rem; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="header-container"> | |
| <div class="flex justify-between items-center h-16"> | |
| <button id="menu-btn" class="p-2 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> | |
| </button> | |
| <h1 class="text-xl font-semibold text-slate-800 hidden sm:block"> | |
| Agent Configuration | |
| </h1> | |
| <button id="profile-toggle-btn" class="p-1.5 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |