Creating Navbar

[00:00 - 00:09] In this lesson, we are finally going to build our navigation bar. I was very confused if I should use and design or make it entirely by myself.

[00:10 - 00:19] I tried out some designs and finally decided to make it myself. It's entirely a personal choice and you're free to use and design if you wish to.

[00:20 - 00:27] Let's start by creating a new folder inside the SRC directly. And let's name it component.

[00:28 - 00:46] Inside components, let's create navigation.esx file. First of all, let's import react from react.

[00:47 - 01:05] Now let's create a navigation function. And return a dev variant.

[01:06 - 01:17] Let's give it a class name of Nav container. Because this is going to be the topmost layer of our navigation bar.

[01:18 - 01:25] Inside the Nav container, we need to make another dev element. Now let's give it a class name of Nav.

[01:26 - 01:39] Now I'm planning to keep the logo and the navigation links on the left and the search bar on the right. So let's create two more dev elements inside this Nav dev.

[01:40 - 01:49] And we can call them NavLeft and NavRight. So first one can be Nav_Left.

[01:50 - 02:20] And the second one can be Nav_ And two navigation links. And as we source, what we can do.

[02:21 - 02:30] Now you can simply download it from the given link below. Now if you will open that link here, you can download this image.

[02:31 - 02:39] You can name it anything you want to and you can save it maybe even desktop. Anyway, you prefer.

[02:40 - 02:54] After downloading it, you can create an assets folder inside the SRC directory. And just copy the logo inside the assets directory.

[02:55 - 03:15] On top, let's import logo from assets/logo. Now we can simply use logo as source of our next tab.

[03:16 - 03:29] We need links as well. So let's create an unorder list with class name, Nav_ left_left_less.

[03:30 - 03:45] We need two list items. So we can simply write.nav_left_less and start and do.

[03:46 - 03:53] And just press tab. This will create two list items for us with same class name.

[03:54 - 04:00] And yeah, this should be list item. This one.

[04:01 - 04:11] Now about naming them, first one can be called categories. And the second one can be called courses.

[04:12 - 04:20] We are good for now for the nav_underscore left. For the nav_right div, we only need a search bar.

[04:21 - 04:26] So let's create a form tag first. Form.

[04:27 - 04:32] With class name. Nav_ underscore.

[04:33 - 04:52] Right_ underscore. So inside this form, we need to have an input tag which will have a type of text.

[04:53 - 05:12] Class name can be nav_underscore right_underscore search_input. And the placeholder will be search_push.dot.dot.

[05:13 - 05:19] Guys, don't hate me for using these weird class names. Let's just set I'm use to write SAS this way.

[05:20 - 05:32] I find this way easier to arrange and a lot of front-end developers prefer nesting inside SAS. All right, now we need an icon to be placed inside the search bar.

[05:33 - 05:38] And for that, we can use react icons. So what we can do is install it.

[05:39 - 06:14] Inside the terminal, make sure if you're inside the client directory and npm install react-icon. Once it's installed, we can import start as fai-kin from react-icons/fai.

[06:15 - 06:25] Star means everything as fai-kins and fai-stands for our font also. If you are into front-end development, I'm pretty sure you must have heard about them.

[06:26 - 07:04] Moving on inside the search form, we can make a button tag which can have a class name of nav_underscore right_underscore search_button. Inside this tag, we can use fai-kin.fai search which is the name of the icon inside this close tag.

[07:05 - 07:20] This is how we use icons with react-icon. We see a warning because we haven't exported it so let's just do that.

[07:21 - 07:26] Now we need to style this. We have written our JSX, all we need is to style this.

[07:27 - 07:31] I have written the styling of this component. You can just copy it from the code below.

[07:32 - 07:45] It's better if we don't waste too much time on writing styles, else the course will get too long. Once you have copied the code from below, make a folder inside SAS directory called component.

[07:46 - 08:06] Inside the components folder, let's create a file called navigation.scs. It will start with underscore since it's a convention in SAS to start your file names with an underscore.

[08:07 - 08:18] Inside this file, paste the code that you have copied. Inside the mean.scs file, we need to import it.

[08:19 - 08:39] So import components/navigation.sc As I told you, we don't need to write the extension SAS will understand it for us. Before looking at the result on the browser, let me explain how I have written the styles.

[08:40 - 08:51] So let's go back to navigation.scs file. Our nap container is only used for the background color, which is a gray color variable listed in the base.scs file.

[08:52 - 09:03] This is how we can use a variable, refixing it by a dollar sign, and followed by the name of the variable. In this case, it is color gray light one.

[09:04 - 09:15] Our nap div is the parent of left and right sections. So the display is flexed and justify content is space between with some padding .

[09:16 - 09:22] The left section is 40% of the total width. If you are new to SAS, this must be looking very different to you.

[09:23 - 09:36] In SAS, it's very common to nest the children elements. For example, nav_ underscore_left is the children of the nav element, and this must be inside the closing bracket of the nav element.

[09:37 - 09:43] Now, do you see the dollar sign here? Dollar sign is nothing but nav here.

[09:44 - 09:54] Make sure you are inside the scope of the parent element, otherwise you won't be able to use it. Moving on, our logo has a width and height of 55 pixels.

[09:55 - 10:11] I have given no style to the list, and this is the basic style given to the list item. Our right section has flex one, which means it takes all the available size, which is 60% as the left section was assigned 40%.

[10:12 - 10:30] Our search element is position relative, because we want to put the search icon on a relative position to this search box. Our button has position absolute, and it is 10 pixels right from the parent search element.

[10:31 - 10:50] There is one more thing left to do before we see the styles applied properly, which is importing the styles. Let's go to the index.tsx file, and import main.scss file here.

[10:51 - 11:15] We can delete app.css and index.css files, since we don't have to use them anymore. Also, we can remove the imports, index.css, and we can also remove it from here .

[11:16 - 11:35] We can take off the import from here. Finally, let's go to the client and run npm start to see how it finally looks.

[11:36 - 11:40] Oops, we see nothing. Well, I know why.

[11:41 - 11:56] We haven't called the navigation component inside the app.tsx file. What we need to do is go to the app.tsx file, and above this search statement, let's import navigation.

[11:57 - 12:02] Yep, yep. And it will automatically import it.

[12:03 - 12:12] If not, you can just do it manually. Now, by placing it above the switch statement, it will be seen on every page of this application.

[12:13 - 12:32] Since we are inside the VS code, we also forgot to give class name to our image tag. So, let's give it a class name, which is going to be nav_less_less_less_less_ less_less_less.

[12:33 - 12:39] Fingers crossed. Now, let's go to the browser and looks good, right?

[12:40 - 12:55] This looks good though, but I want to show a side drawer on the smaller screen, because if I shrink it, it looks like that. And I want the search box to be big, and on left, I want a search hamburger icon.

[12:56 - 13:05] So, I want to create a side drawer on smaller screens, because I want the search bar to be working in all conditions. Right now, it cannot be used.

[13:06 - 13:09] So, let's make the side drawer in the next lesson.