Update FontAwesome

index.html

@@ -9,7 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <link rel="icon" type="image/x-icon" href="images/favicon.ico">
     <script src="scripts/main.js" defer></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+    <script src="https://kit.fontawesome.com/18fe617275.js" crossorigin="anonymous"></script>
 
     <!-- Add any additional meta tags and scripts here -->
 </head>

scripts/main.js

@@ -1,34 +1,40 @@
 document.addEventListener('DOMContentLoaded', function () {
-    const mainMenuToggle = document.querySelector('.header-content > .menu-toggle');
-    const dropdownToggle = document.querySelector('.menu-item-dropdown > a');
+    const menuToggle = document.querySelector('.menu-toggle');
     const mainMenu = document.querySelector('.main-menu');
-    const submenu = document.querySelector('.submenu');
 
     // Toggle main menu
-    mainMenuToggle.addEventListener('click', function () {
+    menuToggle.addEventListener('click', function () {
         mainMenu.classList.toggle('show');
     });
 
-    // Toggle submenu on mobile
-    dropdownToggle.addEventListener('click', function (event) {
-        // Prevent default link behaviour only on mobile
-        if (window.innerWidth <= 768) {
-            event.preventDefault();
-            submenu.classList.toggle('show');
-        }
+    // Add event listeners to all dropdown toggles
+    document.querySelectorAll('.menu-item-dropdown').forEach(function (dropdown) {
+        const toggle = dropdown.querySelector('a');
+        const submenu = dropdown.querySelector('.submenu');
+
+        toggle.addEventListener('click', function (event) {
+            if (window.innerWidth <= 768) {
+                event.preventDefault(); // Prevent the default anchor behavior
+                submenu.classList.toggle('show'); // Toggle the `.show` class on the submenu
+            }
+        });
     });
 
     // Close the submenu if clicking outside of it
     window.addEventListener('click', function (event) {
         if (!event.target.matches('.menu-item-dropdown > a') && !event.target.closest('.submenu')) {
-            submenu.classList.remove('show');
+            document.querySelectorAll('.submenu').forEach(function (submenu) {
+                submenu.classList.remove('show');
+            });
         }
     });
 
     // Close dropdown when resizing to wider screens
     window.addEventListener('resize', function () {
         if (window.innerWidth > 768) {
-            submenu.classList.remove('show');
+            document.querySelectorAll('.submenu').forEach(function (submenu) {
+                submenu.classList.remove('show');
+            });
         }
     });
 });