_navbar.html

<!-- Unified Navigation Bar Component -->
<!-- Copy this to all pages: index.html, login.html, register.html, student.html, student_history.html, lecturer.html -->

<nav class="navbar">
  <div class="container navbar-content">
    <a href="/" class="navbar-brand">✨ Attendr</a>
    <ul class="navbar-nav">
      <li><a href="/" class="navbar-link">Home</a></li>
      {% if current_user %} {% if current_user.role == 'student' %}
      <li><a href="/student" class="navbar-link">Mark Attendance</a></li>
      <li><a href="/student/history" class="navbar-link">History</a></li>
      {% elif current_user.role == 'lecturer' %}
      <li><a href="/lecturer" class="navbar-link">Dashboard</a></li>
      <li><a href="/lecturer/history" class="navbar-link">History</a></li>
      {% elif current_user.role == 'admin' %}
      <li><a href="/admin" class="navbar-link">Admin Dashboard</a></li>
      {% endif %}
      <li>
        <span class="navbar-link" style="color: var(--color-primary)"
          >👤 {{ current_user.name }}</span
        >
      </li>
      <li><a href="#" onclick="logout()" class="navbar-link">Logout</a></li>
      {% else %}
      <li><a href="/login" class="navbar-link">Login</a></li>
      <li><a href="/register" class="navbar-link">Register</a></li>
      {% endif %}
    </ul>
  </div>
</nav>

<!-- Logout Script (add to pages that need it) -->
<script>
  async function logout() {
    if (!confirm("Are you sure you want to logout?")) return;

    try {
      const response = await fetch("/api/auth/logout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });

      const data = await response.json();

      if (data.success) {
        alert(data.message);
        window.location.href = "/";
      } else {
        alert("Logout failed");
      }
    } catch (error) {
      alert("Logout failed");
    }
  }
</script>