mobile stage

intro-section-with-dropdown-navigation-main/index.html

@@ -8,6 +8,7 @@
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
   <link rel="stylesheet" href="dist/css/styles.css">
+  <script src="./script.js" defer ></script>
 
   <title>Frontend Mentor | Intro section with dropdown navigation</title>
 </head>
@@ -16,19 +17,19 @@
     <div class="logo">
       <img src="./images/logo.svg" alt="logo">
     </div>
-    <nav>
+    <nav id="hide">
       <div class="overlay"></div>
       <ul>
-        <li><a href="#">Features</a><span><img src="./images/icon-arrow-down.svg" alt="icon-arrow-up"></span>
-          <ul>
+        <li  class="dropdown-container"><a href="#">Features</a><span><img src="./images/icon-arrow-down.svg" alt="icon-arrow-up"></span>
+          <ul id="dropdown">
             <li><img src="./images/icon-todo.svg" alt="Todo icon"> Todo list </li>
             <li><img src="./images/icon-calendar.svg" alt="calender icon"> Calender </li>
             <li><img src="./images/icon-reminders.svg" alt="Reminder icon"> Reminders </li>
             <li><img src="./images/icon-planning.svg" alt="planning icon"> Planning </li>
           </ul>
         </li>
-        <li><a href="#">Company</a><span><img src="./images/icon-arrow-down.svg" alt=""></span>
-          <ul>
+        <li class="dropdown-container"><a href="#">Company</a><span><img src="./images/icon-arrow-down.svg" alt="dropdown icon"></span>
+          <ul id="dropdown">
             <li>History</li>
             <li>Our Team</li>
             <li>Blog</li>
@@ -46,7 +47,7 @@
 
     <div class="menu-icons">
       <img src="./images/icon-menu.svg" alt="open menu icon" class="menu-open-icon">
-      <img src="./images/icon-close-menu.svg" alt="close menu icon" class="menu-close-icon"> 
+      <img src="./images/icon-close-menu.svg" alt="close menu icon" class="menu-close-icon" id="hide"> 
     </div>
   </header>
   <main>

intro-section-with-dropdown-navigation-main/script.js

@@ -1 +1,25 @@
-const menu = document.querySelector(".menu-icons");
+const openMenu = document.querySelector(".menu-open-icon");  
+const closeMenu = document.querySelector(".menu-close-icon");
+const navBar = document.querySelector("nav");
+// const dropDownContainer = document.querySelectorAll(".dropdown-container");
+// const dropDown = document.querySelectorAll(".dropdown");
+
+// dropDownContainer.forEach((item) => {
+//     item.addEventListener("mouseover", () => {
+//         item.style.display = "block";  
+//      });
+// });
+
+openMenu.addEventListener("click", () => { 
+    navBar.style.display = "block"; 
+    closeMenu.style.display = "block";
+    openMenu.style.display = "none"; 
+
+});
+
+closeMenu.addEventListener("click", () => {
+    navBar.style.display = "none";
+    openMenu.style.display = "block"; 
+    closeMenu.style.display = "none";  
+
+});

intro-section-with-dropdown-navigation-main/src/scss/base/_base.scss

@@ -5,10 +5,9 @@ body{
     font-size: 1.2rem;
     font-weight: 500;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    flex-direction: column; 
     min-height: 100vh;
-    background-color: $almost-White; 
+    background-color: $almost-White;    
 }
 
 h1 {

intro-section-with-dropdown-navigation-main/src/scss/components/_header.scss

@@ -1,26 +1,29 @@
-body{
+
     header{
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1rem 2rem;
         background-color: $almost-White;
         color: $mediumGray;
-        position: relative;   
+        position: relative;       
 
         .logo{
             width: 50px;  
         }
 
+        #hide { 
+            display: none;    
+        } 
+
         nav{ 
             position: absolute;
             top: 0;  
             right: 0;   
             background-color: $almost-White;
             width: 60%;  
             padding: 4rem 2rem 2rem 2rem;     
-            z-index:2 ;            
-
+            transition: transform 0.3s ease;
 
             .overlay{
                 position: fixed; 
@@ -29,8 +32,8 @@ body{
                 width: 40%;
                 height: 100vh; 
                 background-color: rgba(0, 0, 0, 0.5);
-                z-index: 1;
-
+                transition: transform 0.8s ease;
+                                    
 
             }
 
@@ -82,7 +85,11 @@ body{
                         display: flex;
                         flex-direction: column; 
                         gap: 1rem; 
+                        display: none;
+
+
 
+
                         li{
                              font-size: 1rem; 
 
@@ -93,32 +100,37 @@ body{
                         }
 
                     }
+
+
                 }
 
 
              } 
+
+
         }
 
         .menu-icons{
             cursor: pointer;
             position: relative; 
             z-index: 2;
+            transition: all 0.3s ease-out;
 
             img{
                 width: 20px;     
             }
 
             .menu-close-icon {
-
-            display: block;   
+                top: 0;
+                left: 0;
+
             }
 
-            .menu-open-icon{
-                position: absolute;
+            .menu-open-icon{ 
                 top: 0;
                 left: 0;
-                display: none;            }
+            }
         }
 
-    }
-}
+    } 
+