Adding Side-drawer to our Navbar

[00:00 - 00:17] As I said in the last lecture, 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 this navigation bar on bigger screen, but on smaller screens I want to show a hamburger icon instead.

[00:18 - 00:42] Clicking on that hamburger icon will open a window which will contain all these links. Now let's go to the ds code and inside the nav left tip, let's create another div element and let's call it nav_left_hamburger.

[00:43 - 00:49] Now to show a hamburger icon we need to import it. We can simply use it from the react icons that we installed.

[00:50 - 00:56] It's called faikins.fa_bars. That's it.

[00:57 - 01:11] Now I want to show the window when someone clicks on this hamburger icon, which means I need to maintain a state which toggles when someone clicks on this icon. This is where the UState hook comes handy.

[01:12 - 01:23] It helps to create state variables in functional components. We import it from react_useState.

[01:24 - 01:32] To create a state variable we need a constant like for any other variable. Const.

[01:33 - 01:59] 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. So sidebar and set sidebar is equal to UState and false.

[02:00 - 02:11] The initial value is false. It's a convention to name the function prefix by a set followed by the name of the state variable which is sidebar here.

[02:12 - 02:27] Our variable is called sidebar so our function will be called set sidebar. The name of the state variable here should start with a capital letter like set sidebar as is capital in the sidebar.

[02:28 - 02:40] Now let's create a function which toggles the sidebar state. So if it's false and after clicking it becomes true and if it's true on clicking it it becomes false.

[02:41 - 03:08] So sidebar is the name of the function and set sidebar and the new state will be opposite of the current state so it will be opposite of sidebar. So for that we will use a bang operator which is opposite of the current value.

[03:09 - 03:19] Like I said set sidebar is a function and like any other function it takes a parameter. It sets the value of the state to be this variable.

[03:20 - 03:36] In this case it's opposite of the current state. We can add on click event handler to this icon which will call the show sidebar function.

[03:37 - 03:41] Then a user clicks on this icon. This is about the icon.

[03:42 - 03:46] Now what we need to show when someone clicks on this icon. Let's work on that.

[03:47 - 03:49] I need a naptag. napt.

[03:50 - 03:59] I want this to be activated when the sidebar value is true. We can use a ternary operator to change the class name depending on the state.

[04:00 - 04:33] So class name and if sidebar is true I want to give class name nav menu active otherwise it can be just nav menu. Inside this nav container let's create an unordered list and let's give it a class name nav menu items.

[04:34 - 04:43] The first list item will be a cancel button which will disable the menu. Now let's give it a class name of cancel.

[04:44 - 04:59] It will use the icon here and the name of this icon is faikens.fa chevron left. The next one can be the header which will say navigation.

[05:00 - 05:25] So let's give it a class name nav menu items underscore underscore header and let's call it navigation. The next one will be an item called categories so we can just simply write categories and the last one will be called courses.

[05:26 - 05:35] So let's just write courses here. No need to give any class name for now and I suppose that's it.

[05:36 - 05:49] Now you can just copy the whole file navigation.scss from the code below and replace it with the previous one. This one has all the styles we need for our navigation bar even the new ones that we have written right now.

[05:50 - 05:54] Nothing fancy going on here. You'll be able to understand it once you repeat it.

[05:55 - 06:12] So make sure you copy the code go to the navigation.scss file delete it and paste the new file. We can open the browser now to see how it looks.

[06:13 - 06:29] Okay we need to do one more thing. What we can do is on navigation.t.sx file and here on the unordered list we can again create an on click event function which will again trigger the show sidebar function.

[06:30 - 06:38] Now if you click anywhere on this nav it will close. Amazing.

[06:39 - 06:43] With this we have finished our navigation component. Now let's move on to the next lecture.