Skip to content

fix/navbar and logout #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CMolinaBetancourt merged 1 commit into from
Dec 10, 2025
Merged

fix/navbar and logout #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/_redirects
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* /index.html 200
44 changes: 26 additions & 18 deletions src/components/MobileMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
{
Expand Down Expand Up @@ -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>
Expand Down
74 changes: 41 additions & 33 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Community.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading