components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 1.5rem;
                    height: 100%;
                    background: rgba(15, 23, 42, 0.9);
                    border-bottom: 1px solid #334155;
                }
                .logo {
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #6366f1; /* Indigo-500 */
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    text-decoration: none;
                }
                .user-profile {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }
                .avatar {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 2px solid #6366f1;
                }
                .status-badge {
                    font-size: 0.75rem;
                    padding: 0.25rem 0.5rem;
                    border-radius: 999px;
                    background: rgba(16, 185, 129, 0.2);
                    color: #34d399;
                    display: flex;
                    align-items: center;
                    gap: 0.25rem;
                }
                .status-dot {
                    width: 6px;
                    height: 6px;
                    background: #34d399;
                    border-radius: 50%;
                }
            </style>
            <a href="#" class="logo">
                <i data-feather="cpu"></i> Synapse Studio
            </a>
            <div class="user-profile">
                <div class="status-badge">
                    <span class="status-dot"></span> Online
                </div>
                <img src="http://static.photos/people/200x200/12" alt="User" class="avatar">
            </div>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);