From 8120a544bfcface30502898a1d875e9d7de35f76 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 4 Jan 2023 00:42:03 +0400
Subject: [PATCH] Optimize JS for navigation and captcha

---
 src/components/Captcha/Captcha.astro          |  5 +-
 .../{Navigation => }/Navigation.astro         |  9 ++--
 src/components/Navigation/navigation.js       | 46 -------------------
 src/layouts/BaseLayout.astro                  |  2 +-
 4 files changed, 8 insertions(+), 54 deletions(-)
 rename src/components/{Navigation => }/Navigation.astro (89%)
 delete mode 100644 src/components/Navigation/navigation.js

diff --git a/src/components/Captcha/Captcha.astro b/src/components/Captcha/Captcha.astro
index 9eefa9c10..09f3d0a38 100644
--- a/src/components/Captcha/Captcha.astro
+++ b/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' />
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation.astro
similarity index 89%
rename from src/components/Navigation/Navigation.astro
rename to src/components/Navigation.astro
index 578fc4fbd..e9fde5ec8 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/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>
diff --git a/src/components/Navigation/navigation.js b/src/components/Navigation/navigation.js
deleted file mode 100644
index 63e510d7a..000000000
--- a/src/components/Navigation/navigation.js
+++ /dev/null
@@ -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();
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6d9aaf269..23bc3fb61 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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';