Alrighty, so to make our navigation functional, we're going to start in our HTML. And we're going to add a click event on our menu bars here, or menu bars ID. So we're going to do bracket, click, close bracket equals quotes, and then toggle and brackets again to run the function. And we're also going to copy this into our unordered list element, so that when we click on one of these, the navigation will also disappear. Now we're going to need to go into our TypeScript file, nav menu component Ts and inside of this, we are going To add a toggle function here and we're going to start by targeting our mobile nav so far, mobile nav equals document. get element by ID whoops, get element by ID, and then bracket quotes.

And we're going to target our mobile dash nav ID. Then we're going to make a variable for our menu bars. And that's going to be document, get element by ID bracket quote, and we're going to target our menu bars. And now we're going to use them. So mobile nav, dot class, whoops class list dot toggle. And we're going to toggle this nav expand class that we're going to make on and off.

And we're also going to have our menu bars class list, toggle. And we're going to toggle our change class on and off. Okay, so let's go back and check that out. Okay, so our animation works, but our menu itself doesn't work. That's because we haven't created our nav expand class yet. Essentially what will happen is by default, our mobile nav will be visible, but it will be above the viewport.

So this will be up top here. And then on the nav expand class, it'll bring it down into its current position. So in our CSS, we're going to create a nav expand class. Okay, so we'll just clean this up as well spaced that out. Okay, and let's do, let's do it here. So we're going to create a nav, expand class.

And we're going to copy our top value from our mobile nav, this is what it will be when it's expanded. And then we're going to change this 16 to be 300 so that it is above what's visible. Okay, so let's check that and see if that works. Okay, cool. So it toggles on and off. But instead of appearing Suddenly, I think It would be better if it slid down in from the top as an animation instead of instantly appearing and disappearing.

So to fix that, we're going to add a transition to both of these. So our mobile nav, we're going to add a transition 0.5 seconds ease. And we can copy this into our nav expand, and we'll make it expand a little bit faster. So we're gonna give that point three seconds. All right, so let's check that out now. Okay, awesome.

So it slides down from the top slides back up instead of instantly appearing. That looks a lot better. All right, so I think we're finally finished with our mobile navigation. But when we go back, our desktop Maverick navigation is messed up here. So we can quickly fix that. So at the top of our screen, CSS, we're going to target our menu, dash bars, ID.

And we're going to give that a display none. And we're also going to target our mobile dash Neff. And we're going to give that a display none as well. And then we're going to copy these down into our media query. And we're going to give these both a display initial. Alright, so let's double check that now.

All right, so we have our desktop menu working fine now and if we go back to our mobile so remember when the screens messed up like this Go to responsive and go back. Okay. All right. So our mobile navigation is working perfectly fine. And our desktop navigation is good. All right, perfect.

So I think that we are finished with our navigation finally. And in the next one will actually go on to do the responsive design for our vert, our horizontal, sorry, our horizontal orientation of our phone. All right, I'll see you that one. Bye for now.