diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
deleted file mode 100644
index a8be407c4..000000000
--- a/src/components/Navigation.astro
+++ /dev/null
@@ -1,45 +0,0 @@
----
-import YouTubeBanner from "./YouTubeBanner.astro";
-import Icon from "./Icon.astro";
----
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
new file mode 100644
index 000000000..532bfc0e2
--- /dev/null
+++ b/src/components/Navigation/Navigation.astro
@@ -0,0 +1,84 @@
+---
+import YouTubeBanner from '../YouTubeBanner.astro';
+import Icon from '../Icon.astro';
+---
+
+
+
+
+
+
+
+
diff --git a/src/components/Navigation/navigation.js b/src/components/Navigation/navigation.js
new file mode 100644
index 000000000..8a4874be8
--- /dev/null
+++ b/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();
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fd8956c73..3a981ed25 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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';