class CustomNavbar extends HTMLElement {

connectedCallback(){

this.attachShadow({mode:'open'});

this.shadowRoot.innerHTML=`

<style>

:host{
position:fixed;
top:0;
left:0;
right:0;
height:64px;
z-index:100
}

.navbar{
height:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 16px;
background:rgba(15,23,42,.95);
backdrop-filter:blur(10px);
color:white
}

.logo-section,.actions{display:flex;align-items:center;gap:12px}

button{
background:none;
border:none;
color:inherit;
cursor:pointer
}

.search{
flex:1;
max-width:500px;
display:flex
}

.search input{
flex:1;
padding:8px 14px;
border-radius:20px 0 0 20px;
border:none
}

.search button{
padding:8px 16px;
border-radius:0 20px 20px 0;
background:#334155
}

.avatar{
width:32px;
height:32px;
border-radius:50%
}

.tooltip{position:relative}

.tooltip:hover::after{
content:attr(data-tooltip);
position:absolute;
top:120%;
left:50%;
transform:translateX(-50%);
background:black;
padding:4px 8px;
border-radius:4px;
font-size:12px;
white-space:nowrap
}

</style>

<div class="navbar">

<div class="logo-section">
<button id="menu"><i data-feather="menu"></i></button>
<b>StreamCraft</b>
</div>

<div class="search">
<input id="search" placeholder="Search">
<button id="searchBtn"><i data-feather="search"></i></button>
</div>

<div class="actions">
<button class="tooltip" data-tooltip="Create"><i data-feather="video"></i></button>
<button class="tooltip" data-tooltip="Alerts"><i data-feather="bell"></i></button>
<img class="avatar" src="https://static.photos/people/200x200/99">
</div>

</div>
`;

if(window.feather){
feather.replace({root:this.shadowRoot});
}

this.shadowRoot.getElementById("menu").onclick=()=>{
window.toggleSidebar?.();
};

this.shadowRoot.getElementById("searchBtn").onclick=()=>{
window.handleSearch?.(this.shadowRoot.getElementById("search").value);
};

this.shadowRoot.getElementById("search").addEventListener("keydown",e=>{
if(e.key==="Enter"){
window.handleSearch?.(e.target.value);
}
});

}

}

customElements.define("custom-navbar",CustomNavbar);