From 8fff131c474500ce86ea6268e635ea0588564bbf Mon Sep 17 00:00:00 2001
From: Zohaib Akhtar Kausar <zohaib0614@gmail.com>
Date: Mon, 29 Apr 2024 01:43:08 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1adido=20aboutUs=20a=20navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/Navbar.css     |  2 +-
 webapp/src/components/Navbar.js      | 77 ++++++++++++++++------------
 webapp/src/components/Navbar.test.js |  1 +
 3 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/webapp/src/components/Navbar.css b/webapp/src/components/Navbar.css
index 7e2a173..4d8dc9b 100644
--- a/webapp/src/components/Navbar.css
+++ b/webapp/src/components/Navbar.css
@@ -36,7 +36,7 @@
 
 .nav-menu {
   display: grid;
-  grid-template-columns: repeat(6, auto);
+  grid-template-columns: repeat(8, auto);
   grid-gap: 10px;
   list-style: none;
   width: 60vw;
diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
index 041c195..b75c887 100644
--- a/webapp/src/components/Navbar.js
+++ b/webapp/src/components/Navbar.js
@@ -20,43 +20,52 @@ function Navbar() {
   }, []);
 
   const NavLinks = ({ isLoggedIn }) => (
-    <ul className={isClicked ? 'nav-menu active' : 'nav-menu'}>
-      <li className='nav-item'>
-        <Link to='/' className='nav-links' onClick={closeMenu}>Inicio</Link>
-      </li>
-      {isLoggedIn ? (
-        <>
-            <li className='nav-item'>
-                <Link to='/jugar' className='nav-links' onClick={closeMenu} data-testid="Jugar-button-navbar">Jugar</Link>
-            </li>
-            <li className='nav-item'>
-                <Link to='/historial' className='nav-links' onClick={closeMenu} data-testid="historial-button-navbar">Historial</Link>
-            </li>
-            <li className='nav-item'>
-                <Link to='/ranking' className='nav-links' onClicks={closeMenu} data-testid="Ranking-button-navbar">Ranking</Link>
-            </li>
-            <li>
-                <Link to='/logout' className='nav-links-mobile' onClick={closeMenu} data-testid="Salir-button-navbar">Salir</Link>
-            </li>
-        </>
-      ) : (
-        <>
-            <li>
-                <Link to='/sign-up' className='nav-links-mobile' onClick={closeMenu} data-testid="Registrarse-button-navbar">Registrarse</Link>
-            </li>
-            <li>
-                <Link to='/login' className='nav-links-mobile' onClick={closeMenu} data-testid="Entrar-button-navbar">Entrar</Link>
-            </li>
-        </>
-      )}
-    </ul>
+      <ul className={isClicked ? 'nav-menu active' : 'nav-menu'}>
+        <li className='nav-item'>
+          <Link to='/' className='nav-links' onClick={closeMenu}>Inicio</Link>
+        </li>
+        <li className='nav-item'>
+          <Link to='/abouts' className='nav-links' onClick={closeMenu}>About us</Link>
+        </li>
+        {isLoggedIn ? (
+            <>
+              <li className='nav-item'>
+                <Link to='/jugar' className='nav-links' onClick={closeMenu}
+                      data-testid="Jugar-button-navbar">Jugar</Link>
+              </li>
+              <li className='nav-item'>
+                <Link to='/historial' className='nav-links' onClick={closeMenu}
+                      data-testid="historial-button-navbar">Historial</Link>
+              </li>
+              <li className='nav-item'>
+                <Link to='/ranking' className='nav-links' onClicks={closeMenu}
+                      data-testid="Ranking-button-navbar">Ranking</Link>
+              </li>
+              <li>
+                <Link to='/logout' className='nav-links-mobile' onClick={closeMenu}
+                      data-testid="Salir-button-navbar">Salir</Link>
+              </li>
+            </>
+        ) : (
+            <>
+              <li>
+                <Link to='/sign-up' className='nav-links-mobile' onClick={closeMenu}
+                      data-testid="Registrarse-button-navbar">Registrarse</Link>
+              </li>
+              <li>
+                <Link to='/login' className='nav-links-mobile' onClick={closeMenu}
+                      data-testid="Entrar-button-navbar">Entrar</Link>
+              </li>
+            </>
+        )}
+      </ul>
   );
 
   return (
-    <nav className='navbar'>
-      <div className='navbar-container'>
-        <Link to='/' className='navbar-logo' onClick={closeMenu}>WIQ<i className='fab fa-typo3' /></Link>
-        <div className='menu-icon' onClick={toggleClick}>
+      <nav className='navbar'>
+        <div className='navbar-container'>
+          <Link to='/' className='navbar-logo' onClick={closeMenu}>WIQ<i className='fab fa-typo3'/></Link>
+          <div className='menu-icon' onClick={toggleClick}>
           <button aria-label="Menu toggle" data-testid="Menu-toggle-button">
             <i className={isClicked ? 'fas fa-times' : 'fas fa-bars'}/>
           </button>
diff --git a/webapp/src/components/Navbar.test.js b/webapp/src/components/Navbar.test.js
index 7d55299..7a1e9e1 100644
--- a/webapp/src/components/Navbar.test.js
+++ b/webapp/src/components/Navbar.test.js
@@ -26,6 +26,7 @@ describe('Componente Navbar', () => {
         renderNavbar(true);
 
         expect(screen.getByRole('link', { name: 'Inicio' })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'About us' })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Salir' })).toBeInTheDocument();
         expect(screen.getByRole('link', { name: 'Historial' })).toBeInTheDocument();
         expect(screen.getByRole('link', { name: 'Jugar' })).toBeInTheDocument();