While creating a navigation bar, I wanted to make a feature when a user clicks on an element, they can see a drop-down list. Also, when they exit the element, the list should toggle off.
Full Code below of the navigation bar
import "./header.css";
import { FaBars } from "react-icons/fa6";
import { useState } from "react";
export const Header = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
return (
<nav>
<div className="nav__items">
<div className="nav__logo">
<img src="imges" alt="codestates logo" />
<h1>COZ Shopping</h1>
</div>
<div className="nav__toggle">
<FaBars
size={34}
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
/>
{isDropdownOpen && (
<div
className="toggle__list"
onMouseLeave={() => setIsDropdownOpen(false)}
>
<div className="toggle__list__item">My Page</div>
<div className="toggle__list__item" id="item__middle">
Product List Page
</div>
<div className="toggle__list__item">Bookmark Page</div>
</div>
)}
</div>
</div>
</nav>
);
Breaking down the code to understand the toggle feature
First, using the useState Hook, we’re going to set a variable of isDropdownOpen with the function setIsDropdownOpen and have its default state set to false.
Currently, nothing will happen since we’re not making use of it.
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
Then we’re going to use an Event where if the FaBars component is clicked, it will toggle the setIsDropdownOpen to TRUE.
<FaBars size={34} onClick={() => setIsDropdownOpen(!isDropdownOpen)} />
Afterward, if isDropdownopen is TRUE, the following elements will render. If it’s isDropdownopen(false), the following elements will not render.
{isDropdownOpen && (
<div
className="toggle__list"
onMouseLeave={() => setIsDropdownOpen(false)}
>
<div className="toggle__list__item">My Page</div>
<div className="toggle__list__item" id="item__middle">
Product List Page
</div>
<div className="toggle__list__item">Bookmark Page</div>
</div>
)}
However, we want the users to feel a better experience when using the toggle list, therefore, we’re going to add the feature where if the user’s mouse leaves the list, the toggled div will close.
And we can implement that using the onMouseLeave Event. The following Event will make the setIsDropdownOpen back to FALSE and close the list. And we can open the list again if we click on the toggle component
<div className="toggle__list" onMouseLeave={() => setIsDropdownOpen(false)}
>
Top comments (0)