Fixed navbar

Arquisoft · Mar 10, 2024 · 9df6a66 · 9df6a66
1 parent 6e261dd
commit 9df6a66
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/webapp/src/components/Navbar.jsx b/webapp/src/components/Navbar.jsx
@@ -1,16 +1,18 @@
+import { Link } from 'react-router-dom'
+
 function Navbar() {
 
     return (
         <header className="lg:px-16 px-4 bg-white flex flex-wrap items-center py-4 shadow-md">
             <div className="flex-1 flex justify-between items-center">
-                <a href="/" className="text-xl font-bold">WIQ</a>
+                <Link to="/" className="text-xl font-bold">WIQ</Link>
             </div>
             <div className="hidden md:flex md:items-center md:w-auto w-full" id="menu">
                 <nav>
                     <ul className="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
-                        <li><a className="md:p-4 py-3 px-0 block font-bold text-gray-600 hover:text-gray-900" href='/play' >Play</a></li>
-                        <li><a className="md:p-4 py-3 px-0 block font-bold text-gray-600 hover:text-gray-900" href="/rankings">Rankings</a></li>
-                        <li><a className="md:p-4 py-3 px-0 block font-bold text-sky-500 hover:text-sky-800" href="/login">Sign in</a></li>
+                        <li><Link className="md:p-4 py-3 px-0 block font-bold text-gray-600 hover:text-gray-900" to='/play' >Play</Link></li>
+                        <li><Link className="md:p-4 py-3 px-0 block font-bold text-gray-600 hover:text-gray-900" to="/rankings">Rankings</Link></li>
+                        <li><Link className="md:p-4 py-3 px-0 block font-bold text-sky-500 hover:text-sky-800" to="/login">Sign in</Link></li>
                     </ul>
                 </nav>
             </div>