Merge pull request #2 from Gaye0523/master

Cambios en Menu

burger-queen/src/Styles/sass/navigation.scss

@@ -1,80 +1,125 @@
 @import 'login';
-.navigation{
+
+.navigation {
     background-color: $mostaza;
     width: 80%;
     height: 70px;
     margin-top: 6%;
     display: flex;
     align-items: center;
     flex-flow: row;
+
     .menu-bars {
         margin-left: 2rem;
         font-size: 3rem;
         color: black;
         background: none;
     }
-    .title{
+
+    .title {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: row;
     }
-    h3{
+
+    h3 {
         font-family: OPTIChampionBold;
         font-size: 3.5vw;
-        }
+    }
 
-    h2{
+    h2 {
         font-family: Cookie-Regular;
         font-size: 3.5vw;
         margin-top: 10px;
-    }   
+    }
 }
-.nav-menu{
-    background-color: grey;
+
+.nav-menu {
+    background-color: rgba(141, 151, 167, 1);
     width: 250px;
     height: 50vh;
-    display: flex;
+    flex-direction: column;
     position: fixed;
     top: 0;
-    left: -100%;
+    top: -50%;
+    right: -50%;
     transition: 860ms;
-    .nav-menu-items{
+
+    .nav-menu-items {
         width: 100%;
-        .nav-text{
-            display: flex;
-            justify-content:start;
-            align-items: center;
-            padding: 6px 0px 6px 20px;
+        display: flex;
+        flex-direction: column;
+
+        .menu-bars {
+            font-size: 1rem;
+            list-style: none;
+            color: black;
+            background: none;
+            width: 100%;
+            height: 20px;
+        }
+
+        .nav-text {
             list-style: none;
             color: white;
             font-size: 18px;
             width: 95%;
-            li:hover{
-                background-color: #1b1f55;
+            height: 50px;
+
+            &:hover {
+                background-color:rgba(99, 113, 134, 1);
                 border-radius: 4px;
                 padding: 0px 12px;
                 width: 95%;
                 height: 100%;
             }
+        }
     }
+}
+
+.nav-menu-active {
+    background-color: rgba(141, 151, 167, 1); 
+    width: 250px;
+    height: 20vh;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 10%;
+    top: 13%;
+    transition: 860ms;
 
-    .navbar-toggle{
+    .nav-menu-items {
+        border: 2px solid white;
         width: 100%;
-        height: 10px;
-    }
-
-    }
-
-    .menu-bars{
-        margin-left: 2rem;
-        font-size: 3rem;
-        color: black;
-        background: none;
+        display: flex;
+        flex-direction: column;
+
+        .menu-bars {
+            font-size: 1rem;
+            list-style: none;
+            color: black;
+            background: none;
+            width: 100%;
+            height: 20px;
+            margin-left: 92%;
+        }
+
+        .nav-text {
+            list-style: none;
+            font-family: Cookie-Regular;
+            border: 1px solid white;
+            color:black;
+            font-size: 30px;
+            width: 100%;
+            height: 50px;
+            text-align: center;
+            line-height: 1.5;
+
+            &:hover {
+                background-color: rgba(99, 113, 134, 1);
+                border-radius: 4px;
+            }
+        }
     }
-}
-.nav-menu-active {
-    left: 0;
-    transition: 350ms;
-    border: 5px solid red;
 }

burger-queen/src/Vistas/Navigation.jsx

@@ -19,17 +19,19 @@ const Navigation =() => {
             <h3>QUEEN</h3>
             </div>
         </div>
-        <nav className={sidebar ? 'nav-menu-active' : 'nav-menu'}>
-            <ul onClick={showSidebar} className='nav-menu-items'>
-                <li className='navbar-toggle'>
-                <Link to='#' className='menu-bars'>
-                    <FontAwesomeIcon icon={faTimes}/>
+        <div className={sidebar ? 'nav-menu-active' : 'nav-menu'}>
+            <div  className='nav-menu-items'>
+            <ul>
+                <li className='menu-bars'>
+                <Link to='#' >
+                    <FontAwesomeIcon onClick={showSidebar} icon={faTimes}/>
                 </Link>    
                 </li>
-                <li className='nav-text'>holisss</li>
-                <li>porque no sirve</li>
+                <li className='nav-text'>Desayuno</li>
+                <li className='nav-text'>Almuerzo y Cena</li>
             </ul>
-        </nav>
+            </div>
+        </div>
         </Fragment>
 
     )