Welcome to part-15 of the series. First let’s fix a small bug as the tags was not centring properly in all small screens. Add the below change in Menu.styled.js file.
Now, it will show like below in tablet screens.
And like below in mobile screens.
Next, we will add a very good feature to the menu. This feature also i got from the awesome tutorial.
The feature is close the Side Menu, when we click on anywhere outside. This gives an added option to the user to close the Side menu, without clicking on the X.
For this we will first create a new file hooks.js inside the constants folder.
In this file, we are using the useEffect hooks. You can read more about it in my earlier blog post here.
We are adding an event listener here and checking whether it is equal to the ref which will be passed. If it is true then we will use the handler function.
Next, let’s update it in index.js file. We will first import the hooks compoment.
Next, we are using the React useRef which can get access to any DOM node. Then we are sending the variable node and the function setOpen(false) in the useOnClickOutside function.
We are finally giving the div wrapping our Burger and Menu component, this ref.
Now, we can click outside to close the Side Menu.
This completes part-15 of the series.
You can find the code for the same in this github repo.