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';