Skip to content
Snippets Groups Projects
Commit dda523f2 authored by Chloé JACOB's avatar Chloé JACOB :alien:
Browse files

responsive menu

parent d9c50318
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Navbar.tsx
+ 79
− 36
View file @ dda523f2
...@@ -3,49 +3,92 @@ import { Link } from 'react-router-dom'; ...@@ -3,49 +3,92 @@ import { Link } from 'react-router-dom';
// ICONS // ICONS
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 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'; import { faCompass, faSquarePlus, faCircleUser, faMoon, faSun } from '@fortawesome/free-regular-svg-icons';
const Navbar = () => { const Navbar = () => {
const [isDarkMode, setIsDarkMode] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const handleDarkModeToggle = () => { const handleDarkModeToggle = () => {
setIsDarkMode(!isDarkMode); setIsDarkMode(!isDarkMode);
document.documentElement.classList.toggle('dark'); document.documentElement.classList.toggle('dark');
}; };
const handleMenuToggle = () => {
setIsMenuOpen(!isMenuOpen);
};
return <> return (
{/* HEADER */} <>
<div className="border-b-[0.8px] dark:text-white"> {/* 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"> <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> <h1 className="instalike_title text-[44px]">Instalike</h1>
<nav className="flex gap-5"> <nav className="hidden sm:flex gap-5">
{/* HOME */} {/* HOME */}
<Link to="/feed"> <Link to="/feed">
<FontAwesomeIcon className="text-[24px]" icon={faHouse} /> <FontAwesomeIcon className="text-[24px]" icon={faHome} />
</Link> </Link>
{/* DISCOVER */} {/* DISCOVER */}
<Link to="/discover"> <Link to="/discover">
<FontAwesomeIcon className="text-[24px]" icon={faCompass} /> <FontAwesomeIcon className="text-[24px]" icon={faCompass} />
</Link> </Link>
{/* ADD PICS */} {/* ADD PICS */}
<Link to="/addpost"> <Link to="/addpost">
<FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} /> <FontAwesomeIcon className="text-[24px]" icon={faSquarePlus} />
</Link> </Link>
{/* PROFIL */} {/* PROFIL */}
<Link to="/profile"> <Link to="/profile">
<FontAwesomeIcon className="text-[24px]" icon={faCircleUser} /> <FontAwesomeIcon className="text-[24px]" icon={faCircleUser} />
</Link> </Link>
{/* LIGHT/DARK MODE TOGGLE */} {/* LIGHT/DARK MODE TOGGLE */}
<button onClick={handleDarkModeToggle}> <button onClick={handleDarkModeToggle}>
<FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faSun : faMoon} /> <FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faMoon : faSun} />
</button> </button>
</nav> </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>
</div> )}
</>; </>
);
}; };
export default Navbar; export default Navbar;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment