fix: memperbaiki responsivitas header pada tampilan mobile

WebGISPovertyMap/style.css

@@ -468,6 +468,14 @@ body {
     flex-shrink: 0;
 }
 
+.hamburger-menu-btn {
+    display: none;
+}
+
+.mobile-menu-dropdown {
+    display: none;
+}
+
 .tool-btn {
     background: rgba(255, 255, 255, 0.07);
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1758,9 +1766,128 @@ body {
         gap: 4px;
     }
 
-    .tool-btn {
-        width: 30px;
-        height: 30px;
+    .header-tools-divider,
+    .user-profile-menu,
+    .auth-btn,
+    #connection-status,
+    #about-btn {
+        display: none !important;
+    }
+
+    .hamburger-menu-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.07);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        width: 34px;
+        height: 34px;
+        color: #94a3b8;
+        cursor: pointer;
+        transition: all 0.15s;
+    }
+
+    .hamburger-menu-btn:hover {
+        background: rgba(255, 255, 255, 0.12);
+        color: #e2e8f0;
+    }
+
+    .hamburger-menu-btn svg {
+        width: 18px;
+        height: 18px;
+    }
+
+    .mobile-menu-dropdown {
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 10px;
+        width: 200px;
+        background: rgba(15, 23, 42, 0.96);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-lg);
+        padding: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        z-index: 1250;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-8px) scale(0.95);
+        transform-origin: top right;
+        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .mobile-menu-dropdown.active {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0) scale(1);
+        display: flex;
+    }
+
+    .mobile-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #cbd5e1;
+        text-decoration: none;
+        border-radius: 6px;
+        transition: all 0.15s ease;
+        cursor: pointer;
+    }
+
+    .mobile-menu-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #f1f5f9;
+    }
+
+    .mobile-menu-item svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    .mobile-menu-divider {
+        height: 1px;
+        background: rgba(255, 255, 255, 0.06);
+        margin: 4px 6px;
+    }
+
+    .mobile-menu-user {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+    }
+
+    .mobile-avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 1.5px solid var(--primary);
+        object-fit: cover;
+    }
+
+    .mobile-username {
+        font-size: 13px;
+        font-weight: 700;
+        color: #f8fafc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 130px;
+    }
+
+    .mobile-role {
+        font-size: 10.5px;
+        color: #64748b;
+        margin-top: 1px;
     }
 
     /* Sidebar Full-width (100%) */