383 lines
13 KiB
JavaScript
383 lines
13 KiB
JavaScript
// layout.js — Inject sidebar + header into every page
|
|
// Usage: call initLayout('page-id') at the top of each page script
|
|
|
|
export function initLayout(activePageId) {
|
|
const pageNames = {
|
|
'dashboard': { title: "Dashboard", sub: "Assalamu'alaikum, Admin Masjid" },
|
|
'log': { title: "Log Transaksi Donasi", sub: "Log Donasi" },
|
|
'pengeluaran': { title: "Pengeluaran Dana", sub: "Pengeluaran" },
|
|
'laporan': { title: "Laporan Kas", sub: "Laporan" },
|
|
};
|
|
|
|
const navLinks = [
|
|
{ id: 'dashboard', href: 'index.html', icon: 'fa-border-all', label: 'Dashboard' },
|
|
{ id: 'log', href: 'log.html', icon: 'fa-clock-rotate-left', label: 'Log Donasi' },
|
|
{ id: 'pengeluaran', href: 'pengeluaran.html', icon: 'fa-money-bill-transfer', label: 'Pengeluaran' },
|
|
{ id: 'laporan', href: 'laporan.html', icon: 'fa-file-lines', label: 'Laporan' },
|
|
];
|
|
|
|
const navHTML = navLinks.map(n => `
|
|
<li>
|
|
<a href="${n.href}" class="nav-item ${n.id === activePageId ? 'active' : ''}">
|
|
<i class="fa-solid ${n.icon}"></i> ${n.label}
|
|
</a>
|
|
</li>
|
|
`).join('');
|
|
|
|
const info = pageNames[activePageId];
|
|
|
|
document.body.insertAdjacentHTML('afterbegin', `
|
|
<div class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<i class="fa-solid fa-mosque fa-2x"></i>
|
|
<h2>Smart Donation<br>Box</h2>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<ul>${navHTML}</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<main class="main-content">
|
|
<header class="header">
|
|
<div class="header-title">
|
|
<h1>${info.title}</h1>
|
|
<p>${info.sub}</p>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-toggle" class="btn-theme">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
<!-- Profile button with dropdown -->
|
|
<div class="profile-wrapper" id="profile-wrapper">
|
|
<div class="profile" id="profile-btn" style="cursor:pointer;" title="Klik untuk opsi akun">
|
|
<img src="https://ui-avatars.com/api/?name=Admin+Masjid&background=E2E8F0&color=10B981" alt="Profile">
|
|
<span>Admin Masjid</span>
|
|
<i class="fa-solid fa-chevron-down" id="chevron-icon" style="font-size:11px; color:var(--text-muted); transition:transform 0.3s;"></i>
|
|
</div>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div class="profile-dropdown" id="profile-dropdown">
|
|
<div class="dropdown-header">
|
|
<img src="https://ui-avatars.com/api/?name=Admin+Masjid&background=D1FAE5&color=10B981&size=48" alt="Profile">
|
|
<div>
|
|
<div style="font-weight:600; font-size:14px;">Admin Masjid</div>
|
|
<div style="font-size:12px; color:var(--text-muted);">Administrator</div>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<button class="dropdown-item dropdown-logout" id="btn-logout">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
Keluar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="content-area" id="content-area"></div>
|
|
</main>
|
|
|
|
<!-- Logout Confirmation Modal -->
|
|
<div class="modal-overlay" id="modal-overlay">
|
|
<div class="modal-box" id="modal-box">
|
|
<div class="modal-icon">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
</div>
|
|
<h3 class="modal-title">Konfirmasi Keluar</h3>
|
|
<p class="modal-desc">Apakah Anda yakin ingin keluar dari sistem monitoring?</p>
|
|
<div class="modal-actions">
|
|
<button class="modal-btn-cancel" id="modal-cancel">
|
|
<i class="fa-solid fa-xmark"></i> Tidak, Tetap Di Sini
|
|
</button>
|
|
<button class="modal-btn-logout" id="modal-confirm">
|
|
<i class="fa-solid fa-right-from-bracket"></i> Ya, Keluar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
/* ── Inject dropdown + modal styles ── */
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
/* Profile Wrapper */
|
|
.profile-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--card-bg);
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--border-color);
|
|
transition: background-color 0.3s ease, border-color 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.profile:hover {
|
|
border-color: var(--primary-green);
|
|
background: var(--primary-green-light);
|
|
}
|
|
|
|
.profile img { width: 32px; height: 32px; border-radius: 50%; }
|
|
.profile span { font-size: 14px; font-weight: 500; }
|
|
|
|
/* Dropdown */
|
|
.profile-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
|
min-width: 220px;
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.97);
|
|
pointer-events: none;
|
|
transition: opacity 0.22s ease, transform 0.22s ease;
|
|
}
|
|
|
|
.profile-dropdown.open {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.dropdown-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.dropdown-header img {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--primary-green-light);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 13px 16px;
|
|
background: none;
|
|
border: none;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-main);
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.dropdown-logout {
|
|
color: var(--danger-red) !important;
|
|
margin: 6px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dropdown-logout:hover {
|
|
background: rgba(239,68,68,0.08) !important;
|
|
}
|
|
|
|
/* ── Modal Overlay ── */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.45);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.modal-box {
|
|
background: var(--card-bg);
|
|
border-radius: 20px;
|
|
padding: 36px 32px 28px;
|
|
max-width: 380px;
|
|
width: 90%;
|
|
text-align: center;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
|
transform: scale(0.88) translateY(20px);
|
|
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-overlay.show .modal-box {
|
|
transform: scale(1) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: rgba(239,68,68,0.1);
|
|
color: var(--danger-red);
|
|
font-size: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.modal-desc {
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-btn-cancel {
|
|
flex: 1;
|
|
padding: 11px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
background: var(--bg-color);
|
|
color: var(--text-main);
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.modal-btn-cancel:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.modal-btn-logout {
|
|
flex: 1;
|
|
padding: 11px 16px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: var(--danger-red);
|
|
color: #fff;
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.modal-btn-logout:hover {
|
|
background: #DC2626;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
/* ── Dark mode logic ── */
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = themeToggle.querySelector('i');
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.classList.replace('fa-moon', 'fa-sun');
|
|
}
|
|
themeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('dark-mode');
|
|
const isDark = document.body.classList.contains('dark-mode');
|
|
themeIcon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
});
|
|
|
|
/* ── Profile Dropdown toggle ── */
|
|
const profileBtn = document.getElementById('profile-btn');
|
|
const dropdown = document.getElementById('profile-dropdown');
|
|
const chevron = document.getElementById('chevron-icon');
|
|
|
|
profileBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const isOpen = dropdown.classList.toggle('open');
|
|
chevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', () => {
|
|
dropdown.classList.remove('open');
|
|
chevron.style.transform = 'rotate(0deg)';
|
|
});
|
|
|
|
/* ── Logout button in dropdown → show modal ── */
|
|
const btnLogout = document.getElementById('btn-logout');
|
|
const overlay = document.getElementById('modal-overlay');
|
|
const modalCancel = document.getElementById('modal-cancel');
|
|
const modalConfirm= document.getElementById('modal-confirm');
|
|
|
|
function showModal() {
|
|
dropdown.classList.remove('open');
|
|
chevron.style.transform = 'rotate(0deg)';
|
|
overlay.classList.add('show');
|
|
}
|
|
|
|
function hideModal() {
|
|
overlay.classList.remove('show');
|
|
}
|
|
|
|
function doLogout() {
|
|
localStorage.removeItem('isLoggedIn');
|
|
window.location.href = 'login.html';
|
|
}
|
|
|
|
btnLogout.addEventListener('click', showModal);
|
|
modalCancel.addEventListener('click', hideModal);
|
|
modalConfirm.addEventListener('click', doLogout);
|
|
|
|
// Close modal on overlay background click
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) hideModal();
|
|
});
|
|
|
|
// Expose global logout for backward compat (index.html calls window.logout)
|
|
window.logout = showModal;
|
|
}
|