From 6bc97f51620bac9dbf676fca9db6ce8eeeb50644 Mon Sep 17 00:00:00 2001
From: Catherine Molina Betancourt <cathemolinab@gmail.com>
Date: Mon, 8 Dec 2025 08:45:01 -0800
Subject: [PATCH] fix/navbar

---
 public/_redirects             |  1 +
 src/components/MobileMenu.jsx | 44 ++++++++++++---------
 src/components/Navbar.jsx     | 74 +++++++++++++++++++----------------
 src/pages/Community.jsx       |  4 +-
 4 files changed, 70 insertions(+), 53 deletions(-)
 create mode 100644 public/_redirects

diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..50a4633
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/src/components/MobileMenu.jsx b/src/components/MobileMenu.jsx
index 28775cf..140c8f3 100644
--- a/src/components/MobileMenu.jsx
+++ b/src/components/MobileMenu.jsx
@@ -1,17 +1,19 @@
 // react
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation} from 'react-router-dom';
 import { AiOutlineClose } from 'react-icons/ai';
 import { RiLayoutHorizontalFill, RiUser3Fill } from 'react-icons/ri';
 import { MdForum } from "react-icons/md";
 import { PiListBulletsFill } from 'react-icons/pi';
 
 const MobileMenu = ({ isOpen, toggleMenu }) => {
+  const location = useLocation();
+  
   const navLinks = [
     { name: 'Dashboard', href: '/dashboard', icon: PiListBulletsFill },
     {
       name: 'Detox Challenge',
-      href: '/detoxChallenge',
+      href: '/Challenges',
       icon: RiLayoutHorizontalFill,
     },
     {
@@ -44,22 +46,28 @@ const MobileMenu = ({ isOpen, toggleMenu }) => {
 
         {/* Links with Icons */}
         <nav>
-          <ul className="flex flex-col space-y-3 ml-10 ">
-            {navLinks.map((link) => (
-              <li key={link.name} className="mb-4">
-                <Link 
-                  to={link.href} 
-                  className="flex items-center text-stone-900 text-lg font-poppins font-semibold transition-colors hover:font-bold focus:outline-none focus:ring-2focus:outline-none  focus-visible:ring-2 focus-visible:ring-persianblue rounded-[5px]"
-                  onClick={toggleMenu} 
-                >
-                  <link.icon
-                    className="mr-2 text-2xl text-black w-5 h-6 "
-                    aria-hidden="true"
-                  />
-                  {link.name}
-                </Link> 
-              </li>
-            ))}
+            <ul className="flex flex-col space-y-3 ml-10">
+            {navLinks.map((link) => {
+              const isActive = location.pathname === link.href;
+              
+              return (
+                <li key={link.name} className="mb-4">
+                  <Link 
+                    to={link.href} 
+                    className={`flex items-center text-stone-900 text-lg font-poppins transition-colors hover:font-bold active:font-bold  focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue rounded-[5px] ${
+                      isActive ? 'font-bold' : 'font-normal'
+                    }`}
+                    onClick={toggleMenu} 
+                  >
+                    <link.icon
+                      className="mr-2 text-2xl text-black w-5 h-6"
+                      aria-hidden="true"
+                    />
+                    {link.name}
+                  </Link> 
+                </li>
+              );
+            })}
           </ul>
         </nav>
       </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index eb185bf..09ceb33 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
 //react
 import React, { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 
 //icons
 import { MdOutlineLogin } from 'react-icons/md';
@@ -17,6 +17,7 @@ function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false); // mobile menu state
   const [isAuthenticated, setIsAuthenticated] = useState(false); // user authentication state
   const navigate = useNavigate();
+  const location = useLocation(); 
 
   // check authentication from localstorage
   useEffect(() => {
@@ -117,38 +118,45 @@ function Navbar() {
           >
             <ul className="flex items-center gap-12 list-none p-0 m-0">
               <li>
-                <Link
-                  to="/dashboard"
-                  className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
-                >
-                  Dashboard
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="/challenges"
-                  className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
-                >
-                  Detox Challenge
-                </Link>
-              </li>
-              <li>
-                <Link
-                  to="community"
-                  className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
-                >
-                  Community Forum
-                </Link>
-              </li>
-
-              <li>
-                <Link
-                  to="/profile"
-                  className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
-                >
-                  Profile
-                </Link>
-              </li>
+              <Link
+                to="/dashboard"
+                className={`text-stone-900 text-base font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px] ${
+                  location.pathname === '/dashboard' ? 'font-bold' : 'font-normal'
+                }`}
+              >
+                Dashboard
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/challenges"
+                className={`text-stone-900 text-base font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px] ${
+                  location.pathname === '/challenges' ? 'font-bold' : 'font-normal'
+                }`}
+              >
+                Detox Challenge
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/community"
+                className={`text-stone-900 text-base font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px] ${
+                  location.pathname === '/community' ? 'font-bold' : 'font-normal'
+                }`}
+              >
+                Community Forum
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/profile"
+                className={`text-stone-900 text-base font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px] ${
+                  location.pathname === '/profile' ? 'font-bold' : 'font-normal'
+                }`}
+              >
+                Profile
+              </Link>
+            </li>
             </ul>
           </nav>
           <div
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 0158ed5..fc7ab5c 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -9,9 +9,9 @@ import { FaArrowRight } from 'react-icons/fa6';
 
 const Community = () => {
   return (
-    <main className="min-h-screen p-6 font-poppins">
+    <main className="min-h-screen font-poppins">
       <div className="max-w-[1000px] mx-auto">
-        <h1 className="text-3xl font-bold mb-2 font-playfair">
+        <h1 className="text-3xl font-playfair font-semibold text-eerie place-self-center lg:place-self-start mt-4 mb-2">
           Community Forum
         </h1>
         <p className="text-eerie mb-8">