Alt Text 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.

Menu.styled.jsMenu.styled.js

Now, it will show like below in tablet screens.

tab screenstab screens

And like below in mobile screens.

Mobile ScreensMobile 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.

hooks.jshooks.js

Next, let’s update it in index.js file. We will first import the hooks compoment.

index.jsindex.js

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.

index.jsindex.js

Now, we can click outside to close the Side Menu.

Closing MenuClosing Menu

This completes part-15 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.