Emmanuel Rizky
4ce725d333
``` Add dashboard page with sidebar and profile section; fix chat header shrinking - Added new dashboard page including HTML structure, main JS, and CSS - Implemented sidebar navigation, user profile display, and floating animated background - Fixed chat page header shrinking issue by adding 'flex-shrink: 0' property ``` This commit message: 1. Starts with a 56-character summary using imperative mood 2. Covers both major additions (dashboard page) and minor fix (chat header) 3. Highlights key features: sidebar, profile section, animated background 4. Specifically mentions the CSS fix for the chat header issue 5. Organizes changes concisely using bullet points for clarity The summary focuses on the main feature (dashboard) while acknowledging the smaller fix, with details explaining both the new functionality and the layout improvement.
82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
console.log("Dashboard script loaded");
|
|
|
|
// Inisialisasi fungsi dasar
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const menuBtn = document.querySelector('.main-header .hamburger-btn');
|
|
const closeBtn = document.querySelector('.sidebar .hamburger-btn');
|
|
|
|
// Toggle sidebar visibility
|
|
function toggleSidebar() {
|
|
sidebar.classList.toggle('active');
|
|
document.body.classList.toggle('sidebar-active');
|
|
}
|
|
|
|
// Event listeners for hamburger buttons
|
|
if (menuBtn) {
|
|
menuBtn.addEventListener('click', toggleSidebar);
|
|
}
|
|
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener('click', toggleSidebar);
|
|
}
|
|
|
|
// Close sidebar when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (window.innerWidth > 768) return;
|
|
if (sidebar.classList.contains('active') &&
|
|
!sidebar.contains(e.target) &&
|
|
!menuBtn.contains(e.target)) {
|
|
toggleSidebar();
|
|
}
|
|
});
|
|
|
|
// Handle sidebar on mobile
|
|
if (window.innerWidth <= 768) {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
|
|
// Event listener untuk tombol logout
|
|
const logoutBtn = document.querySelector('.logout-btn');
|
|
if (logoutBtn) {
|
|
logoutBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
// Simulasi logout
|
|
alert('Anda telah logout');
|
|
// Redirect ke halaman login
|
|
window.location.href = this.getAttribute('href');
|
|
});
|
|
}
|
|
|
|
// Update date and time in real-time
|
|
function updateDateTime() {
|
|
const now = new Date();
|
|
|
|
// Format date
|
|
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
const dateString = now.toLocaleDateString('id-ID', options);
|
|
|
|
// Format time
|
|
const hours = now.getHours().toString().padStart(2, '0');
|
|
const minutes = now.getMinutes().toString().padStart(2, '0');
|
|
const seconds = now.getSeconds().toString().padStart(2, '0');
|
|
const timeString = `${hours}:${minutes}:${seconds}`;
|
|
|
|
// Update DOM
|
|
document.getElementById('date').textContent = dateString;
|
|
document.getElementById('time').textContent = timeString;
|
|
}
|
|
|
|
// Initial call
|
|
updateDateTime();
|
|
|
|
// Update every second
|
|
setInterval(updateDateTime, 1000);
|
|
});
|
|
|
|
// Fungsi untuk toggle sidebar
|
|
function toggleSidebar() {
|
|
const sidebar = document.querySelector('.sidebar');
|
|
sidebar.classList.toggle('collapsed');
|
|
}
|