Alrighty, so before we get to the navigation itself, we're going to need to modify our sections so that we can see and differentiate between them. Okay, so to start off, we're going to minimize our home section work. So it's easier to kind of just picture everything else. And the next thing we're going to do is we're going to set some CSS for all of these section elements that are shared between them. And because these are shared elements, I like to add them at the very top because they don't really fit into any one section. So we're going to target our section element and we're going to start by giving it a min height of 100 viewport because we want it to at least take up the full screen.

Then we're going to give it a height of auto in case it needs some extra space. And lastly, we're going to give it a position of relative So that it floats on top of our video background. Okay, the next thing we're going to do is we're going to give each of the IDs for each section, a background color, so it'll be easier to actually see which section we're in. So I'm just gonna fast forward to this. Choosing random colors. And lastly, for the footer, I am going to set a background color.

But then I'm also going to have a min height on set so that it doesn't need to be 100 viewport height. And I'm also going to explicitly call the height here and it's going to be 150 pixels. All right, so let's check that out. Okay, you can see we have our blue, or orange or purple, and our black is much shorter than the rest. All right, so now we can see and differentiate between everything. Next, we're going to go back and we're going to create a components folder.

That's the first thing we're going to do, we're going to create it inside of our apps folder, we're gonna create a components folder. And the next thing we're going to do is we're actually going to CD into this folder in order to use our Angular CLI to create our nav menu component. Okay, so let's fire up the terminal. And we're going to go to a new one. And so we're going to CD SRC slash apps slash, come home components, Enter. And you can see that we have our path correct here.

Minimize that a little bit. All right. And now we're going to use the angular COI. So we're going to do mg generate component. And if we wanted to make a short version for this, we can just do n G, G, C for generate component, and then we just type in the name of the component we want to generate. Okay, so you can see that that created an HTML file, a TypeScript file and a CSS file, and it also updated our app module.

So remember how we had to import our Font Awesome module, we would have to have this component as a declaration. But this is done automatically for us with the Angular CLI. Alright, very cool. So now we can actually start in our HTML. So we're going to minimize this terminal here and we're going to go into our components and We're going to start with the HTML. So we're going to get rid of this.

And you know what, let's open this while we're at it, and then we can minimize this. So we have our HTML here. The very first thing we're going to do is we're going to create a div, dot sidebar, sidebar dash container. So this is going to hold our desktop version. And then inside of that, we're going to create an unordered list with the class sidebar dash items. And then inside of that, we're going to have four elements.

And inside of that, we're going to have our list elements. And so each of these is going to link to the corresponding section that we're looking for. So So the first one will be home. And we can copy this a couple more times. So about projects and contact, we don't really need one for our footer. And in the list here, we can type it out.

So home about projects and contact. All right, so before we continue, let's go back to our app component because we need to actually make sure that we have an element that's going to represent our nav component. So we're going to add that just below the wrapper here. And we're going to add app dash nav menu, so automatically, the angular CLA appends app dash and then whatever the name of your component is, in our case, case it was nav dash menu. Alright, so now on to the CSS for our nav menu, we're going to start by targeting our sidebar items class. And we're going to be giving this a position, fixed NDC index of 10.

This is going to set where it is on the stack. So by default everything is at one. So 10 is higher than one so it should be on top of everything. And next we're going to give a list style of none. So because we have a bulleted list, by default, we're going to get rid of the bullets. And we're going to make the font a little bit bigger and we're going to give it a font size of three Ram.

Next, we're gonna want to remove the underline, that's going to happen on any navigational link. And so for that, we're going to go back and we're going to have a shared. Here we're going to have the elements and list elements. And we're going to have a shared for both of them. And that's just going to be a text. decoration of none.

So we're going to get rid of the underline blue purple that you would see by default on any links. And All right, next, we're going to actually target the list inside of our sidebar items. div. So we're gonna do that. And we're going to want our text to be uppercase. So we're going to do text transform uppercase at the bottom here.

We're going to give it a font family. The one that I usually use is say go I said goalie, I don't know how to say it UI and comma song Sarah, because that's a built in Windows font. At sunset, we'll cover the Mac. So we're going to give it a cursor of pointer, that autocompletes for us. And we're going to give it some padding. So two pixels, 14 pixels and five pixels.

So this is for top. And this is going to represent both left and right because we didn't finish it off with the fourth one and then this is going to be for the bottom. And next we're going to add a margin bottom of 20 pixels. So we want these to be spaced from each other. And we're gonna have a color white. And we're going to set a background color.

And again, we're going to use something with some opacity. So we're going to have our RGB a. And again, we're going to use black. And again, we're going to use point five, so 50% opacity. And the very last thing we're going to do is we're going to add a hover similar to what we did last time. So sidebar dash items, list, and then a pseudo class hover.

And we're going to flip the background color and the color like we did before. So we're gonna make this darker color. And this time, we're gonna make it a little darker. So we're gonna make that point eight, five instead of point five. And we're going to have a background color of fBf bfb, which is like an off white, not quite white, but yeah, and last thing, we're gonna throw There is a transition point three seconds. So that will make switching between them.

A little bit of a delay point three seconds. That is. Alright, so let's check that out. See how that looks. Okay, so all right, that's looking Alright, but we have some problems here. I mean, overall looks pretty good.

Let's see if it actually functions though. That's kind of important. Okay, so it's functional. It looks like we might have had that shared class in the wrong place for the text decoration. So this is what I was talking about with the ugly underlines. Let's go back and let's actually copy this and we'll throw this top here.

Okay, and let's go back and check that now. Okay, that's looking a lot better. So now there's no text decoration. And it's working perfectly. All right, great. So this is also showing off Smooth scroll that we added on our index dot HTML.

Alright, awesome. So in the next step, we're going to actually add the toggle and the hover functionality. So we're going to have a little text box that says menu. And then every time we hover over close enough, it will show our navigation and then when we hover out of it, it's going to get rid of it. Alright, so I'll see you in that one. Bye for now.