From 628e4d955e44111988b7cead6b6ffbe579fbc69b Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Tue, 31 Dec 2024 09:50:17 +0100
Subject: [PATCH] feat: add interactivity with script

---
 src/components/Hamburger.astro |  5 +++++
 src/components/Header.astro    |  2 ++
 src/pages/index.astro          |  5 ++++-
 src/scripts/menu.js            |  3 +++
 src/styles/global.css          | 16 ++++++++++++++++
 5 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Hamburger.astro
 create mode 100644 src/scripts/menu.js

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
new file mode 100644
index 0000000..faab7a5
--- /dev/null
+++ b/src/components/Hamburger.astro
@@ -0,0 +1,5 @@
+<div class="hamburger">
+  <span class="line"></span>
+  <span class="line"></span>
+  <span class="line"></span>
+</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 11e4e6c..d7e2f4e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,7 +1,9 @@
 ---
+import Hamburger from "./Hamburger.astro";
 import Navigation from "./Navigation.astro";
 ---
 
 <header>
+  <Hamburger />
   <Navigation />
 </header>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 93c091c..518b668 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,5 +19,8 @@ const pageTitle = "Orbital Orbit"
 
 		<h1>{pageTitle}</h1>
     <Footer/>
-	</body>
+<script>
+import "../scripts/menu.js"
+</script>
+  </body>
 </html>
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
new file mode 100644
index 0000000..3f57db6
--- /dev/null
+++ b/src/scripts/menu.js
@@ -0,0 +1,3 @@
+document.querySelector(".hamburger")?.addEventListener("click", () => {
+  document.querySelector(".nav-links")?.classList.toggle("expanded");
+});
diff --git a/src/styles/global.css b/src/styles/global.css
index 7ca08bb..db67bd9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -21,6 +21,18 @@ h1 {
 }
 
 /* nav styles */
+.hamburger {
+  padding-right: 20px;
+  cursor: pointer;
+}
+
+.hamburger .line {
+  display: block;
+  width: 40px;
+  height: 5px;
+  margin-bottom: 10px;
+  background-color: #ff9776;
+}
 
 .nav-links {
   width: 100%;
@@ -63,4 +75,8 @@ h1 {
     display: inline-block;
     padding: 15px 20px;
   }
+
+  .hamburger {
+    display: none;
+  }
 }