From bb2cc12ed014297afa4362ac8fe2d8862b61a11b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 3 Jan 2023 17:38:46 +0400
Subject: [PATCH] Refactor navigation

---
 src/components/Navigation/Navigation.astro | 7 ++-----
 src/components/Navigation/navigation.js    | 4 +++-
 src/layouts/BaseLayout.astro               | 2 ++
 3 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 532bfc0e2..578fc4fbd 100644
--- 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>
diff --git a/src/components/Navigation/navigation.js b/src/components/Navigation/navigation.js
index 8a4874be8..63e510d7a 100644
--- 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() {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3a981ed25..3f9cdb81c 100644
--- 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 />
 
