- Read Tutorial
- Watch Guide Video
So first thing we need to do is go into our code and fix the header style. So let's go to headernavbar.scss. And if you remember we have the image and then we have the links okay, so we have two grids in there. Let's go to the code and in the header and image, well let's say &__links, we don't really need to use the image one yet at least.
And then what we need to do is say display grid and then we want to say grid template rows is 1fr and grid template columns is 1fr 1fr. And then this one is going to be Links start to links end, then this one is just going to be image end and image start. And then I guess you can use image and then we can just say grid column is image start to image end and grid row is 1/-1 and then we'll copy that for links except you'll say links, okay so get that in, I'll give you a second.
headernavbar.scss
.header {
grid-row: header-s/header-e;
grid-column: 1/-1;
display: grid;
justify-content: center;
grid-template-rows: 1fr;
grid-template-columns: [img-s] 1fr [img-e links-s] 1fr [links-e];
&__img {
grid-column: img-s/img-e;
grid-row: 1/-1;
}
&__links {
grid-column: links-s/links-e;
grid-row: 1/-1;
}
}
All right, all right, all right, all right. You're probably good now and then what we've got to do now is that will probably be it, let's go check it out.
Looks a little bit better, except for now this image is all the way over here to the left. But at least we can see this yoooYOOO. Okay, so all we have to do is go into our code and let's say justify items is center instead of content. Okay that kind of fixed it, but not quite.
So what I want to do is I want to, now there's a number of ways we can do this. We can say this image is justify items to the right. Like just self is right or whatever it is, and then we can translate it over 25pixels or what we can do is here let's do this, let's inspect this so you can see what I'm trying to say.
Let's go to the header here, where is that junk, here we got header. Okay, so if we do end you'll notice that it will go, I can't point at the screen I don't want to move this or the lines will disappear. But you see that line at the very top in the middle there, right here.
If we do justify items and the image will go all the way over to the end there, except we're going to have to translate it over 25 pixels to be directly in the center. And then we have to do the same thing with the links here, well the links wouldn't matter because we want it to end right there. So that's probably a good approach, I know there's other ways of doing it but this is just as good.
So what we can do is say justify items end then now look what I'm saying, we'll have to translate it over 25 pixels see it needs to go over 25 pixels.
So what we need to do is we need to go into our code and we just need to say on the image transform translateX 25pixels.
headernavbar.scss
.header {
grid-row: header-s/header-e;
grid-column: 1/-1;
display: grid;
justify-items: end;
grid-template-rows: 1fr;
grid-template-columns: [img-s] 1fr [img-e links-s] 1fr [links-e];
&__img {
transform: translateX(25px);
grid-column: img-s/img-e;
grid-row: 1/-1;
}
Okay, it looks like we didn't give it a class name that's why. Let's say className is equal to header image.
header.js
return ( <div className='header'> <img className='header__img' src='http://via.placeholder.com/50x50'/> <div className='header__links'>
You see it's right in the center now because we've translated it over.
Now what we need to do is center this yoooYOOO. So let's go into our code and let's just say align items is center.
headernavbar.scss
.header {
grid-row: header-s/header-e;
grid-column: 1/-1;
display: grid;
justify-items: end;
align-items: center;
grid-template-rows: 1fr;
grid-template-columns: [img-s] 1fr [img-e links-s] 1fr [links-e];
Now the image is already centered well it's not centered but it's the height of the entire thing so doesn't really matter, but it's centered for sure now.
Now what we need to do is style this and put the grid on for this. So let's get the grid in for this and then we'll put in the additional styles to make them fancy looking. So let's go into our headernavbar.scss and let's just say display is grid, and let's try that for now and see what happens to just display's grid.
headernavbar.scss
.navbar {
grid-row: navbar-s/navbar-e;
grid-column: 1/-1;
background-color: #333;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
display: grid;
}
Okay, it does that.
So what we want to do is we want to say grid template rows is 1fr, okay so there's only one and we'll say start to end and then we'll grab all the items and say they belong on the same row okay, so grid row is start to end that will put every item, every link in the navbar on the same row.
headernavbar.scss
.navbar {
grid-row: navbar-s/navbar-e;
grid-column: 1/-1;
background-color: #333;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
display: grid;
grid-template-rows: [s] 1fr [e];
& > * {
grid-row: s/e;
}
}
Now what we need to do is center them on the y axis, so let's use align items for that. Now what we need to do is center them over here, so let's say justify content is center.
justify-content: center;
So what we want to do is go to our application, you'll see it's now centered okay the content is centered.
So what we need to do is we need to try space around and see if that put's a little bit of space around it. So let's say space around instead of center, and you'll see it puts space around it.
I'm just trying these out, just out of curiosity. Space between will probably put it over here and over here.
What we want to do is we just want to do center even though that puts them right next to each other. And then we'll say grid-column-gap, right we'll put a grid column gap in between these for however much it says in the design. So we need about 40 pixels, so let's go to our code and say the grid-column-gap is 40 pixels.
headernavbar.scss
.navbar {
grid-row: navbar-s/navbar-e;
grid-column: 1/-1;
background-color: #333;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
display: grid;
grid-template-rows: [s] 1fr [e];
align-items: center;
justify-content: center;
grid-column-gap: 40px;
& > * {
grid-row: s/e;
}
}
Okay cool, let's try that out and you'll see that looks good.
Okay, so what we need to do now is let's see if there's a gap on this one in between shop and logout, I'm sure there is, all right, so 47 pixels so let's go to our code. I'm going to go up here to links and let's say display is grid, and we'll just copy all of this and put it on links as well.
And just note that I'm putting in the links not straight in the header, because we got the image and then we got the links. Okay now the one thing I want to get rid of is align items and justify content. So we just have display grid, we've got the gap, let's change the gap to 47 pixels and then we've got them all in the same row. So these lines right here these six lines seven mines counting the space.
headernavbar.scss
&__links {
grid-column: 1/-1;
grid-row: links-s/links-e;
display: grid;
grid-template-rows: [s] 1fr [e];
grid-column-gap: 47px;
& > * {
grid-row: s/e;
}
}
OK let's try this out, all right it looks good to me.
Now what we need to do is give it a little margin on the right there because it's obviously too close to the edge, it looks like it's 49 pixels, so all we need to do is go to our code and just say that the links has a margin right of 47 pixels.
headernavbar.scss
&__links {
grid-column: 1/-1;
grid-row: links-s/links-e;
display: grid;
grid-template-rows: [s] 1fr [e];
grid-column-gap: 47px;
& > * {
grid-row: s/e;
}
margin-right: 47px;
}
Okay that looks good.
All right, now what we need to do is we need to basically style these to look correct. So I'm going to get these styles right here. All right, so it looks like all we have is a color of E6 and a font size of 18 pixels. So I'm going to go into the code and on the links in the headernavbar we just want to say color is #E6E6E6 and then what we want to do is we want to say font size is 18 pixels.
headernavbar.scss
&__links {
grid-column: 1/-1;
grid-row: links-s/links-e;
display: grid;
grid-template-rows: [s] 1fr [e];
grid-column-gap: 47px;
color: #E6E6E6;
font-size: 18px;
So I just added these two lines, these two lines are going to get us this effect right here, okay it looks good.
Now what we need to do is we need to give it a normal font weight because it looks bold to me. So let's say that the font weight is normal, I don't know if that will affect it, it looks the same to me, maybe it has a different font, nope it's open Sans.
Alright so all we need to do is provide a case for the green and then give it this green color #00CB79. So let's go in here and let's go into our code and let's say .navbar__green and we'll say, or better yet what we can do is we can just say .green-text and we can say color is #00CB79, yeah and then we'll mark it as important just so we can be sure that it's applying.
headernavbar.scss
.green-text {
color: #00CB79 !important;
}
Okay now what we need to do is we need to go to navbar.js and we need to say okay in navbar link let's put some brackets around this, and we'll say hey if link.active, the only problem with this is, yeah okay we'll say, link.active is true then we will put green text, if not we will put nothing.
navbar.js
<a className={`navbar__link ${link.active ? 'green-text' : ''}`} key={index} onClick={() => console.log('trying to switch tab')}> {link.title} </a>
Okay so that should be good, we need to add this active thing to our model though. So let's go into our reducer here our headernavbarReducer.js and lets say on each of these or on navbarLinks we have an active property on these as well okay. And we'll hard code these in for now, as we're getting the styles and stuff in. So we have active is false and active is true and you'll see that the first one is green and this one is not green.
Now we'll have to implement the functionality which is something we'll do after this video. Before we end this video let's get in the styles for these other buttons these top ones on the right here. Okay so it looks like we've got a color of #333 and a font size of 16. So let's go into vs code and let's go into headernavbar.scss and on the header we'll say that the links have a color of #333 and a font size of 16 pixels.
headernavbar.scss
&__links {
grid-column: 1/-1;
grid-row: links-s/links-e;
display: grid;
grid-template-rows: [s] 1fr [e];
grid-column-gap: 47px;
color: #333;
font-size: 16px;
All right so let's go and try it out and it looks good to me.
Let's inspect the element and see if clicking works, looks like it lets okay cool. So what we need to do now is we just need to implement the functionality for this and display it on the correct pages because we don't want account and purchases to be on this page and we want this to be different, right? We want to be able to modify this.
So we'll get rid of the dummy data we put in there and then we'll develop some actions to basically change this data whenever we want depending on the component we're in. That way it will automatically update these tab's and we'll have a really nice reusable component. Okay, so let's go ahead and commit our code.
Terminal
git status git add . git commit -m "styled header and navbar components"
I'll see in the next video where we will take care of that functionality.