This video is available to students only

Adding Side-drawer to our Navbar

In this lesson, we're going to add side drawer to our navbar

Adding sidebar to our navigation bar#

As I said in the last lesson, I want the search bar to be on the right all the time. What I want is the logo and the links to appear on navigation bar on bigger screens; but on smaller screens, I want to show a hamburger icon instead. Clicking on hamburger icon will open a window which will contain all our links.

Inside the nav left div, let's create another div element; I would like to call it nav left hamburger. We need to import the Hamburger icon from react icons. It's called FaBars, so it should be FaIcons.Fabars. Now I want to show the window when someone clicks on this hamburger icon, which means I need to maintain the state which toggles when someone clicks on this icon.

This is where the useState hook comes handy. It helps to create state variables in functional components. Simply import it from react. To create a state variable, we need a constant like for any other variable. Now we need to create an array which should have the name of the state variable in the first position or index 0 and a function which mutates the state variable on second position or index 1. It's a convention to name the function prefixed by "set" followed by the name of the state variable. Our variable is called sidebar, so our function will be called setSidebar. The name of the state variable here should start with a capital letter.

Now let's create a function which toggles the sidebar state. If it's true, the function will change it to false and vice versa. Const showSidebar is equal to setSidebar and the new state will be opposite of the current state, so we will use a bang operator. Like I said, setSidebar is a function and like any other function, it takes a parameter. It sets the value of the state to be this variable, in this case, it's the opposite of the current state.

Navigation.tsx

Start a new discussion. All notification go to the author.