Make navigation interactive

src/components/Navigation.astro

@@ -1,45 +0,0 @@
----
-import YouTubeBanner from "./YouTubeBanner.astro";
-import Icon from "./Icon.astro";
----
-
-<YouTubeBanner />
-
-<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='/'>
-        <Icon icon="logo" />
-        <span class='ml-3'>roadmap.sh</span>
-      </a>
-  
-      <!-- Desktop navigation items -->
-      <ul class='hidden sm:flex space-x-5'>
-        <li><a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a></li>
-        <li><a href='/guides' class='text-gray-400 hover:text-white'>Guides</a></li>
-        <li><a href='/videos' class='text-gray-400 hover:text-white'>Videos</a></li>
-        <li>
-          <a class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white' href='/signup'>
-            Subscribe
-          </a>
-        </li>
-      </ul>
-  
-      <!-- Mobile Navigation Button -->
-      <button id='show-mobile-navigation' class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' aria-label="Menu">
-        <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 flex items-center hidden'>
-        <button id='close-mobile-navigation' class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6 cursor-pointer'>
-            <Icon icon="close" />
-        </button>
-        <ul class='flex flex-col gap-2 md:gap-3 items-center w-full'>
-          <li><a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'>Roadmaps</a></li>
-          <li><a href='/guides' class='text-xl md:text-lg hover:text-blue-300'>Guides</a></li>
-          <li><a href='/videos' class='text-xl md:text-lg hover:text-blue-300'>Videos</a></li>
-          <li><a href='/signup' class='text-xl md:text-lg text-red-300 hover:text-red-400'>Subscribe</a></li>
-        </ul>
-      </div>
-    </nav>
-  </div>

src/components/Navigation/Navigation.astro

@@ -0,0 +1,84 @@
+---
+import YouTubeBanner from '../YouTubeBanner.astro';
+import Icon from '../Icon.astro';
+---
+
+<script src='./navigation.js'></script>
+
+<YouTubeBanner />
+
+<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='/'>
+      <Icon icon='logo' />
+      <span class='ml-3'>roadmap.sh</span>
+    </a>
+
+    <!-- Desktop navigation items -->
+    <ul class='hidden sm:flex space-x-5'>
+      <li>
+        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
+      </li>
+      <li>
+        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
+      </li>
+      <li>
+        <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
+      </li>
+      <li>
+        <a
+          class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white'
+          href='/signup'
+        >
+          Subscribe
+        </a>
+      </li>
+    </ul>
+
+    <!-- Mobile Navigation Button -->
+    <button
+      id='show-mobile-navigation'
+      class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer'
+      aria-label='Menu'
+    >
+      <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 flex items-center hidden'
+    >
+      <button
+        id='close-mobile-navigation'
+        class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6 cursor-pointer'
+      >
+        <Icon icon='close' />
+      </button>
+      <ul class='flex flex-col gap-2 md:gap-3 items-center w-full'>
+        <li>
+          <a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'
+            >Roadmaps</a
+          >
+        </li>
+        <li>
+          <a href='/guides' class='text-xl md:text-lg hover:text-blue-300'
+            >Guides</a
+          >
+        </li>
+        <li>
+          <a href='/videos' class='text-xl md:text-lg hover:text-blue-300'
+            >Videos</a
+          >
+        </li>
+        <li>
+          <a
+            href='/signup'
+            class='text-xl md:text-lg text-red-300 hover:text-red-400'
+            >Subscribe</a
+          >
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>

src/components/Navigation/navigation.js

@@ -0,0 +1,44 @@
+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.toggle('hidden');
+  }
+
+  closeNavigation() {
+    this.navigationEl.classList.add('hidden');
+  }
+
+  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.astro';
+import Navigation from '../components/Navigation/Navigation.astro';
 import OpenSourceBanner from '../components/OpenSourceBanner.astro';
 import Footer from '../components/Footer.astro';
 import type { SponsorType } from '../components/Sponsor/Sponsor.astro';