correctly switch the icon when toggling menu

js/activateNav.js

@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", () => {
         const targetElement = document.getElementById(burger.dataset.target);
         burger.classList.toggle("navbar__menu--active");
 
-        const maybeIcon = burger.querySelector(":root > i.fa");
+        const maybeIcon = burger.querySelector(":scope > i.fas");
         if (maybeIcon) {
             if (maybeIcon.classList.contains("fa-bars")) {
                 maybeIcon.classList.replace("fa-bars", "fa-xmark");

src/@include/head.njk

-{% macro headTags() %}<link href="/static/style.normalize.d45aef83.css" rel="stylesheet"><link href="/static/style.4853d370.css" rel="stylesheet"><link href="/static/style.fa.1cd4a1a9.css" rel="stylesheet">{% endmacro %} {% macro bodyTags() %}<script defer="" src="/static/activateNav.4611fcd3.js"></script>{% endmacro %}
\ No newline at end of file
+{% macro headTags() %}<link href="/static/style.normalize.d45aef83.css" rel="stylesheet"><link href="/static/style.89952a51.css" rel="stylesheet"><link href="/static/style.fa.1cd4a1a9.css" rel="stylesheet">{% endmacro %} {% macro bodyTags() %}<script defer="" src="/static/activateNav.be7e364f.js"></script>{% endmacro %}
\ No newline at end of file