<!-- เพิ่ม Bootstrap 5 CSS และ Icon ใน head --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <link rel="stylesheet" href="/css/partials/header.css"> <aside class="sidebar"> <div class="sidebar-header"> <h2></i> เว็บจัดการชมรม</h2> <% if (user) { %> <div class="user-info"> <p class="mb-1 fw-bold text-dark">สวัสดี <%= user.username %></p> <small class="text-muted"><i class="bi bi-person-badge"></i> <%= user.role %></small> </div> <% } else { %> <div class="user-info"> <p class="mb-2 fw-bold text-dark">สวัสดี Guest</p> <div class="d-grid gap-2"> <a href="/" class="btn btn-sm btn-outline-primary"><i class="bi bi-box-arrow-in-right"></i> Login</a> <a href="/register" class="btn btn-sm btn-primary"><i class="bi bi-person-plus"></i> Register</a> </div> </div> <% } %> </div> <nav class="sidebar-nav"> <ul class="nav flex-column"> <li class="nav-item"> <a href="/index" class="nav-link" id="index"> <i class="bi bi-calendar-event"></i> Activity </a> </li> <li class="nav-item"> <a href="/dashboard" class="nav-link" id="dashboard"> <i class="bi bi-speedometer2"></i> Dashboard </a> </li> <li class="nav-item"> <a href="/booking" class="nav-link" id="booking"> <i class="bi bi-journal-check"></i> Booking </a> </li> <li class="nav-item"> <a href="/chat" class="nav-link" id="chat"> <i class="bi bi-chat-dots"></i> Chat </a> </li> <li class="nav-item"> <a href="/settings" class="nav-link" id="settings"> <i class="bi bi-gear"></i> Settings </a> </li> </ul> </nav> <% if (user) { %> <div class="logout-btn"> <a href="/auth/logout" class="btn btn-outline-danger"> <i class="bi bi-box-arrow-left"></i> Logout </a> </div> <% } %> </aside>