hamburger navbar

astro.config.mjs

@@ -3,7 +3,13 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 import tailwind from "@astrojs/tailwind";
 
+// https://astro.build/config
+import react from "@astrojs/react";
+
+// https://astro.build/config
+import vue from "@astrojs/vue";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind(), react(), vue()]
 });

package.json

@@ -10,9 +10,18 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/react": "^2.0.2",
     "@astrojs/tailwind": "^3.0.1",
+    "@astrojs/vue": "^2.0.1",
+    "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.16",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "astro": "^2.0.17",
     "astro-icon": "^0.8.0",
-    "tailwindcss": "^3.2.7"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.2.7",
+    "vue": "^3.2.47"
   }
 }

src/components/Nav.astro

@@ -1,42 +1,45 @@
 ---
-
 // Image imports
 import logo from "../images/logo.png";
-
 // Components
 import NavLink from "./NavLink.astro";
 ---
 
+<header class="h-auto bg-slate-800 ">
+<div class=" flex flex-row justify-between">
 
-<div class="h-16 bg-slate-800 m-4 rounded-2xl flex flex-row justify-between">
   <!-- Logo -->
   <a href="/">
       <img src={logo} alt="Logo" class="my-2 mx-6 h-12 " /> 
   </a>
 
-  <!-- Pages -->
-  <div class="my-auto">
-
-    <NavLink title="Home" link="/" />
-    <NavLink title="Page 1" link="/" />
-    <NavLink title="Page 2" link="/" />
-    <NavLink title="Page 3" link="/" />
-    <NavLink title="Page 4" link="/" />
-
-
-  </div>
+  <!-- Desktop Pages -->
+  <!-- <div class="my-auto max-lg flex flex-row justify-between sm:text-blue-700 max-lg:collapse ">
+  </div> -->
   
+  <!-- Hamburger menu (mobile) -->
+  <!-- <NavLink title="Home" link="/" />
+  <NavLink title="Home" link="/" />
+  <NavLink title="Home" link="/" />
+  <NavLink title="Home" link="/" /> -->
 
-  <!-- Buttons -->
-  <div class="my-auto mx-10 ">
-    <a href="/" class="my-auto mr-6 inline-block leading-none">
-      <button class="  bg-blue-700 h-10 w-auto rounded-2xl transition duration-150 ease-in-out hover:scale-110">
-        <h1 class="mx-2 font-mono">
-          Button
-        </h1>  
-      </button>
-    </a>
 
+  <!-- Hamburger icon -->
+  
+  <button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10">
+    <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>
+
+<!-- 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>
+  </div>
 
 
 
@@ -44,4 +47,38 @@ import NavLink from "./NavLink.astro";
 
 
 
-</div>
+</header>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const hamburger = document.querySelector('#burg');
+    const links = document.querySelector('#links');
+    const navLinks = document.querySelectorAll('#links a');
+    const ham = document.querySelector('#ham');
+    const x = document.querySelector('#x');
+
+
+    // Make hamburger into a x when clicked
+    hamburger.addEventListener('click', () => {
+      ham.classList.toggle('hidden');
+    });
+    
+    hamburger.addEventListener('click', () => {
+      x.classList.toggle('hidden');
+    });
+
+    hamburger.addEventListener('click', () => {
+      links.classList.toggle('hidden');
+
+      
+
+    });
+
+    navLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        links.classList.toggle('hidden');
+      });
+    });
+  });
+</script>
+

src/components/NavLink.astro

@@ -3,6 +3,6 @@ const  {link, title}  = Astro.props;
 
 ---
 
-<a href={link} class=" my-auto mx-10 text-2xl font-serif object-cover text-gray-900 dark:text-white hover:underline">
+<a href={link} class=" my-auto mx-10 text-2xl font-serif object-cover text-gray-900 dark:text-white hover:underline  ">
     {title}
 </a>

src/pages/index.astro

@@ -4,7 +4,6 @@ import Layout from '../layouts/Layout.astro';
 
 // Components
 import Nav from '../components/Nav.astro';
-
 //Image import
 import mountain from '../images/mountain.jpg';
 ---
@@ -15,7 +14,7 @@ import mountain from '../images/mountain.jpg';
 
 
 
-    <div class="absolute w-full">
+    <div class="absolute w-full ">
       <Nav></Nav>
 
     </div>

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "react"
+  }
 }