Optimize JS for navigation and captcha

src/components/Captcha/Captcha.astro

@@ -1,15 +1,14 @@
 ---
 ---
 
+<script src='./captcha.js'></script>
+
 <script
   src='https://www.google.com/recaptcha/api.js?onload=onCaptchaLoad&render=explicit'
   async
   defer
-  slot='after-header'
 ></script>
 
-<script src='./captcha.js'></script>
-
 <!-- Captcha form start -->
 <div class='recaptcha-field mb-2'></div>
 <input type='hidden' name='g-recaptcha-response' class='recaptcha-response' />

src/components/Navigation.astro

@@ -1,9 +1,7 @@
 ---
-import Icon from '../Icon.astro';
+import Icon from './Icon.astro';
 ---
 
-<script src='./navigation.js'></script>
-
 <div class='bg-slate-900 text-white py-5 sm:py-8'>
   <nav class='container flex items-center justify-between'>
     <a class='font-medium text-lg flex items-center text-white' href='/'>
@@ -37,6 +35,7 @@ import Icon from '../Icon.astro';
       id='show-mobile-navigation'
       class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer'
       aria-label='Menu'
+      onclick="document.getElementById('mobile-navigation').classList.remove('hidden');"
     >
       <Icon icon='hamburger' />
     </button>
@@ -44,11 +43,13 @@ import Icon from '../Icon.astro';
     <!-- Mobile Navigation Items -->
     <div
       id='mobile-navigation'
-      class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center hidden'
+      class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center flex hidden'
     >
       <button
         id='close-mobile-navigation'
         class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6'
+        aria-label='Close Menu'
+        onclick="document.getElementById('mobile-navigation').classList.add('hidden');"
       >
         <Icon icon='close' />
       </button>

src/components/Navigation/navigation.js

@@ -1,46 +0,0 @@
-class Navigation {
-  constructor() {
-    this.showNavigationId = 'show-mobile-navigation';
-    this.navigationId = 'mobile-navigation';
-    this.closeNavigationId = 'close-mobile-navigation';
-
-    this.init = this.init.bind(this);
-    this.onDOMLoaded = this.onDOMLoaded.bind(this);
-    this.showNavigation = this.showNavigation.bind(this);
-    this.closeNavigation = this.closeNavigation.bind(this);
-  }
-
-  get showNavigationEl() {
-    return document.getElementById(this.showNavigationId);
-  }
-
-  get navigationEl() {
-    return document.getElementById(this.navigationId);
-  }
-
-  get closeNavigationEl() {
-    return document.getElementById(this.closeNavigationId);
-  }
-
-  showNavigation() {
-    this.navigationEl.classList.remove('hidden');
-    this.navigationEl.classList.add('flex');
-  }
-
-  closeNavigation() {
-    this.navigationEl.classList.add('hidden');
-    this.navigationEl.classList.remove('flex');
-  }
-
-  onDOMLoaded() {
-    this.showNavigationEl.addEventListener('click', this.showNavigation);
-    this.closeNavigationEl.addEventListener('click', this.closeNavigation);
-  }
-
-  init() {
-    window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-  }
-}
-
-const navigation = new Navigation();
-navigation.init();

src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
 import '../styles/global.css';
-import Navigation from '../components/Navigation/Navigation.astro';
+import Navigation from '../components/Navigation.astro';
 import OpenSourceBanner from '../components/OpenSourceBanner.astro';
 import Footer from '../components/Footer.astro';
 import type { SponsorType } from '../components/Sponsor/Sponsor.astro';