AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: memperbaiki responsivitas header pada tampilan mobile

Browse Source
This commit is contained in:
Aleksander William
2026-06-10 17:34:09 +07:00
parent 1cf6967e46
commit d258e37c02
3 changed files with 235 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/index.php
+69 -4
View File
@@ -135,7 +135,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
</a>
<?php endif; ?>
<div style="width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 4px;"></div>
<div style="width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 4px;" class="header-tools-divider"></div>
<div class="tool-btn" id="connection-status" title="Status Koneksi">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -150,6 +150,61 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Hamburger Menu Button (Mobile Only) -->
<button class="hamburger-menu-btn" id="hamburger-menu-btn" onclick="toggleMobileMenu(event)" title="Menu">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Dropdown Menu (Mobile Only) -->
<div class="mobile-menu-dropdown" id="mobile-menu-dropdown">
<?php if ($isAdmin): ?>
<div class="mobile-menu-user">
<img src="<?php echo htmlspecialchars($_SESSION['avatar']); ?>" class="mobile-avatar" alt="Avatar">
<div>
<div class="mobile-username"><?php echo htmlspecialchars($_SESSION['username']); ?></div>
<div class="mobile-role">Admin</div>
</div>
</div>
<div class="mobile-menu-divider"></div>
<?php endif; ?>
<?php if ($isAdmin): ?>
<a href="logout.php" class="mobile-menu-item logout-link">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
<span>Logout</span>
</a>
<?php else: ?>
<a href="login.php" class="mobile-menu-item">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
<span>Login Operator</span>
</a>
<?php endif; ?>
<div class="mobile-menu-divider"></div>
<div class="mobile-menu-item" id="mobile-connection-status">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
</svg>
<span><strong id="mobile-connection-text">Online</strong></span>
</div>
<div class="mobile-menu-item" id="mobile-about-btn">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Tentang Aplikasi</span>
</div>
</div>
</div>
</div>
@@ -378,10 +433,20 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
if (dropdown) dropdown.classList.toggle('active');
}
// Tutup dropdown saat klik di luar area profil
// Toggle mobile hamburger menu
function toggleMobileMenu(e) {
e.stopPropagation();
var menu = document.getElementById('mobile-menu-dropdown');
if (menu) menu.classList.toggle('active');
}
// Tutup dropdown saat klik di luar area profil / menu mobile
document.addEventListener('click', function() {
var dropdown = document.getElementById('profile-dropdown');
if (dropdown) dropdown.classList.remove('active');
var menu = document.getElementById('mobile-menu-dropdown');
if (menu) menu.classList.remove('active');
});
</script>
@@ -401,9 +466,9 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
</div>
<h4 class="app-title">WebGIS Poverty Map</h4>
<p class="app-desc">Sistem Pemetaan Penduduk Miskin Kota Pontianak. Aplikasi ini dirancang untuk memetakan penyebaran penduduk miskin serta mempermudah analisis spasial sebaran bantuan sosial di sekitar rumah ibadah secara dinamis.</p>
<div class="modal-divider"></div>
<div class="credits-section">
<div class="credit-row">
<span class="credit-label">Pengembang:</span>