diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index c6dc8fbbe3a9fc48338db389903d98de7dd12433..8cf0c516f90c7535b6d6dfbd35d6f910357cddcc 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -3,49 +3,92 @@ import { Link } from 'react-router-dom'; // ICONS import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faHouse } from '@fortawesome/free-solid-svg-icons'; +import { faHome, faBars, faXmark } from '@fortawesome/free-solid-svg-icons'; import { faCompass, faSquarePlus, faCircleUser, faMoon, faSun } from '@fortawesome/free-regular-svg-icons'; - const Navbar = () => { - const [isDarkMode, setIsDarkMode] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); - const handleDarkModeToggle = () => { - setIsDarkMode(!isDarkMode); - document.documentElement.classList.toggle('dark'); - }; + const handleDarkModeToggle = () => { + setIsDarkMode(!isDarkMode); + document.documentElement.classList.toggle('dark'); + }; + const handleMenuToggle = () => { + setIsMenuOpen(!isMenuOpen); + }; -return <> - {/* HEADER */} - <div className="border-b-[0.8px] dark:text-white"> + return ( + <> + {/* HEADER */} + <div className="border-b-[0.8px] dark:text-white"> <div className="max-w-[1280px] mx-auto flex items-center justify-between px-4 py-2 h-16"> - <h1 className="instalike_title text-[44px]">Instalike</h1> - <nav className="flex gap-5"> - {/* HOME */} - <Link to="/feed"> - <FontAwesomeIcon className="text-[24px]" icon={faHouse} /> - </Link> - {/* DISCOVER */} - <Link to="/discover"> - <FontAwesomeIcon className="text-[24px]" icon={faCompass} /> - </Link> - {/* ADD PICS */} - <Link to="/addpost"> - <FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} /> - </Link> - {/* PROFIL */} - <Link to="/profile"> - <FontAwesomeIcon className="text-[24px]" icon={faCircleUser} /> - </Link> - {/* LIGHT/DARK MODE TOGGLE */} - <button onClick={handleDarkModeToggle}> - <FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faSun : faMoon} /> - </button> - </nav> + <h1 className="instalike_title text-[44px]">Instalike</h1> + <nav className="hidden sm:flex gap-5"> + {/* HOME */} + <Link to="/feed"> + <FontAwesomeIcon className="text-[24px]" icon={faHome} /> + </Link> + {/* DISCOVER */} + <Link to="/discover"> + <FontAwesomeIcon className="text-[24px]" icon={faCompass} /> + </Link> + {/* ADD PICS */} + <Link to="/addpost"> + <FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} /> + </Link> + {/* PROFIL */} + <Link to="/profile"> + <FontAwesomeIcon className="text-[24px]" icon={faCircleUser} /> + </Link> + {/* LIGHT/DARK MODE TOGGLE */} + <button onClick={handleDarkModeToggle}> + <FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faMoon : faSun} /> + </button> + </nav> + {/* BURGER MENU */} + <div className="sm:hidden"> + <button onClick={handleMenuToggle}> + <FontAwesomeIcon className="text-[24px]" icon={isMenuOpen ? faXmark : faBars} /> + </button> + </div> + </div> + </div> + {/* RESPONSIVE MENU */} + {isMenuOpen && ( + <div className="sm:hidden border absolute right-0 z-10 bg-white dark:bg-darkblue"> {/*inset-x-0*/} + <nav className="flex flex-col gap-5 p-4"> + {/* HOME */} + <Link to="/feed" onClick={handleMenuToggle} className="flex items-center gap-3"> + <FontAwesomeIcon className="text-[24px]" icon={faHome} /> + <p className="text-start">Home</p> + </Link> + {/* DISCOVER */} + <Link to="/discover" onClick={handleMenuToggle} className="flex items-center gap-3"> + <FontAwesomeIcon className="text-[24px]" icon={faCompass} /> + <p className="text-start">Discover</p> + </Link> + {/* ADD PICS */} + <Link to="/addpost" onClick={handleMenuToggle} className="flex items-center gap-3"> + <FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} /> + <p className="text-start">Ajouter un post</p> + </Link> + {/* PROFIL */} + <Link to="/profile" onClick={handleMenuToggle} className="flex items-center gap-3"> + <FontAwesomeIcon className="text-[24px]" icon={faCircleUser} /> + <p className="text-start">Mon profile</p> + </Link> + {/* LIGHT/DARK MODE TOGGLE */} + <button onClick={handleDarkModeToggle} className="flex items-center gap-3"> + <FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faMoon : faSun} /> + <p className="text-start">{isDarkMode ? "Mode sombre" : "Mode clair"}</p> + </button> + </nav> </div> - </div> -</>; + )} + </> + ); }; -export default Navbar; \ No newline at end of file +export default Navbar;