components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                #sidebar-overlay {
                    position: fixed;
                    inset: 0;
                    z-index: 30;
                    background-color: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    pointer-events: none;
                }
                #profile-sidebar {
                    position: fixed;
                    top: 0;
                    right: 0;
                    z-index: 40;
                    width: 100%;
                    max-width: 24rem;
                    height: 100%;
                    background-color: white;
                    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                    overflow-y: auto;
                    transform: translateX(100%);
                    transition: transform 0.3s ease-in-out;
                }
                #profile-sidebar.open {
                    transform: translateX(0);
                }
                .sidebar-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 1.25rem 1.5rem;
                    border-bottom: 1px solid #e2e8f0;
                }
            </style>
            
            <div id="sidebar-overlay"></div>
            
            <aside id="profile-sidebar">
                <div class="flex flex-col h-full">
                    <div class="sidebar-header">
                        <h3 class="text-lg font-semibold text-slate-900">Profile & Settings</h3>
                        <button id="profile-sidebar-close-btn" class="p-2 rounded-full text-slate-400 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
                    </div>
                    
                    <div class="flex-1 p-6 space-y-6">
                        <!-- Sidebar content would go here -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-slate-700">Profile Image</label>
                            <div class="flex items-center space-x-4">
                                <div id="profile-img-preview" class="h-16 w-16 rounded-full flex items-center justify-center overflow-hidden bg-slate-200 text-slate-400">
                            <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>
</div>
                                <input type="text" id="profile-img-url-input" placeholder="https://... image URL" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        `;
    }
}
customElements.define('custom-sidebar', CustomSidebar);