Refactor navigation

2 years ago · bb2cc12ed0
parent b34376ce3e
commit bb2cc12ed0
3 changed files with 7 additions and 6 deletions
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@ -1,12 +1,9 @@
 ---
-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='/'>
@ -47,11 +44,11 @@ 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 flex items-center hidden'
+      class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 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'
+        class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6'
      >
        <Icon icon='close' />
      </button>
--- a/src/components/Navigation/navigation.js
+++ b/src/components/Navigation/navigation.js
@ -23,11 +23,13 @@ class Navigation {
  }

  showNavigation() {
-    this.navigationEl.classList.toggle('hidden');
+    this.navigationEl.classList.remove('hidden');
+    this.navigationEl.classList.add('flex');
  }

  closeNavigation() {
    this.navigationEl.classList.add('hidden');
+    this.navigationEl.classList.remove('flex');
  }

  onDOMLoaded() {
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -5,6 +5,7 @@ import OpenSourceBanner from '../components/OpenSourceBanner.astro';
 import Footer from '../components/Footer.astro';
 import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 import Sponsor from '../components/Sponsor/Sponsor.astro';
+import YouTubeBanner from '../components/YouTubeBanner.astro';

 export interface Props {
  title: string;
@ -26,6 +27,7 @@ const { title, sponsor } = Astro.props;
    <slot name='after-header' />
  </head>
  <body>
+    <YouTubeBanner />
    <Navigation />
    <slot />