Fix burger menu functionality

Author: Paul Adams

app.js

@@ -111,27 +111,6 @@ document.addEventListener("DOMContentLoaded", () => {
       .join("");
   }
 
-  const menuToggle = document.querySelector(".menu-toggle");
-  const leftPanel = document.querySelector(".left-panel");
-
-  if (menuToggle && leftPanel) {
-    menuToggle.addEventListener("click", (e) => {
-      e.stopPropagation();
-      menuToggle.classList.toggle("active");
-      leftPanel.classList.toggle("active");
-    });
-
-    const navLinks = leftPanel.querySelectorAll("a");
-    navLinks.forEach((link) => {
-      link.addEventListener("click", () => {
-        if (leftPanel.classList.contains("active")) {
-          menuToggle.classList.remove("active");
-          leftPanel.classList.remove("active");
-        }
-      });
-    });
-  }
-
   const logoLetters = logo.querySelectorAll("span");
 
   let lastTime = 0;

style.css

@@ -303,6 +303,36 @@ main a:hover {
   border-radius: 5px;
 }
 
+.menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 10px;
+  z-index: 1001;
+}
+
+.menu-toggle span {
+  display: block;
+  width: 25px;
+  height: 3px;
+  background-color: #0f0;
+  margin: 5px 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.menu-toggle.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.menu-toggle.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.menu-toggle.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -6px);
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   header {