Fixed some menu bugs

map/app/public/js/admin.js

@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
     loadCurrentStartLocation();
     setupEventListeners();
     setupNavigation();
+    setupMobileMenu(); // Add this line
     
     // Check if URL has a hash to show specific section
     const hash = window.location.hash;
@@ -42,6 +43,54 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
+// Add mobile menu functionality
+function setupMobileMenu() {
+    const menuToggle = document.getElementById('mobile-menu-toggle');
+    const sidebar = document.getElementById('admin-sidebar');
+    const closeSidebar = document.getElementById('close-sidebar');
+    const adminNavLinks = document.querySelectorAll('.admin-nav a');
+    
+    if (menuToggle && sidebar) {
+        // Toggle menu
+        menuToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('active');
+            menuToggle.classList.toggle('active');
+            document.body.classList.toggle('sidebar-open'); // This line already exists
+        });
+        
+        // Close sidebar button
+        if (closeSidebar) {
+            closeSidebar.addEventListener('click', () => {
+                sidebar.classList.remove('active');
+                menuToggle.classList.remove('active');
+                document.body.classList.remove('sidebar-open');
+            });
+        }
+        
+        // Close sidebar when clicking outside
+        document.addEventListener('click', (e) => {
+            if (sidebar.classList.contains('active') && 
+                !sidebar.contains(e.target) && 
+                !menuToggle.contains(e.target)) {
+                sidebar.classList.remove('active');
+                menuToggle.classList.remove('active');
+                document.body.classList.remove('sidebar-open');
+            }
+        });
+        
+        // Close sidebar when navigation link is clicked on mobile
+        adminNavLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                if (window.innerWidth <= 768) {
+                    sidebar.classList.remove('active');
+                    menuToggle.classList.remove('active');
+                    document.body.classList.remove('sidebar-open');
+                }
+            });
+        });
+    }
+}
+
 // Check if user is authenticated as admin
 async function checkAdminAuth() {
     try {
@@ -53,12 +102,24 @@ async function checkAdminAuth() {
             return;
         }
         
-        // Display admin info
+        // Display admin info (desktop)
         document.getElementById('admin-info').innerHTML = `
             <span>👤 ${escapeHtml(data.user.email)}</span>
             <button id="logout-btn" class="btn btn-secondary btn-sm">Logout</button>
         `;
         
+        // Display admin info (mobile)
+        const mobileAdminInfo = document.getElementById('mobile-admin-info');
+        if (mobileAdminInfo) {
+            mobileAdminInfo.innerHTML = `
+                <div>👤 ${escapeHtml(data.user.email)}</div>
+                <button id="mobile-logout-btn" class="btn btn-secondary btn-sm" style="margin-top: 10px; width: 100%;">Logout</button>
+            `;
+            
+            // Add logout listener for mobile button
+            document.getElementById('mobile-logout-btn')?.addEventListener('click', handleLogout);
+        }
+        
         document.getElementById('logout-btn').addEventListener('click', handleLogout);
         
     } catch (error) {
@@ -881,17 +942,42 @@ async function handleLogout() {
 
 // Show status message
 function showStatus(message, type = 'info') {
-    const container = document.getElementById('status-container');
+    let container = document.getElementById('status-container');
+    
+    // Create container if it doesn't exist
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'status-container';
+        container.className = 'status-container';
+        document.body.appendChild(container);
+    }
     
     const messageDiv = document.createElement('div');
     messageDiv.className = `status-message ${type}`;
     messageDiv.textContent = message;
     
+    // Add click to dismiss functionality
+    messageDiv.addEventListener('click', () => {
+        messageDiv.remove();
+    });
+    
+    // Add a small close button for better UX
+    const closeBtn = document.createElement('span');
+    closeBtn.innerHTML = ' ×';
+    closeBtn.style.float = 'right';
+    closeBtn.style.fontWeight = 'bold';
+    closeBtn.style.marginLeft = '10px';
+    closeBtn.style.cursor = 'pointer';
+    closeBtn.setAttribute('title', 'Click to dismiss');
+    messageDiv.appendChild(closeBtn);
+    
     container.appendChild(messageDiv);
     
     // Auto-remove after 5 seconds
     setTimeout(() => {
-        messageDiv.remove();
+        if (messageDiv.parentNode) {
+            messageDiv.remove();
+        }
     }, 5000);
 }