From 4daf6409094ab77621c918d547d955a67aa4ef38 Mon Sep 17 00:00:00 2001
From: theresajvrensburg <theresa@isogramconsulting.com>
Date: Sat, 9 Nov 2024 15:52:57 +0100
Subject: [PATCH] Solved Lab

---
 index.html         |   4 +-
 javascript/menu.js |  13 ++++++
 styles/style.css   | 109 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 javascript/menu.js

diff --git a/index.html b/index.html
index 1b8846b..3029158 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,8 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
-        <ul class="navbar">
+        <div id="burger-menu" class="burger-menu"><img src="images/menu-icon.png" alt="burger-icon"/></div>
+        <ul id="nav-bar" class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>
           <li><a href="#">Tech</a></li>
@@ -76,5 +77,6 @@ <h2>Article 3</h2>
     <span class="viewport-dimensions"></span>
     <!-- DO NOT REMOVE - A simple JS script used to display the viewport width label -->
     <script src="javascript/width-label.js"></script>
+    <script src="javascript/menu.js"></script>
   </body>
 </html>
diff --git a/javascript/menu.js b/javascript/menu.js
new file mode 100644
index 0000000..fe98f8f
--- /dev/null
+++ b/javascript/menu.js
@@ -0,0 +1,13 @@
+document.getElementById("burger-menu").addEventListener("click", () => {
+    console.log("click");
+   let elements = document.getElementsByClassName("navbar");
+   let elementss = [...elements];
+
+   elementss.forEach(element => {
+       if(element.style.display === "block"){
+           element.style.display = "none";
+       }else{
+           element.style.display = "block";
+       }
+   });
+})
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..137f46e 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -175,5 +175,114 @@ header {
 .btn-blue {
   background-color: #007bff;
 }
+
+.burger-menu{
+  display: none;
+}
   
 /* Write your CSS below */
+
+@media screen and (max-width: 1024px) and (min-width: 760px) {
+  .navbar {
+    justify-content: space-evenly;
+  }
+  .navbar li {
+    width: 256px;
+  }
+
+  .article {
+    width: calc(50% - 30px);
+    padding-right: 30px;
+    margin-bottom: 30px;
+  }
+  .burger-menu{
+    display: none;
+  }
+}
+
+/* mobile */
+@media  screen and (max-width: 761px) and (min-width: 480px) {
+  nav ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid white;
+    border-right: none;
+  }
+  .main-article{
+    display: block;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .main-article .image {
+    width: 100%;
+  }
+
+  .main-article .content {
+    width: 100%;
+    padding-top: 15px;
+  }
+
+  .article {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .burger-menu{
+    display: none;
+  }
+}
+
+@media screen and (max-width: 481px){
+  .navbar {
+    display: none;
+  }
+  nav ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid white;
+    border-right: none;
+  }
+
+  .burger-menu {
+    display: block;
+  }
+  .newspaper-name {
+    border-bottom: none;
+  }
+  .main-article{
+    display: block;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .main-article .image {
+    width: 100%;
+  }
+
+  .main-article .content {
+    width: 100%;
+    padding-top: 15px;
+  }
+
+  .article {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+}
+