<div id="layoutSidenav_nav">
    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion" style="background: linear-gradient(135deg, #1a5276 0%, #27ae60 100%); width: 280px; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;">
        <div class="sb-sidenav-menu">
            <div class="nav">
                <!-- En-tête -->
                <div class="text-center py-3 px-3">
                    <h4 class="text-white mb-0" style="font-weight: 600;">MAIN IT CENTER</h4>
                    <small class="text-white-50" style="font-weight: 400;">Gestion Scolaire</small>
                </div>

                <!-- Menu Items -->
                <div class="px-2">
                    <!-- Scolarité -->
                    <div class="nav-item mb-1">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2" href="mensualite.php" style="transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-chart-area text-white"></i>
                            </div>
                            <span style="font-weight: 500;">Scolarité</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-right small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                    </div>

                    <!-- Gestion Étudiant -->
                    <div class="nav-item mb-1">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2 collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseEtudiants" style="transition: all 0.25s ease;">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-user-graduate text-white"></i>
                            </div>
                            <span style="font-weight: 500;">Gestion Étudiant</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-down small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                        <div class="collapse" id="collapseEtudiants">
                            <div class="nav flex-column ps-4 py-1">
                                <a class="nav-link py-2 d-flex align-items-center" href="views-student.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-users me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Liste des Étudiants</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="add-student.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-user-plus me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Inscription</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="reinscription.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-sync-alt me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Réinscription</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="aut_absence.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-user-slash me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Absence</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="carte.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-id-card me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Gestion des cartes etudiant</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Gestion des Classes -->
                    <div class="nav-item mb-1">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2 collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseClasses" style="transition: all 0.25s ease;">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-school text-white"></i>
                            </div>
                            <span style="font-weight: 500;">Gestion des Classes</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-down small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                        <div class="collapse" id="collapseClasses">
                            <div class="nav flex-column ps-4 py-1">
                                <a class="nav-link py-2 d-flex align-items-center" href="listClasse.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-list me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Liste des Classes</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="feuille_presence.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-clipboard-list me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Feuille de Présence</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="bulletin.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-file-alt me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Bulletin de Notes</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="Carte.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-users me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Gestion des CA</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="emploi_du_temps.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-calendar-alt me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Emploi du Temps</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Gestion des Notes -->
                    <div class="nav-item mb-1">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2 collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseNotes" style="transition: all 0.25s ease;">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-pen-nib text-white"></i>
                            </div>
                            <span style="font-weight: 500;">Gestion des Notes</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-down small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                        <div class="collapse" id="collapseNotes">
                            <div class="nav flex-column ps-4 py-1">
                                <a class="nav-link py-2 d-flex align-items-center" href="ajou_note.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-plus-circle me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Ajouter une Note</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="ajoute_module.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-plus-square me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Ajouter un Module</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="list_module.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-list me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Liste des Modules</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="releve.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-file-alt me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Relevé de Notes</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="liste_etudiant.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-file-signature me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Feuille de Notes</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- La Caisse -->
                    <div class="nav-item mb-1">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2 collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseCaisse" style="transition: all 0.25s ease;">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-calculator text-white"></i>
                            </div>
                            <span style="font-weight: 500;">La Caisse</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-down small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                        <div class="collapse" id="collapseCaisse">
                            <div class="nav flex-column ps-4 py-1">
                                <a class="nav-link py-2 d-flex align-items-center" href="Caisses.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-cash-register me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Voir la Caisse</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="recap.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-chalkboard-teacher me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Rapport journalier</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="ajouter_depense.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-money-bill-wave me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Ajouter une Dépense</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="lettre_de_reglement.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-file-invoice-dollar me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Lettre de Règlement</span>
                                </a>
                                 <a class="nav-link py-2 d-flex align-items-center" href="list_lettre.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-file-invoice-dollar me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Liste des lettres</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="vacations.php" style="transition: all 0.2s ease;">
                                    <i class="fas fa-clock me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Gestion des vacations</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Nouveau Menu -->
                    <div class="nav-item">
                        <a class="nav-link d-flex align-items-center rounded-3 py-2 collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseNouveau" style="transition: all 0.25s ease;">
                            <div class="sb-nav-link-icon me-2">
                                <i class="fas fa-star text-white"></i>
                            </div>
                            <span style="font-weight: 500;">Nouveau Menu</span>
                            <div class="ms-auto">
                                <i class="fas fa-chevron-down small text-white-50" style="transition: transform 0.2s ease;"></i>
                            </div>
                        </a>
                        <div class="collapse" id="collapseNouveau">
                            <div class="nav flex-column ps-4 py-1">
                                <a class="nav-link py-2 d-flex align-items-center" href="#" style="transition: all 0.2s ease;">
                                    <i class="fas fa-bell me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Sous-menu 1</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="#" style="transition: all 0.2s ease;">
                                    <i class="fas fa-cog me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Sous-menu 2</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="#" style="transition: all 0.2s ease;">
                                    <i class="fas fa-envelope me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Sous-menu 3</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="#" style="transition: all 0.2s ease;">
                                    <i class="fas fa-chart-bar me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Sous-menu 4</span>
                                </a>
                                <a class="nav-link py-2 d-flex align-items-center" href="#" style="transition: all 0.2s ease;">
                                    <i class="fas fa-users-cog me-2 text-white-50 fs-6"></i>
                                    <span style="font-weight: 500;">Sous-menu 5</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="sb-sidenav-footer px-3 py-2 text-center" style="background: rgba(0,0,0,0.2);">
            <small class="text-white-50" style="font-weight: 400;">© 2023 E3S</small>
        </div>
    </nav>
</div>

<style>
    /* Animation améliorée */
    .sb-sidenav .nav-link {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .sb-sidenav .nav-link:hover {
        background: rgba(255, 255, 255, 0.12);
        transform: translateX(5px);
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    }
    
    .sb-sidenav-menu-nested .nav-link:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(8px);
        padding-left: 1.5rem !important;
    }
    
    /* Effet d'ouverture fluide */
    .collapse {
        transition: height 0.35s ease, opacity 0.3s ease;
    }
    
    /* Icônes des sous-menus */
    .sb-sidenav-menu-nested .sb-nav-link-icon {
        width: 20px;
        text-align: center;
        opacity: 0.8;
    }
    
    /* Style des chevrons */
    .nav-link:not(.collapsed) .fa-chevron-down {
        transform: rotate(180deg);
    }
    
    .nav-link .fa-chevron-right {
        transition: transform 0.2s ease;
    }
    
    .nav-link:hover .fa-chevron-right {
        transform: translateX(3px);
    }
    
    /* Police améliorée */
    body {
        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }
</style>