Estoy tratando de animar un menú de hamburguesas para que se transforme en una 'x' cuando se hace clic en él. El javascript funciona en un archivo html normal, pero cuando se integra con django por alguna razón no funciona. (También he comprobado que javascript está vinculado correctamente a la plantilla de django).

 const hamburger = document.querySelector(".hamburger"); hamburger.addEventListener("click", menu); function menu() { hamburger.classList.toggle("active"); }

 <link rel="stylesheet" href="{% static 'lng/css/navbar.css' %}" /> <link rel="stylesheet" href="{% static 'lng/css/main.css' %}" /> <script src="{% static 'lng/js/main.js' %} " type="text/javascript"></script> <button class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button>

 .hamburger { display: inline; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; cursor: pointer; transition: 0.1s; } .hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: var(--dark); border-radius: 6px; z-index: 1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger:active .bar:nth-child(2){ opacity: 0; } .hamburger:active .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } .hamburger:active .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }```