components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    width: 16rem;
                    background-color: white;
                    border-right: 1px solid #e5e7eb;
                    overflow-y: auto;
                }
                
                .panel {
                    padding: 1rem;
                    border-bottom: 1px solid #e5e7eb;
                }
                
                .panel-title {
                    font-weight: 600;
                    color: #374151;
                    margin-bottom: 0.75rem;
                    display: flex;
                    align-items: center;
                }
                
                .panel-item {
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    transition: all 0.2s ease;
                }
                
                .panel-item:hover {
                    background-color: #f3f4f6;
                }
                
                .panel-item.active {
                    background-color: #e0e7ff;
                    color: #4f46e5;
                }
                
                .panel-item i {
                    margin-right: 0.75rem;
                    width: 1.25rem;
                    height: 1.25rem;
                }
            </style>
            <div class="sidebar h-full">
                <div class="panel">
                    <div class="panel-title">
                        <i data-feather="image" class="mr-2"></i>
                        Presets
                    </div>
                    <div class="space-y-1">
                        <div class="panel-item">
                            <i data-feather="sun"></i>
                            Landscape
                        </div>
                        <div class="panel-item">
                            <i data-feather="moon"></i>
                            Nightscape
                        </div>
                        <div class="panel-item">
                            <i data-feather="user"></i>
                            Portrait
                        </div>
                        <div class="panel-item">
                            <i data-feather="film"></i>
                            Vintage
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-title">
                        <i data-feather="layers" class="mr-2"></i>
                        History
                    </div>
                    <div class="space-y-1">
                        <div class="panel-item">
                            <i data-feather="clock"></i>
                            Original
                        </div>
                        <div class="panel-item active">
                            <i data-feather="edit"></i>
                            Current
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-title">
                        <i data-feather="crop" class="mr-2"></i>
                        Tools
                    </div>
                    <div class="space-y-1">
                        <div class="panel-item">
                            <i data-feather="crop"></i>
                            Crop & Rotate
                        </div>
                        <div class="panel-item">
                            <i data-feather="target"></i>
                            Spot Removal
                        </div>
                        <div class="panel-item">
                            <i data-feather="pen-tool"></i>
                            Brush Adjustments
                        </div>
                        <div class="panel-item">
                            <i data-feather="type"></i>
                            Text Overlay
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-sidebar', CustomSidebar);