All righty, now we're ready to make our navigation only appear when we hover over the left side of the page. This is going to be accomplished by adding some JavaScript. But first, we're going to start with our HTML. We're going to start by making a p element inside of our sidebar container. And we're going to give it a class of sidebar. Toggle.

This is going to act as a sidebar toggle. We're also going to give it that same ID. And inside we're just going to write menu. You could put a Font Awesome icon in here if you want it. It's just something to get the user's attention so that they go up and hover towards it. Next, we're going to be adding a desktop dash now class to our sidebar items as well as a display dash none.

So this is going to automatically hide our navigation when the page loads. And then when we use our functions, it will both hide and show it as we hover in and out. Speaking of that, we're going to need to target our sidebar container, because this is what's containing everything. And this is where we're going to have the functions. So we're going to start with bracket, mouse over equals. And then we're going to name our functions sidebar on and then we're going to have brackets again to show the where running the function.

And then when we go out of it. When we hover out, we're going to trigger through this mouse out event. And we're going to give this a sidebar, off function. Have some brackets there. All right, so now we're finished with the HTML Now we can move on to our CSS. So cool.

Other thing we can do here, actually, before we move on is you can actually split the editor. So you can have multiple windows. And we can actually do something with this too, we can activate word wrap, toggle word wrap, so that it kind of makes everything visible on the page, even though it kind of screws up the spacing. But that's good in this case, because we're kind of zoomed in. And now we can see both things at the same time. All right, cool.

So we are going to at the very top, we're going to start entering some stuff here. So we're gonna start by adding our desktop dash nav class, and we're gonna give that a display, initial and we're going to target our display none class. And as you might have guessed, we're going to give that a display none. All right, next, we're going to be targeting our sidebar container. So that's the parent of the items. That's why I'm putting it above it sidebar dash container.

And we're going to give this a position fix, because we don't want it to move, it'll always be there. We're going to give it a display of initial. And we're going to give it a height of 100 Vh make it the whole height for now. And we'll give it a width of, say 350 pixels, and z index 10 because we want it to be at the same height as our sidebar items. And the last thing we're going to do is we're going to temporarily give it a background color of Dodger blue Why not? Just so that we can see See it as we're working on it.

In the final version, we're going to remove that all together. And moving on, we're going to target our sidebar dash toggle class, and we're going to give this a font size of two REM and we're going to copy the font family from our list. And we're going to give it a color white and a background color RGBA so it shows the ones we've used previously, and we're gonna use that one. So point five oh pasty on black and we're gonna give it a width of 112 pixels and margin 40 pixels, padding 10 pixels. So these two values can be changed. This is just what I worked out in my own version.

Alright, so let's check that out. Alright, so we have our menu here. Nothing's happening right now, because we haven't actually written our JavaScript, that's what's gonna make it actually work. Alright, so let's go back and do that. So we're gonna need to open up our TypeScript file. So this is our Ts file here.

That we're going to start by making our sidebar on function first. So oops, sidebar on bracket and we're going to start off by making a Variable now equals document dot get element by ID second choice there. And then we're going to, I guess we missed, I guess we need to give this an ID of desktop map as well. Let's do that now desktop nav, so we can target it more easily. Okay, so we're gonna target that desktop dash nav. Make this a little bit bigger.

Okay, and we're also going to have a variable toggle, and similar thing document. dot get element by ID. And we're going to be targeting our sidebar dash toggle ID. And now we're going to do something with these variables. You can see See that they're kind of grayed out because we're not using them. So we're going to do nav, dot class list and remove.

Display dash none. So if you remember, we added that display none. And so when we have the sidebar on, it's removing that class from this element. And similarly, we're going to toggle the class list. Sorry, we're going to the toggle is directed at our toggle. And we're going to add the class list.

Display none as well. So we are going to be removing the display none showing the navigation and we're going to be adding a display On to the toggle itself. So then that will hide the toggle but show the menu. And all right, we can check that out. Okay, cool. So you can see that it works, but only once.

Because as we're hovering out, we don't have our sidebar off function so it's not turning it off. All right, so let's add that function. So we can actually copy and paste this, and we're going to be changing it around a little bit. So we're gonna go down here and we're going to have our sidebar off function. Paste that inside. And what we're going to do is we're going to just do the opposite.

So we're gonna put the ad up here and we're gonna put the Remove Down here. Okay, let's see if that works. Alright, so we have the blue here, as we enter into the blue, we can see that we have our menu here. And as we exit the blue, it goes away. All right, very cool. So, one last thing we can do is we're going to remove the background color.

Now that we can see that it works. And we're also going to make the height smaller, just in case you have content in this part of the page. Instead of having a height of 100 viewport, we're gonna change it to 30. All right, and you know what the other thing I think we can do, we can do a text transform and make this menu, capital letters. Okay, so let's do those couple things. Alright, so we can make this bigger now.

All right, so our sidebar toggle, we're gonna add a Text transform here text transform uppercase. All right, cool. And we can we'll just comment this out for now. And we'll change the height as I said to 30. And All right, let's check that out. Okay, so we've got our color gone here.

Let's see how far so we can go here without triggering it. And once we get up to 30 triggers, all right, very cool. So we have a nice little hover over to and then before you get there, it launches the menu, so you don't even have to click to launch the menu. I think it's a pretty cool idea. And you can see it's not overly complicated. Alright, so that's it.

We're done our desktop navigation. And now we're going to move on to the rest of the sections. Starting with the about section. All right, I'll see you that one. Bye for now.