React Navigation Bar Step-by-step Tutorial - With cool slider animation

This video will help you make a navbar with a smooth slider animation effect. Here is the Github link to the template repo, you can use it to follow through the video: https://github.com/ychenz/react-tut

Here is the link to the Github branch for the finished version:
https://github.com/ychenz/react-tut/tree/tut-1-navbar_slider

The link to the design file on Figma:
https://www.figma.com/file/NYXHsHLBzCfr6fkrA0tKxjss/Untitled?node-id=0%3A1

The IDE I use:
https://www.jetbrains.com/pycharm/

If you don't have yarn package management tool, please go to the following links:
https://classic.yarnpkg.com/en/docs/install

I tried to show all the steps necessary to create the navigation bar to make the video useful to as many people as possible, if you come for the SLIDER ANIMATION, please feel free to use the following link to jump: http://www.youtube.com/watch?v=iLH5tA4hUrw&t=11m4s

The following summarize the steps taken in the video:

Step 1:
Clone the template repo, draft the navbar using React and SCSS with minimal styling making all elements aligned horizontally. Remove the "ugly" navbar existed in the repo and place the one we just created on the page.

Step 2:
Refer to the design to implement all the stylings in the style.scss file.

Step 3:
Create placeholder pages to which the menu entries on the navbar link. Implement links using "NavLink" component of the react-router-dom library. Add "activeClassName" property to "NavLink" component to highlight which page is active.

Step 4.
Implement the slider using a div element, placing it at the bottom left corner using absolute position at first to make sure it looks correct.

The animation is implemented by first determine the X location of the left edge of the menu, then determine the left most X location of the active entry by using querySelector function to select the element with the active class name. By subtracting these 2 values, we can calculate the distance between the start of the menu and the slider, thus position the slider to the right location on the menu. The "translate3d" CSS property and "requestAnimationFrame" function are used to achieve best animation performance.

About the Template Github Repo:

I created the template repo and use it to bootstrap medium or large React Redux projects. The file structure in place is to make sure the components are easy to find and to change as the project grows. React-router and Redux are correctly configured and ready for use, please feel free to use it for your projects too!

This is my first try making tutorials like this, so please comment below for any questions and let me know how I can help you better!

Thank you for watching and don't forget to LIKE and SUBSCRIBE if you find it helpful!