Building a React Redux compatible hamburger menu – Setup (part 1)

Most of the Web Apps these days need to support a special navigation for mobile devices (smaller screens) and sometimes that option looks a little different from the one implemented on larger screens.

One of the most popular methods is to implement the hamburger menu which would look like this:

Uber might be a good example:

Basically, there are two ways to implement the hamburger navigation bar menu and those options are:

Implementing something from scratch, this means adding some CSS effects for the slide in and slide out effect, as well as logic for the javascript in order to control when the panel is open/closed, and media queries to control when the menu is going to be shown.

Using an existent library makes it easy to plug and play and customize it based on our needs.

Should we use the first approach or the second?, Why not? Will the world end? How do I know?, lots of questions, right? what if we just look into the different approaches and then leave it up to you to decide which one fits your project best.

In the first two parts of these tutorials, we will learn how to do it using the first option (building something from scratch – custom implementation).

NOTE: In this first part of the tutorial we are going to set up our new project using the create-react-app script to initialize our project quickly, I would recommend you follow this first part and implement it in a separate project, in that case you’d be able to see it actually working. I have experienced that when you implement a new feature in an existent project sometimes it does not work because you’re either using different dependency versions or there is a conflict with one of your existent dependencies.

Dependencies utilized in this project:

React – ^16.6.3

react-router-dom – ^4.3.1

react-dom – ^16.6.3

react-redux – ^5.1.1

react-router-dom – ^4.3.1

redux – ^4.0.1

redux-thunk – ^2.3.0

node-sass – ^4.10.0

This is what you’re going to build in the next tutorial, once you’ve set everything up for our new project

Let’s get started

We can run one command and initialize our project real quick using the npm command create-react-app

npx create-react-app burger-menu
cd burger-menu
npm start

Since this example uses React Redux we need to install that dependency:

npm install --save redux
npm install --save react-redux

We’ll use use Redux Thunk

npm install redux-thunk --save

And we want to use routes so we are going to install React Router

npm install --save react-router-dom

In this example, we are going to use SASS so we need to install that dependency as well

npm install node-sass --save

Let’s use a less generic name for the main div where the React application is mounted in the public/index.html file:

- <div id="root"></div>
+ <div id="rootContainer"></div>

As we are going to use SCSS we could remove the main src/App.css that was created automatically when we initialized the base project with the create-react-app NPM command.

Also we are going to remove the main src/App.js and we are going to use a custom one so we can easily remove it from the terminal:

rm src/App.js

Based on a complex project I worked on in the past, I decided to create common layouts from the beginning so we could easily customize and re-use them in the case fo this example, we have a login and dashboard/panel layouts due to most of the time they have structure/CSS differences, in this case as I’m using React Router 4 I followed a similar approach to the one in this tutorial https://simonsmith.io/reusing-layouts-in-react-router-4/