From 781801156bc22e0ecbda527a5a55367badbd6e49 Mon Sep 17 00:00:00 2001
From: SanjayramVempati <101228879+SanjayramVempati@users.noreply.github.com>
Date: Wed, 15 Mar 2023 16:24:45 -0400
Subject: [PATCH] updataed navbar

---
 src/components/Nav.astro | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 765d5ae..57bb8df 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -14,35 +14,38 @@ import NavLink from "./NavLink.astro";
   </a>
 
   <!-- Desktop Pages -->
-  <div class="flex flex-row space-x-5 invisible sm:visible my-auto  ">
+  <div class="flex flex-row justify-start  visible max-sm:hidden my-auto mr-20 space-x-24 max-lg:space-x-10  max-md:space-x-4 ">
 
-    <NavLink href="#" text="Home" />
-    <NavLink href="#" text="Home" />
-    <NavLink href="#" text="Home" />
+    <NavLink href="#" text="Page 1" class="nav" />
+    <NavLink href="#" text="Page 2" class="nav" />
+    <NavLink href="#" text="Home" class="nav"/>
+    <NavLink href="#" text="Home" class="nav"/>
+    <NavLink href="#" text="Home" class="nav"/>
     
     
   </div>
   
  
   
-  
-  <button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10">
+  <!-- Hamburger button -->
+  <button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10 visible sm:hidden">
     <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
       <path id="ham" class="visible"  fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
       <path id="x" class="hidden"  fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
 
     </svg>
   </button>
+  <div class="max-sm:hidden"></div>
+
+  
 </div>
 
 <!-- Mobile pages -->
   <div id="links" class="hidden ml-8 flex flex-col text-white font-semibold px-2 pt-1 pb-4 text-lg  space-y-1">
-    <a href="#" class=" hover:bg-slate-700 rounded">Page 1</a>
-    <a href="#" class=" hover:bg-slate-700 rounded">Page 2</a>
+    <a href="/" class=" hover:bg-slate-700 rounded">Page 1</a>
+    <a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
+    <a href="/" class=" hover:bg-slate-700 rounded">Page 2</a>
   </div>
-
-
-
   </div>
 
 
@@ -51,6 +54,7 @@ import NavLink from "./NavLink.astro";
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
+    // Hamburger menu
     const hamburger = document.querySelector('#burg');
     const links = document.querySelector('#links');
     const navLinks = document.querySelectorAll('#links a');
@@ -80,5 +84,10 @@ import NavLink from "./NavLink.astro";
       });
     });
   });
+
+
+  // Remove the navlinks when the screen gets too small
+  
+  
 </script>