Right here you can see what the final version is eventually gonna look like, we're not gonna get it to this point in this video but we will in a pretty short period of time.

The very first thing that I wanna set in place is the architecture. So this is something that I'm not gonna spend a ton of time discussing because I have entire courses on SCSS and how to use Flexbox and Grid and different things like that, and I want this course to really focus primarily on React and so I don't wanna spend a ton of time on the styles.

But one thing I will say is that what, the very first that I do whenever I'm told I need to go implement some type of front-end is I first try to decide on the structure of the system I'm trying to put in place. So if I'm asked to build this nav-bar, the very first thing I notice is that we have all of these left-hand side links and then on the right-hand side we have another set of items.

And so this is something that I want to be able to build, and we have some nice tools that allow us to do that like Flexbox, so that is what we're going to implement in this guide. I wanna have all of the links on the left-hand side and then the name on the right-hand side. So let's see exactly how we can do that.

Right now, obviously we do not have anything that even remotely looks like that. But we are gonna be able to do it with not too much trouble. So I'm first going to create a new file here inside of style I'm going to create one, and let's just call it navigation.scss and then make sure that you import this into main.scss.

So I'm going to say import and the same exact structure, so inside of quotation marks, I'm gonna say ./ and then just navigation.scss and finish off with a colon.

@import "./navigation.scss";

So this is all you need to do and it'll bring in all of the styles we added here or we will add inside of our navigation style set.

Now let's open up the navigation-container.js and this is where we're going to add our classes. So the first thing I'm gonna do is I'm gonna create a nav wrapper, so this entire component here is going to be wrapped up in a single class, and this is gonna be our flex container. So let's give this a div, and the class of nav wrapper.

Now, when you're working with React, you cannot just type out class equals and then whatever the name of the class is. And the reason for that is because class is a reserved word, as you may have noticed up here in JavaScript, we have a keyword called class. So you can't call it class, it actually has to be className, and the N has to be capitalized.

So once we do that, we can say nav- and what were we gonna call it, wrapper? Hit save and let's just go make sure that this works.

<div className="nav-wrapper">

So if you open up Google Chrome and right-click, just right around this title, and click inspect, and now make sure you have plenty of room, and let's go and see, and yes we do.

So right here, you can see we have a div called nav wrapper, and it changed it so it's actually called class. So remember this is JSX code and it will get rendered out as HTML code. So we have our nav wrapper there in play so now we can start adding some of our other elements.

So we know that those items, those links on the left, we do want those to actually stay on the left, and then we want the name on the right-hand side. And so we're gonna bring in where it says Jordan Hudgens, and yours will say your name, and we're gonna bring that into this navigation component container.

But for the first step we need to do, we need to add another div that is going to wrap up each one of these nav links. So I'm gonna say div className equals and I'm just gonna say left dash side and that's gonna be the class name.

<div className="left-side">

And then at the very end right where it says Add Blog make sure you close off that div. And just to test this out, let's also add another div here, and we'll call this div and with a className of right-side and here just put your name.

So I'm gonna put JORDAN HUDGENS, all in caps. And then close out that div, hit save, and now we can go check and see what it looks like. You can see that now our whole nav wrapper is contained right here, we'll eventually remove and kind of reorganize what's above it, but for right now this has all of our code.

And if I right click and click inspect you will see that we have this left side div and then we have the right side div right next to it.

So now with that in place, we can finally implement and test out Flexbox. So inside of navigation.scss, type out nav-wrapper and then type out display flex, and then because if you look at the final design, what we're looking for is to have that group on the left-hand side and then the name on the right-hand side.

And however wide the browser window is we want that to be empty space right here. So what I am going to do is use justify-content and then space-between, and for right now that should be all we need.

navigation.scss

.nav-wrapper {
    display: flex;
    justify-content: space-between;
}

And so now if I come here, you can see that that worked perfectly. So we now have all of our links on the left-hand side, we have the name on the right-hand side. And let's just, for good measure, let's add some padding all the way around. So I'm gonna say padding is 30 pixels, hit save, and now you can see this looks much better.

navigation.scss

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 30px;
}

So that is the initial structure that we need in order to get us closer to the design. In the next guide, we're gonna start styling these links.

Resources

• Source Code