segunda fusion, menu mobile

Author: Arnoll-tech

fusion.html

@@ -48,6 +48,7 @@
         </li>
       </ul>
     </div>
+
     <div class="desktop-menu inactive">
         <ul>
           <li>
@@ -63,6 +64,50 @@
           </li>
         </ul>
       </div>
+
+  <div class="mobile-menu inactive">
+    <ul>
+      <li>
+        <a href="/">CATEGORIES</a>
+      </li>
+      <li>
+        <a href="/">All</a>
+      </li>
+      <li>
+        <a href="/">Clothes</a>
+      </li>
+      <li>
+        <a href="/">Electronics</a>
+      </li>
+      <li>
+        <a href="/">Furnitures</a>
+      </li>
+      <li>
+        <a href="/">Toys</a>
+      </li>
+      <li>
+        <a href="/">Other</a>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <a href="/">My orders</a>
+      </li>
+      <li>
+        <a href="/">My account</a>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <a href="/" class="email">[email protected]</a>
+      </li>
+      <li>
+        <a href="/" class="sign-out">Sign out</a>
+      </li>
+    </ul>
+  </div>
   </nav>
   <script src="./main.js"></script>
 </body>

main.js

@@ -1,8 +1,14 @@
 const menuEmail = document.querySelector('.navbar-email');
 const desktopMenu = document.querySelector('.desktop-menu');
+const hamburgerMenu = document.querySelector('.menu');
+const mobileMenu = document.querySelector('.mobile-menu');
 
 menuEmail.addEventListener('click', toggleDesktopMenu);
+hamburgerMenu.addEventListener('click', toggleMobileMenu);
 
 function toggleDesktopMenu() {
    desktopMenu.classList.toggle('inactive');
 }
+function toggleMobileMenu() {
+   mobileMenu.classList.toggle('inactive');
+}

styles.css

@@ -1,3 +1,4 @@
+/*General*/
 :root {
     --white: #FFFFFF;
     --black: #000000;
@@ -15,6 +16,8 @@
   .inactive{
     display: none;
   }
+
+  /*Navbar (general)*/
   nav {
     display: flex;
     justify-content: space-between;
@@ -79,7 +82,7 @@
     align-items: center;
   }
 
-
+/*Menu Desktop*/
   .desktop-menu {
     position: absolute;
     background-color: var(--white);
@@ -118,6 +121,38 @@
     display: inline-block;
   }
 
+  /*Menu en mobile*/
+
+.mobile-menu {
+  position: absolute;
+  top: 60px;
+  padding: 24px;
+}
+.mobile-menu a {
+  text-decoration: none;
+  color: var(--black);
+  font-weight: bold;
+  /* margin-bottom: 24px; */
+}
+.mobile-menu ul {
+  padding: 0;
+  margin: 24px 0 0;
+  list-style: none;
+}
+.mobile-menu ul:nth-child(1) {
+  border-bottom: 1px solid var(--very-light-pink);
+}
+.mobile-menu ul li {
+  margin-bottom: 24px;
+}
+.email {
+  font-size: var(--sm);
+  font-weight: 300 !important;
+}
+.sign-out {
+  font-size: var(--sm);
+  color: var(--hospital-green) !important;
+}
   @media (max-width: 640px) {
     .menu {
       display: block;
@@ -128,4 +163,12 @@
     .navbar-email {
       display: none;
     }
+    .desktop-menu{
+      display: none;
+    }
+  }
+  @media (min-width: 641px) {
+    .mobile-menu{
+      display: none;
+    }
   }