Merge pull request #131 from dsereycamus/gamenav

se agrega navbar para el game
dsereycamus · Nov 23, 2023 · e90381e · e90381e
2 parents 6cdd785 + 6bf2374
commit e90381e
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 6 deletions.
diff --git a/myboya-project/src/components/GameNav/GameNav.css b/myboya-project/src/components/GameNav/GameNav.css
@@ -0,0 +1,55 @@
+.header-navgame {
+    background-color: #032D59;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 7.5rem;
+    padding: 0.3rem 10%;
+}
+
+.header-navgame  img {
+    height: 5.6rem;
+    width: auto;
+    transition: all 0.3s;
+}
+
+.btn-gamenav {
+    padding: 0.2rem 3rem;
+    justify-content: end;
+    color: #032D59;
+    border-radius: 3rem;
+    background-color: #80bacc;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.letter-o {
+    color: var(--clr-orange);
+    font-size:50px;
+}
+
+.title-navgame {
+    font-size: 50px;
+}
+
+.listaNav2 {
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(orange);
+    visibility: hidden;
+    opacity: 0;
+    text-decoration: none;
+}
+
+.btn-gamenav button{
+    visibility: visible;
+        opacity: 1;
+}
+
+div .show {
+    transform: none;
+}
diff --git a/myboya-project/src/components/GameNav/GameNav.jsx b/myboya-project/src/components/GameNav/GameNav.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import logo from '../../assets/Images/myboya-logo.png'
+import './GameNav.css'
+import { useRef } from "react";
+import { NavLink, Link } from "react-router-dom";
+
+export default function GameNav() {
+
+    const navRef = useRef();
+    const show = () => {
+        navRef.current.classList.toggle("show")
+    }
+
+    return (
+        <header>
+            <nav className='header-navgame'>
+                <h2 className='title-navgame'>MyB<span className='letter-o'>o</span>ya</h2>
+                <img src={logo} alt="Logo MyBoya" />
+                <ul className="listaNav2">
+                    <li>
+                        <NavLink to="/">Inicio</NavLink>
+                    </li>
+                    <li>
+                        <NavLink to="/about">Nosotros</NavLink>
+                    </li>
+                </ul>
+                <button className='btn-gamenav' onClick={show}>Cuenta</button>
+            </nav>
+
+        </header>
+    )
+}
diff --git a/myboya-project/src/components/Navbar/Nav.css b/myboya-project/src/components/Navbar/Nav.css
@@ -121,7 +121,7 @@ header .nav-btn {
         opacity: 1;
         z-index: 11;
     }
-    nav {
+    .listaprub {
         z-index: 10;
         position: fixed;
         top: 0;
@@ -133,7 +133,7 @@ header .nav-btn {
         align-items: center;
         justify-content: center;
         gap: 1.5rem;
-        background-color: var(--clr-blue);
+        background-color: #00214b;
         transition: 1s;
         transform: translateY(-100vh);  
         opacity: 100%;      

diff --git a/myboya-project/src/components/Navbar/Navbar.jsx b/myboya-project/src/components/Navbar/Navbar.jsx
@@ -28,7 +28,7 @@ const Navbar = () => {
           <img src={logo} alt="Logo MyBoya" />
         </Link>
       </div>
-      <nav ref={navRef}>
+      <nav className="listaprub" ref={navRef}>
         <ul className="listaNav">
           <li>
             <NavLink to="/">Inicio</NavLink>
@@ -40,7 +40,7 @@ const Navbar = () => {
             <NavLink to="/partners">Partners</NavLink>
           </li>
           <li>
-            <NavLink to="/noticias">Noticia</NavLink>
+            <NavLink to="/noticias">Noticias</NavLink>
           </li>
           {isLoggedIn && (
             <li>

diff --git a/myboya-project/src/layouts/GameLayout.jsx b/myboya-project/src/layouts/GameLayout.jsx
@@ -1,11 +1,11 @@
 import { Outlet } from "react-router-dom";
-import Navbar from "../components/Navbar/Navbar";
 import GameFooter from "../components/GameFooter/GameFooter";
+import GameNav from "../components/GameNav/GameNav";
 
 const GameLayout = () => {
   return (
     <main>
-      <Navbar />
+      <GameNav />
       <div style={{ minHeight: "65vh" }}>
         <Outlet />
       </div>