Merge pull request #15 from ChinchiGit/develop

"Implemented smooth transitions for menu expansion and icon rotation in Nav component."
ChinchiGit · May 30, 2024 · 1832431 · 1832431
2 parents 6e5a30e + a93167e
commit 1832431
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/src/components/Header/Nav/Nav.css b/src/components/Header/Nav/Nav.css
@@ -1,4 +1,4 @@
-nav{
+nav {
     width: 100%;
     background-color: rgba(28, 51, 97, 0.7);
     display: flex;
@@ -8,31 +8,44 @@ nav{
     line-height: 1.5;
     font-weight: 400;
     text-align: left;
-    border-radius:5px;
-    color:black;
+    border-radius: 5px;
+    color: black;
 }
 
 ul {
-    display: none;
+    display: flex;
+    flex-direction: column;
     width: 80%;
     background-color: #0c1618;
     margin: 2%;
+    max-height: 0;
+    opacity: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s;
 }
 
 input:checked~ul {
-    display: block;
+    max-height: 500px; /* Ajusta este valor según sea necesario */
+    opacity: 1;
+    visibility: visible;
 }
 
 #menu {
     display: none;
 }
 
-#menu-icon{
+#menu-icon {
     margin-right: 20px;
-    color:white
+    color: white;
+    transition: transform 0.4s ease-out; /* Transición para la rotación */
 }
 
-#canIcon{
+#menu-icon.rotate { /* Agregar clase 'rotate' para rotar */
+    transform: rotate(90deg);
+}
+
+#canIcon {
     margin-left: 20px;
     max-width: 45px;
     max-height: 45px;
@@ -51,8 +64,8 @@ nav>div>label {
     user-select: none;
 }
 
-nav>a{
-    color:black;
+nav>a {
+    color: black;
 }
 
 li {
@@ -64,13 +77,13 @@ li {
     border-bottom: 1px solid grey;
 }
 
-#smileIcon{
+#smileIcon {
     height: 40px;
 }
 
-#desplegable{
+#desplegable {
     display: flex;
     flex-direction: row-reverse;
     width: 100%;
-    align-items: flex-start
-}
+    align-items: flex-start;
+}
diff --git a/src/components/Header/Nav/Nav.jsx b/src/components/Header/Nav/Nav.jsx
@@ -1,9 +1,8 @@
-import React, { useState, useEffect, useRef  } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Link } from 'react-router-dom';
 import { UserAuth } from "../../../context/AuthContext";
 import "./Nav.css"
 
-
 const Nav = () => {
   const { user } = UserAuth();
   const [isChecked, setIsChecked] = useState(false);
@@ -31,18 +30,17 @@ const Nav = () => {
   return (
     <>
       <nav onMouseEnter={handleMouseEnter}>
-
         <div>
           <Link to='/login'><img id="canIcon" src="/assets/img/nav_icon01.png" alt="Logo GasolineHack" /></Link>
         </div>
         <div id="desplegable">
-          <input type="checkbox" id="menu" checked={isChecked} onChange={handleInputChange}/>
-          <label htmlFor="menu" id="menu-icon">☰</label>
+          <input type="checkbox" id="menu" checked={isChecked} onChange={handleInputChange} />
+          <label htmlFor="menu" id="menu-icon" className={isChecked ? "rotate" : ""}>☰</label>
           <ul>
-            <li ><Link to='/home'>HOME</Link></li>
-            <li ><Link to='/cercana'>GASOLINERA MAS CERCANA</Link></li>
-            <li ><Link to='/provincia'>BUSCAR POR PROVINCIA</Link></li>
-            <li ><Link to='/radio'>BUSCAR POR RADIO</Link></li>
+            <li><Link to='/home'>HOME</Link></li>
+            <li><Link to='/cercana'>GASOLINERA MAS CERCANA</Link></li>
+            <li><Link to='/provincia'>BUSCAR POR PROVINCIA</Link></li>
+            <li><Link to='/radio'>BUSCAR POR RADIO</Link></li>
             {user &&
               <>
                 <li><Link to='/misgasolineras'>MIS GASOLINERAS</Link></li>
@@ -52,10 +50,8 @@ const Nav = () => {
           </ul>
         </div>
       </nav>
-
     </>
-  )
+  );
 };
 
 export default Nav;
-