Update public/script.js

public/script.js

@@ -1,12 +1,14 @@
 let menuVisible = false;
 
 document.addEventListener("DOMContentLoaded", () => {
+    
     fetch('/jonellmagallanes')
         .then(response => response.json())
         .then(data => {
             const apiList = document.getElementById('api-list');
             const categories = {};
 
+            
             data.forEach(api => {
                 if (!categories[api.category]) {
                     categories[api.category] = [];
@@ -14,21 +16,27 @@ document.addEventListener("DOMContentLoaded", () => {
                 categories[api.category].push(api);
             });
 
+            
             const sortedCategories = Object.keys(categories).sort();
 
             sortedCategories.forEach(category => {
+                
                 const categoryButton = document.createElement('button');
                 categoryButton.className = "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-300 ease-in-out transform hover:scale-105";
                 categoryButton.textContent = category;
                 categoryButton.onclick = () => toggleCategory(categoryButton);
                 apiList.appendChild(categoryButton);
 
+                
                 const categoryDiv = document.createElement('div');
                 categoryDiv.id = category;
                 categoryDiv.className = 'hidden px-4 py-2';
 
                 categories[category].forEach(api => {
+                    
                     const fullUsage = `${api.usages}${api.query || ''}`;
+
+                    
                     const apiDiv = document.createElement('div');
                     apiDiv.innerHTML = `
                         <strong>${api.name}</strong>
@@ -44,24 +52,31 @@ document.addEventListener("DOMContentLoaded", () => {
             });
         });
 
+    
     fetch('/requests')
         .then(response => response.json())
         .then(data => {
             document.getElementById('request-count').textContent = `Request API: ${data.request}`;
         });
 
+    
     setInterval(updateTime, 1000);
+
+    
     document.getElementById('user-agent').textContent = `User Agent: ${navigator.userAgent}`;
 
+    
     fetch('https://api.ipify.org?format=json')
         .then(response => response.json())
         .then(data => {
             document.getElementById('ip').textContent = `IP Address: ${data.ip}`;
         });
 
+    
     document.getElementById('device-info').classList.add('fade-in');
 });
 
+
 function toggleCategory(button) {
     const allButtons = document.querySelectorAll('#api-list > button');
     allButtons.forEach(btn => btn.classList.remove('highlighted'));
@@ -72,30 +87,24 @@ function toggleCategory(button) {
     categoryDiv.classList.add('pop-up');
 }
 
+
 function tryApi(fullUsage) {
     window.location.href = fullUsage;
 }
 
+
 function toggleMenu() {
     const menu = document.getElementById('menu');
-    const toggleButton = document.getElementById('toggle-button');
 
     if (menuVisible) {
+        
         menu.classList.remove('slide-in');
         menu.classList.add('slide-out');
-        toggleButton.classList.remove('toggle-icon-vertical');
-        toggleButton.classList.add('toggle-icon-horizontal');
-        setTimeout(() => {
-            menu.classList.add('hidden');
-            toggleButton.style.zIndex = 1001;
-        }, 500);
+        setTimeout(() => menu.classList.add('hidden'), 400);
     } else {
-        menu.classList.remove('hidden');
-        menu.classList.remove('slide-out');
+        
+        menu.classList.remove('hidden', 'slide-out');
         menu.classList.add('slide-in');
-        toggleButton.classList.remove('toggle-icon-horizontal');
-        toggleButton.classList.add('toggle-icon-vertical');
-        toggleButton.style.zIndex = 1001;
     }
 
     menuVisible = !menuVisible;