Create a Navbar with Tailwind CSS - React Tutorial 15

what's up everyone welcome back to your react but actually we're not doing react really that much in this video because we're actually going to be doing more design stuff but it's going to be a little bit react because we're putting it inside of a react application episode 15. so let's get started what we're going to be doing is we're going to be creating a banner on the site and this is going to be our navigation that will yeah i guess banner isn't quite the right word because banner is usually like a temporary thing like oh we just released version two or something so i think navigation would probably be the better choice of words and we have been using tailwind css so far for this series so as always we're going to use some of the existing code for tailwind and modify it to fit our needs so if you search tailwind and then navbar you'll find something from go away tailwind ui and tailwind ui is a paid thing so basically you can pay to get some like pre-built components that you know work really well and just to show you the difference we're also going to look at banners versus nav bars so go ahead and go to the tailwind ui.com site we're not going to have to pay anything for this video because there's a another thing you should know so we're going to look at banners you can see these are banners here not exactly what we're looking for we're looking more for nav bars so if you go through here you can find what you like for example i really like this one down here at the bottom pretty simple but when you click get the code it costs money so we're going to talk about how we can pirate this no i'm just playing no pirating because the first one on here is free so if you go up here you can go to the code and look at that it gives us everything we need to create this nav bar another thing there's this drop down here and would you look at that they make it react friendly so now you don't have to go through here and change class to class name in 300 locations so here's what we're going to do we're going to copy this component you can see it's just example so you can go in here and change the name but there's a nice copy button right here and don't hesitate to consider purchasing if you want to you know try out any other examples now i don't have an affiliate code i'm not sponsored or anything so just mentioning that but taiwan if you want to sponsor me hit me up all right enough messing around let's get back to the code so let's go over to our application i'm going to commit our previous changes just to get everybody on the same page so i just called this pass component if you want to jump to our location and inside of our source code we're going to go into components new file i'm just going to call this header.js paste their code i'm going to scroll up and this actually has the export with the function definition which you can do so we don't have to have that export line at the bottom i'm going to change the name of this to header save did some reformatting for us and then let's talk about how we can bring this into app.js so we'll go into app.js go to the very top of our code so where it says return inside of this div here we can put the header component safe we will need to import this so import header from components header alright let's take a look at our site and you can see it needs a few modules to be installed with npm so it looks like headless ui for react and hero icons for react so we're going to copy this and we're going to say npm install paste that and then we'll do it again with hero icons all right those should be installed they were added to our package.json and now we should be able to go to our site there we go now i like this one pretty well but if you're not sure there's another page where you can get some examples which is under headers in the tailwind ui site so this one will allow for drop downs which is pretty nice if you have a lot of pages to organize and they do have a free one here that you can use i tried this out on another application and it worked fairly well so here's my example that i was just playing with earlier obviously it's not the most beautiful thing ever but i got rid of the drop downs and just created these without the underline but i decided that the navbar just looked a little bit better for what i was trying to do sorry my computer is kind of slow i'm running everything on a little macbook air so that's one thing i want to get rid of these underlines i'm not a fan of those so let's go over and figure out how to do that so we'll go into our component that we just created header.js scrolling through here we want to find the text so if it's a really long component you can just search for the text so we're looking for dashboard or like team or project or something so dashboard oh interesting it looks like they have it defined in an array here it looks like that array is mapped through down here on line 58 so let's go ahead and try to add no underline and we will also add it here as well no underline so save let's check out the site see if it worked and you can see the underlines go away now we just need to change a few other things you know we need to figure out how to get rid of this old guy maybe change the logo so forth let's take a look at this image here so we can find that over in the code as an svg file right here so this is the first url we can command click or control click this is the first one and then we also have this one as well so it actually appears as just the same logo just for different screen sizes and then there is a third image down here as well oh it's the old guy anyways i'm going to get rid of this image for now as well as these two images you could of course replace them with your own images if you want to go design a logo we actually just get rid of this section altogether let's go back to our app see how it looks and to me that actually looks a lot what oh that's an input i put earlier so we can go delete that we'll just get rid of this here all right there's our application a slight change i want to make to this is shrinking the height of this bar and you can do that with this h16 here defined in the header so this is the height so we'll go ahead and change this to something a little bit smaller such as 14 and you can see it shrink just a tiny bit and then if you wanted to change the background color of your whole application maybe to fit with this a little bit better or you know if later on we want to do a light mode dark mode kind of thing you can go inside of app in here we can define a background gray let's say 300 which will just give us a light gray background and it doesn't fill up the whole page so we basically need to tell it to set the minimum height of the app to the full screen so the way you do that is with min height screen saving this you can see it fills up the entire screen like i said this course isn't about design so yeah it might not be the most beautiful thing on planet earth but it at least makes working and react a little bit funner instead of just staring at text on a white background last thing we will want to check is if it works on mobile so the way you can do that is by opening the developer tools and then going to this button right here that'll put it on a mobile device and took a second to kind of refresh but this is what it'll look like and then you have this button here which will drop down these different pages so if you want you can add a little bit of margin might make it look a little bit better inside of app we can scroll down to where we are rendering the components and inside of here we can just say margin y two and there we go it scooted it down just a little bit let's turn off the mobile preview and see what it looks like and it looks pretty good you might want to change the style a little bit you know maybe make these buttons gray or change this top bar to some shade of purple whatever you might want to do go for it at this point we have the nav bar but functionality is not there the links don't work and we don't really have logic to decide which page is the selected page so that's what we're going to be talking about in the upcoming videos as well as how to do routing so how do we work with different url paths inside of react so stay tuned [Music] you

Channel: Caleb Curry

Views: 17,200

Keywords: react, react tutorial, react tutorial 1, react caleb, javascript react, react course, free react course, learn react, learn react today, useState, tailwind css, tailwindcss, styling with tailwind, array map, array.map, loop through state array, map through state, loop state, navbar in tailwind

Id: 2z0R3bb1nJ0

Length: 9min 1sec (541 seconds)

Published: Sun Sep 04 2022