diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 6aacf3b..715a9d6 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; -const links = [ +// Links logged out grid +const loggedOutLinks = [ { id: 'home', text: 'Home', href: '/' }, { id: 'dashboard', text: 'Dashboard', href: '/dashboard' }, { id: 'privacy-policy', text: 'Privacy Policy', href: '/privacy-policy' }, @@ -11,70 +12,122 @@ const links = [ text: 'Terms of Service', href: '/terms-of-service', }, - { id: 'onboarding', text: 'Onboarding', href: '/onboarding' }, + +]; + +// Links logged in +const loggedInLinks = [ + { id: 'home', text: 'Home', href: '/' }, + { id: 'privacy-policy', text: 'Privacy Policy', href: '/privacy-policy' }, + { + id: 'terms-of-service', + text: 'Terms of Service', + href: '/terms-of-service', + }, ]; const Footer = () => { - const getLinkGridClasses = (id) => { + const [isLoggedIn, setIsLoggedIn] = useState( + !!localStorage.getItem('authToken') + ); + + useEffect(() => { + const checkAuth = () => { + setIsLoggedIn(!!localStorage.getItem('authToken')); + }; + + window.addEventListener('storage', checkAuth); + checkAuth(); + + return () => { + window.removeEventListener('storage', checkAuth); + }; + }, []); + + const getLinkClasses = (isLoggedIn) => + `focus:outline-none focus-visible:ring-2 rounded-lg px-2 py-1 transition-colors whitespace-nowrap ${ + isLoggedIn + ? `font-[Poppins] text-xl font-medium text-[#1E1E1E] leading-normal hover:font-bold focus:ring-persianblue ` + : 'font-medium text-xl text-[#1e1e1e] hover:font-bold focus:ring-persianblue' + }`; + + // Grid logged out state + const getLoggedOutGridClasses = (id) => { switch (id) { case 'home': - return 'row-start-1 col-start-1'; + return 'lg:row-start-1 lg:col-start-1'; case 'dashboard': - return 'row-start-1 col-start-2'; + return 'lg:row-start-1 lg:col-start-2'; case 'privacy-policy': - return 'row-start-2 col-start-1'; + return 'lg:row-start-2 lg:col-start-1'; case 'sign-up': - return 'row-start-2 col-start-2'; + return 'lg:row-start-2 lg:col-start-2'; case 'terms-of-service': - return 'row-start-3 col-start-1'; + return 'lg:row-start-3 lg:col-start-1'; default: return ''; } }; return ( - ); }; diff --git a/src/components/MobileMenu.jsx b/src/components/MobileMenu.jsx new file mode 100644 index 0000000..0acaf4c --- /dev/null +++ b/src/components/MobileMenu.jsx @@ -0,0 +1,63 @@ +// react +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AiOutlineClose } from 'react-icons/ai'; +import { RiLayoutHorizontalFill, RiUser3Fill } from 'react-icons/ri'; +import { PiListBulletsFill } from 'react-icons/pi'; + +const MobileMenu = ({ isOpen, toggleMenu }) => { + const navLinks = [ + { name: 'Dashboard', href: '/dashboard', icon: PiListBulletsFill }, + { + name: 'Detox Challenge', + href: '/detoxChallenge', + icon: RiLayoutHorizontalFill, + }, + { name: 'Profile', href: '/profile', icon: RiUser3Fill }, + ]; + + return ( + <> + {/* Side Menu*/} + + + ); +}; + +export default MobileMenu; \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index b6c8654..8fbf07b 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,52 +1,161 @@ -// react +//react +import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; -const navbarClass = ` - flex items-center justify-center cursor-pointer transition-all duration-300 ease-in-out - h-14 w-32 md:w-[220px] px-4 md:px-[58px] py-[8px] rounded-[10px] - text-stone-900 text-2xl font-normal font-playfair - bg-transparent - border-4 border-transparent`; +//icons +import { MdOutlineLogin } from 'react-icons/md'; +import { HiMenu } from 'react-icons/hi'; -const Navbar = () => { - return ( -
- - Skip to main content - - -
- - Healie - +//components +import MobileMenu from './MobileMenu'; + +function Navbar() { + const [isMenuOpen, setIsMenuOpen] = useState(false); // mobile menu state + const [isAuthenticated, setIsAuthenticated] = useState(false); // user authentication state + + // check authentication from localstorage + useEffect(() => { + const checkAuth = () => { + const token = localStorage.getItem('authToken'); + setIsAuthenticated(!!token); + }; + checkAuth(); + window.addEventListener('storage', checkAuth); + return () => window.removeEventListener('storage', checkAuth); + }, []); - -
-
+ + +
{ + if (e.key === 'Enter' || e.key === ' ') { + handleLogout(); + } + }} + className="flex justify-start items-center gap-3 cursor-pointer text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue rounded-[5px] p-1 transition-all duration-300 ease-in-out" + role="button" + tabIndex="0" + aria-label="Log out of your account and go to home page" + > + + Log Out + + {/* logout icon */} +
+ + + + ); -}; +} -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 4f90682..3861d2e 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -18,6 +18,7 @@ function Login() { if (!isValidEmail || !isValidPassword) { setFormSubmitMessage('Fill form properly'); } else { + localStorage.setItem('authToken', 'my-auth-token'); const loginFormData = new FormData(); for (const key in formValues) { loginFormData.append(key, formValues[key]); @@ -99,4 +100,4 @@ function Login() { ); } -export default Login; +export default Login; \ No newline at end of file