React, Redux & Firebase App Tutorial #4 - Navbar Component

Key Takeaways

all right then gang so now we've got all of our components created ready to use the first thing I'd like to do is head on over to the layout and tackle this at navbar component and these two components right here signed in links and signed out links so let's open up this thing right here now because this component is not going to have States then this can just be a functional component instead of a class component so first of all let's just import react right here from react okay so now I'd like to create this function I'll call it navbar and set it equal to this error function now inside here all we need to do is return some kind of JSX template so we'll start that with enough and that will have a class name of nav - wrapper and this is a materialized class and what this is going to do is generate some kind of wrapper for a navigation for us and make it look better on the screen we're also going to color this gray and we're going to darken it by three shades so that means it's going to have a dark gray background not grit grey all right so if we press tab now we should get that enough now inside that will do another div with a class of container again a materialized CSS class and this is just going to contain all the content inside a central column on the page all right so this here is where we're going to have our logo or rather our title in the top left but also our links now what I'd like to do to output this link is import it from react router Dom so let's import that link component right here from react router Dom all right so now we can use that bye-bye and inside here we'll do a link tag so link and it's going to go to equal and it's going to go to forward slash so the home page when someone clicks on this link it redirects them to the home page right and the class name is going to be equal to brand logo again a materialised CS this class just to position this text ok so inside we'll say Mario plant like so and then close this off with the link tag like that now we need to export this down below so we can use it inside a PS because it's gonna be nested all the time inside fjs so let's export default navbar like so alright so now we've created this let's go over to app KS and nest it inside this file over here so I don't need this h1 anymore instead we'll nest the navbar but we need to import it first of all so let's import navbar from and it's dot /to say the current directory then we need to go into the components directory then into the layouts folder and then we want the navbar alright so now we can nest it down here let's say navbar like so and we should see that now on the home page if we go over here to the browser and we don't and I realize the problem here is that I pasted in the wrong CDN link for materialized so if we just take a look at the getting started page the one you actually want is where it says CDN over here so grab this thing and press copy then go over to index dot HTML and where we did this thing previously this is just referring to a local version we didn't download it so let's replace that link with this materialized CDN and save that and then fingers crossed this should work now if we go back to react out that looks better okay so now we have our nav bar at the top and we want to display some links over on the right now remember we have these two different components over here we have signed in links and signed out links and ultimately what we want to do is only show one or the other when they're signed in we show these links and that might have a sign out button in it and also a create project button and then the signed out links for a user when they are signed out of the application they might see something like a login or signup link so let's just create the two things right here for now and show them both and then later on we'll worry about the logic on how to show one or the other so let's just copy this stuff first of all and go to signed in links and I'm just going to paste that in because we're still using a functional component we still need these things right here so let's change this to signed in links over there and we'll change this to signed in links as well now instead of this stuff right here we don't need the navbar again then we'll get rid of that all we want to do really is output a few different links so let's do a ul tag first of all give this a costume of right to float those over to the right and then an Li and inside the alive we want a nav link this time so instead of just a link we'll use nav link because that way we get access to the active class when a certain link is active when we're on that page alright then so let's use the nav link tag this is going to go to and then equal one we'll say forward slash because we don't know the actual URLs and then close that off like so okay so later on we'll come out and we'll fill these things in but for now we're just going to send everything to forward slash so what I'll do is copy this and paste it down a few times and when a user is signed in what links do they want to see well they want to see a new project link because signed-in users can create a new project they want to see a log out link so they can log out the application and then finally they want to see some kind of little thumbnail in the top right to see who they're logged in as this is going to show their initials ultimately so what I'm going to do is give this a few different classes over here just to style it differently so it looks like a little circle almost like an avatar or something like that so the class name is going to be equal to BTN first of all then BTN - floating these are just materialized CSS classes then pink and then finally we'll lighten it by one like so okay so now we have this nerve link and this will ultimately like I say just display the initials will do n and fernette ninja for now so if we save that now I'd like to import this into the navbar and nest it down here so let's go over here and say imports oops not in capitals import signed in links from dot forward slash and then it's in the same directory so just signed in links okay so now let's nest it underneath here we'll say signed in links like so okay so let's save that see if it works and now we get these links over here so we get new project log outs and this was the little circle thing I was talking about where when you're logged in we're going to show the initials of the logged in user over there all right so that's the signed in links let's also do these signed out links now so again what I'm going to do is copy this stuff the signed in links and paste it in here just so we have to change a couple of things now this will be called signed out links and this will be called signed out links and then right here what do we want to show to signed out users well only a couple of things first of all we want to show a link to actually sign up to the application so I'll say sign up and then also a login link because they might already be signed up but they need to login now we don't want to show this circle thing to logged out users because we don't know their initials they're not logged in so let's just save it up that we've exported it so now we can import it into the navbar much like we did with this one over here so let's just duplicate that change this to out and change this to out and then let's nest this down here signed out links like so and we should see those now in the browser as well okay so we see them all at the minute and like I said later on we'll add in the logic so the only one set of links is shown either these ones or these ones dependent on the user authentication status but for now that's fine we've created the navbar it's the first step and in the next video we're going to go on to create the dashboard components