File size: 2,522 Bytes
c5ca729 6073f89 c5ca729 6073f89 c5ca729 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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); |