components/sidebar.js

class SidebarComponent extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 288px;
                    background-color: white;
                    border-right: 1px solid #e5e7eb;
                    transition: all 0.3s ease;
                    height: 100vh;
                    position: relative;
                    z-index: 30;
                }

                :host(.open) {
                    transform: translateX(0);
                }

                .logo-container {
                    display: flex;
                    align-items: center;
                    padding: 1.5rem;
                    border-bottom: 1px solid #e5e7eb;
                }

                .logo {
                    width: 2.5rem;
                    height: 2.5rem;
                    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
                    border-radius: 0.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-weight: bold;
                    font-size: 1.125rem;
                    margin-right: 0.75rem;
                }

                .logo-text h1 {
                    font-weight: 700;
                    color: #111827;
                    margin: 0;
                }

                .logo-text p {
                    font-size: 0.75rem;
                    color: #6b7280;
                    margin: 0;
                }

                .toggle-button {
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    transition: background-color 0.2s;
                    margin-left: auto;
                }

                .toggle-button:hover {
                    background-color: #f3f4f6;
                }

                .new-task {
                    padding: 1rem;
                    border-bottom: 1px solid #e5e7eb;
                }

                .new-task-button {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    background-color: #111827;
                    color: white;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    font-weight: 600;
                    transition: background-color 0.2s;
                }

                .new-task-button:hover {
                    background-color: #1f2937;
                }

                .search {
                    padding: 1rem;
                    border-bottom: 1px solid #e5e7eb;
                }

                .search-container {
                    position: relative;
                }

                .search-icon {
                    position: absolute;
                    left: 0.75rem;
                    top: 0.75rem;
                    color: #9ca3af;
                }

                .search-input {
                    width: 100%;
                    padding-left: 2.5rem;
                    padding-right: 1rem;
                    padding-top: 0.5rem;
                    padding-bottom: 0.5rem;
                    background-color: #f9fafb;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.5rem;
                    font-size: 0.875rem;
                }

                .search-input:focus {
                    outline: none;
                    border-color: #3b82f6;
                    box-shadow: 0 0 0 2px #bfdbfe;
                }

                nav {
                    flex: 1;
                    padding: 1rem;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                }

                .nav-button {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    transition: all 0.2s;
                    color: #4b5563;
                }

                .nav-button:hover {
                    background-color: #f3f4f6;
                }

                .nav-button.active {
                    background-color: #dbeafe;
                    color: #1e40af;
                }

                .projects {
                    padding: 1rem;
                    border-top: 1px solid #e5e7eb;
                }

                .projects-title {
                    font-weight: 600;
                    color: #111827;
                    margin-bottom: 0.75rem;
                    font-size: 0.875rem;
                }

                .project-item {
                    width: 100%;
                    text-align: left;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    transition: all 0.2s;
                    font-size: 0.875rem;
                    margin-bottom: 0.25rem;
                }

                .project-item:hover {
                    background-color: #f3f4f6;
                }

                .project-item.active {
                    background-color: #ecfdf5;
                    border-left: 4px solid #10b981;
                }

                .project-status {
                    width: 0.5rem;
                    height: 0.5rem;
                    border-radius: 50%;
                    margin-right: 0.5rem;
                }

                .project-status.active {
                    background-color: #10b981;
                }

                .project-status.archived {
                    background-color: #d1d5db;
                }

                .project-name {
                    font-weight: 500;
                }

                .project-time {
                    color: #6b7280;
                    font-size: 0.75rem;
                    margin-top: 0.25rem;
                }

                .footer {
                    padding: 1rem;
                    border-top: 1px solid #e5e7eb;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                }

                .footer-button {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    transition: all 0.2s;
                    color: #4b5563;
                    font-size: 0.875rem;
                }

                .footer-button:hover {
                    background-color: #f3f4f6;
                }

                @media (max-width: 768px) {
                    :host {
                        position: fixed;
                        left: 0;
                        top: 0;
                        transform: translateX(-100%);
                    }

                    :host(.open) {
                        transform: translateX(0);
                    }
                }
            </style>

            <div class="logo-container">
                <div class="logo">CG</div>
                <div class="logo-text">
                    <h1>CodeGenius</h1>
                    <p>Workspace Rosalinda</p>
                </div>
                <button class="toggle-button" id="sidebar-toggle">
                    <i data-feather="x"></i>
                </button>
            </div>

            <div class="new-task">
                <button class="new-task-button">
                    <i data-feather="plus"></i>
                    <span>Nouvelle tâche</span>
                </button>
            </div>

            <div class="search">
                <div class="search-container">
                    <i data-feather="search" class="search-icon"></i>
                    <input type="text" placeholder="Rechercher..." class="search-input">
                </div>
            </div>

            <nav>
                <a href="#" class="nav-button active" data-view="home">
                    <i data-feather="home"></i>
                    <span>Accueil</span>
                </a>
                <a href="#" class="nav-button" data-view="chat">
                    <i data-feather="message-square"></i>
                    <span>Chat Rosalinda</span>
                </a>
                <a href="#" class="nav-button" data-view="projects">
                    <i data-feather="folder"></i>
                    <span>Mes Projets</span>
                </a>
                <a href="#" class="nav-button" data-view="code">
                    <i data-feather="code"></i>
                    <span>Code Généré</span>
                </a>
                <a href="#" class="nav-button" data-view="library">
                    <i data-feather="book"></i>
                    <span>Bibliothèque</span>
                </a>
            </nav>

            <div class="projects">
                <h3 class="projects-title">Vos Projets</h3>
                <div>
                    <button class="project-item active">
                        <div class="flex items-center">
                            <div class="project-status active"></div>
                            <span class="project-name">Portfolio Pro</span>
                        </div>
                        <p class="project-time">2 jours</p>
                    </button>
                    <button class="project-item">
                        <div class="flex items-center">
                            <div class="project-status active"></div>
                            <span class="project-name">E-shop Mode</span>
                        </div>
                        <p class="project-time">5 jours</p>
                    </button>
                    <button class="project-item">
                        <div class="flex items-center">
                            <div class="project-status archived"></div>
                            <span class="project-name">App SaaS</span>
                        </div>
                        <p class="project-time">10 jours</p>
                    </button>
                </div>
            </div>

            <div class="footer">
                <button class="footer-button">
                    <i data-feather="settings"></i>
                    <span>Paramètres</span>
                </button>
                <button class="footer-button">
                    <i data-feather="log-out"></i>
                    <span>Déconnexion</span>
                </button>
            </div>
        `;

        // Initialize feather icons
        const featherScript = document.createElement('script');
        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
        this.shadowRoot.appendChild(featherScript);
        
        featherScript.onload = () => {
            feather.replace();
        };

        // Navigation
        this.shadowRoot.querySelectorAll('[data-view]').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const view = link.getAttribute('data-view');
                document.dispatchEvent(new CustomEvent('navigate', { detail: view }));
                
                // Update active state
                this.shadowRoot.querySelectorAll('.nav-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                link.classList.add('active');
            });
        });

        // Toggle sidebar on mobile
        this.shadowRoot.getElementById('sidebar-toggle').addEventListener('click', () => {
            this.classList.remove('open');
            document.body.classList.remove('overflow-hidden');
        });
    }
}

customElements.define('sidebar-component', SidebarComponent);