Creating a hamburger menu in React NextJS App

Image for post
Image for post
Photo by Tracy Adams on Unsplash

I have recently completed the amazing Advanced React course by Wes Bos. In the course he taught to built, an online store with the latest technologies listed below.

Image for post
Image for post
The latest Technologies

Most of the students built something else with what he taught, after they learned. I will build an Indian Restaurant Billing App from what i learnt.

I will keep updating the app on my github, but will not give the complete steps to make it on blog. The complete steps are complicated and also copyrighted by Wes and don’t want to produce a course with the same.

I will be posting the changes which i made to the ecommerce app by Wes, to make it a Restaurant Billing App.

Now, i don’t like the traditional menu used in the App which is as below.

Image for post
Image for post
Traditional Menu

I wanted to convert it into a hamburger menu, so that it could be used on a tablet also easily.

We will understand a bit of the frontend flow, to make this hamburger menu. The NextJs app starts from a file _app.js, which is in the below screenshot.

Image for post
Image for post
_app.js

Next, we will make the Page component. We have some basic styled components used here with theme and also have an injectGlobal from styled component, which is used to inject global styles to all components.

We also have two pages in our app. One for Home and other for a page to Add the dishes.

Image for post
Image for post
index.js
Image for post
Image for post
adddish.js

Now, we will create the Header component, which will contain our Nave menu , title and a future button to save the bill.

Image for post
Image for post
Header.js

Now, we will finally create our hamburger menu. For this we will use react-burger-menu

Image for post
Image for post
hamburger

For the hamburger menu to work properly, we have to inject some css in the global level.

So, in our styled component project we inject in Page.js inside injectGlobal

Now, we will write the code for the navbar in Nav.js

We start with importing Link and react-burger-menu. Next, we write a style component for the anchor tag, which we will use inside the Link tag.

Image for post
Image for post

Next, we will write the Menu and give some custom property. These all are taken from react-burger-menu documentation. Notice that we are using state to close the Menu, whenever the user click on any item on the Menu.

Image for post
Image for post

Now, on going to localhost:7777 and clicking on the hamburger, we get the menu coming from the right. Click on Add Dish to change to that page.

Image for post
Image for post
Our App so far

You can find the code for the same in my github repository in this link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store