Refactor HTML event handlers

src/components/Navigation.astro

@@ -32,24 +32,22 @@ import Icon from './Icon.astro';
 
     <!-- Mobile Navigation Button -->
     <button
-      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');"
+      show-mobile-nav
     >
       <Icon icon='hamburger' />
     </button>
 
     <!-- Mobile Navigation Items -->
     <div
-      id='mobile-navigation'
       class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center flex hidden'
+      mobile-nav
     >
       <button
-        id='close-mobile-navigation'
+        close-mobile-nav
         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>
@@ -80,3 +78,15 @@ import Icon from './Icon.astro';
     </div>
   </nav>
 </div>
+
+<script>
+  document.querySelector('[show-mobile-nav]')?.addEventListener('click', () => {
+    document.querySelector('[mobile-nav]')?.classList.remove('hidden');
+  });
+
+  document
+    .querySelector('[close-mobile-nav]')
+    ?.addEventListener('click', () => {
+      document.querySelector('[mobile-nav]')?.classList.add('hidden');
+    });
+</script>

src/components/Popup/Popup.astro

@@ -21,8 +21,7 @@ const { id, title, subtitle } = Astro.props;
     <div class='relative bg-white rounded-lg shadow popup-body'>
       <button
         type='button'
-        class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
-        onclick='this.closest(".popup").classList.add("hidden")'
+        class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center popup-close'
       >
         <Icon icon='close' />
         <span class='sr-only'>Close popup</span>

src/components/Popup/popup.js

@@ -31,8 +31,9 @@ export class Popup {
     const target = e.target;
     const popupBody = target.closest('.popup-body');
     const closestPopup = target.closest('.popup');
+    const closeBtn = target.closest('.popup-close');
 
-    if (popupBody) {
+    if (!closeBtn && popupBody) {
       return;
     }
 

src/components/YouTubeBanner.astro

@@ -4,7 +4,7 @@ import Icon from './Icon.astro';
 
 <div
   class='sticky top-0 border-b border-b-yellow-300 z-10 flex h-[37px]'
-  id='sticky-youtube-banner'
+  youtube-banner
 >
   <a
     href='https://youtube.com/theroadmap?sub_confirmation=1'
@@ -17,9 +17,17 @@ import Icon from './Icon.astro';
   </a>
   <button
     class='text-yellow-500 bg-yellow-200 hover:text-yellow-900 hover:bg-yellow-400 outline-0 px-2'
-    onclick='this.parentElement.classList.add("hidden")'
     aria-label='Close'
+    close-youtube-banner
   >
     <Icon icon='close' />
   </button>
 </div>
+
+<script>
+  document
+    .querySelector('[close-youtube-banner]')
+    ?.addEventListener('click', () => {
+      document.querySelector('[youtube-banner]').remove();
+    });
+</script>