<!-- navbar.php -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5276;">
  <div class="container-fluid">
    <button class="btn btn-link btn-sm text-white" id="sidebarToggle">
      <i class="fas fa-bars"></i>
    </button>

    <a class="navbar-brand ms-3" href="index.php">TABLEAU DE BORD</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topNavbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="topNavbarContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown">
            <i class="fas fa-user-circle me-1"></i> Compte
          </a>
          <ul class="dropdown-menu dropdown-menu-end shadow-lg" style="border:none; border-radius:8px; overflow:hidden;">
            <li><a class="dropdown-item" href="role.php"><i class="fas fa-cog text-success me-2"></i> Paramètres et Rôles</a></li>
            <li><a class="dropdown-item" href="recap.php"><i class="fas fa-exclamation-triangle text-warning me-2"></i> Étudiants Irréguliers</a></li>
            <li><a class="dropdown-item" href="view_vacations.php"><i class="fas fa-calendar-alt text-info me-2"></i> Vacations</a></li>
            <li><hr class="dropdown-divider my-1"></li>
            <li><a class="dropdown-item" href="logout.php"><i class="fas fa-sign-out-alt text-danger me-2"></i> Déconnexion</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
    /* Style pour le dropdown en harmonie avec la palette verte */
    .dropdown-menu {
        background-color: #f8f9fa;
        border: none;
        min-width: 220px;
    }
    
    .dropdown-item {
        color: #2c3e50;
        font-weight: 500;
        padding: 0.5rem 1.2rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
    }
    
    .dropdown-item:hover {
        background-color: #27ae60;
        color: white;
        transform: translateX(3px);
    }
    
    .dropdown-item:hover i {
        color: white !important;
    }
    
    .dropdown-divider {
        border-color: rgba(0,0,0,0.1);
        margin: 0.3rem 0;
    }
    
    /* Animation du bouton toggle */
    #sidebarToggle {
        transition: transform 0.3s ease;
    }
    
    #sidebarToggle:hover {
        transform: scale(1.1);
    }
    
    /* Style pour le navbar-toggler */
    .navbar-toggler {
        border-color: rgba(255,255,255,0.5);
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    /* Effet de survol sur le menu principal */
    .nav-link.dropdown-toggle:hover {
        color: #2ecc71 !important;
    }
    
    /* Animation d'ouverture du dropdown */
    .dropdown-menu {
        animation: fadeIn 0.3s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>