creacion de la funcion para activar o desactivar el menu desktop cuando hacemos clik en el mail del usuario en la barra de navegacion

Author: alevittori

index.html

@@ -47,15 +47,15 @@
 
     <div class="navbar-right">
       <ul>
-        <li class="navbar-email">[email protected]</li>
+        <li class="navbar-email">[email protected]</li> 
         <li class="navbar-shopping-cart">
           <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
           <div>2</div>
         </li>
       </ul>
     </div>
 
-    <div class="desktop-menu">
+    <div class="desktop-menu inactive">
         <ul>
           <li>
             <a href="/" class="title">My orders</a>
@@ -71,5 +71,9 @@
         </ul>
       </div>
   </nav>
+
+
+
+  <script src="./main.js"></script>
 </body>
 </html>

main.js

@@ -0,0 +1,9 @@
+const navbar_email_element = document.querySelector('.navbar-email');
+const desktopMenuElement = document.querySelector('.desktop-menu');
+
+const toogleDesktopMenu = ()=>{
+    // desktopMenuElement.toggleAttribute('')
+
+    desktopMenuElement.classList.toggle('inactive')
+}
+navbar_email_element.addEventListener('click', toogleDesktopMenu);

styles.css

@@ -13,6 +13,13 @@
     font-family: 'Quicksand', sans-serif;
   }
 
+  
+  /* estilo para activar o desacticar un menu  */
+
+  .inactive{
+    display: none;
+  }
+
 
   /* ESTILOS DEL MENU PRINCIPAL GRANDE  */
   nav {
@@ -83,7 +90,7 @@
 
   position: absolute;
   top: 60px; /* tamaño del menu principal */
-  right: 0;
+  right: 30px;
 
   width: 100px;
   height: auto;