components/navbar.js

class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    padding: 0 16px;
                    background-color: var(--navbar-bg, #1E293B);
                    color: var(--navbar-text, #F8FAFC);
                    border-bottom: 1px solid var(--navbar-border, #334155);
                }
                
                .nav-item {
                    padding: 8px 12px;
                    border-radius: 4px;
                    transition: background-color 0.2s;
                    cursor: pointer;
                }
                
                .nav-item:hover {
                    background-color: var(--navbar-hover, #334155);
                }
                
                .logo {
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                
                .logo-icon {
                    color: #3DDC84;
                }
            </style>
            <div class="navbar">
                <div class="flex items-center space-x-6">
                    <div class="logo">
                        <i data-feather="code" class="logo-icon"></i>
                        <span>CodeNest</span>
                    </div>
                    <div class="flex space-x-1">
                        <div class="nav-item">File</div>
                        <div class="nav-item">Edit</div>
                        <div class="nav-item">View</div>
                        <div class="nav-item">Navigate</div>
                        <div class="nav-item">Code</div>
                        <div class="nav-item">Run</div>
                        <div class="nav-item">Tools</div>
                        <div class="nav-item">Help</div>
                    </div>
                </div>
                <div class="ml-auto flex items-center space-x-4">
                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700">
                        <i data-feather="moon"></i>
                    </button>
                    <button id="build-button" class="px-3 py-1 rounded-md bg-primary-500 hover:bg-primary-600 text-white text-sm flex items-center gap-2">
                        <i data-feather="play" class="w-4 h-4"></i>
                        Run
                    </button>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);