components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 256px;
                    height: 100vh;
                    background: white;
                    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
                    position: fixed;
                    left: 0;
                    top: 0;
                    z-index: 40;
                }
                .sidebar-content {
                    padding: 4rem 0 2rem;
                }
                .nav-item {
                    display: flex;
                    align-items: center;
                    padding: 1rem 1.5rem;
                    color: #374151;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    cursor: pointer;
                    border: none;
                    background: none;
                    width: 100%;
                    text-align: left;
                    font-size: 0.95rem;
                }
                .nav-item:hover {
                    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
                    color: white;
                }
                .nav-item i {
                    margin-right: 0.75rem;
                }
                .nav-item.active {
                    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
                    color: white;
                }
            </style>
            <div class="sidebar-content">
                <button class="nav-item" onclick="window.showDashboard()">
                    <i data-feather="home" class="w-5 h-5"></i>
                    Дашборд
                </button>
                <button class="nav-item" onclick="window.showEmployees()">
                    <i data-feather="users" class="w-5 h-5"></i>
                    Сотрудники
                </button>
                <button class="nav-item" onclick="window.showDocuments()">
                    <i data-feather="file-text" class="w-5 h-5"></i>
                    Документы
                </button>
                <button class="nav-item" onclick="window.showDataIntegration()">
                    <i data-feather="database" class="w-5 h-5"></i>
                    Интеграция данных
                </button>
                <button class="nav-item" onclick="window.showUpload()">
                    <i data-feather="upload" class="w-5 h-5"></i>
                    Загрузка Excel
                </button>
                <button class="nav-item" onclick="window.showReports()">
                    <i data-feather="file-text" class="w-5 h-5"></i>
                    Отчеты
                </button>
<button class="nav-item" onclick="window.showAnalytics()">
                    <i data-feather="bar-chart-2" class="w-5 h-5"></i>
                    Аналитика
                </button>
            </div>
        `;
    }
}

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