Now that we have built the sidebar, let's switch to the other side and build the navigation. This should hopefully be a quick one. It looks pretty straightforward. We have a logo and then a list of navigation links. May the only technical challenge is this active, uh, selected items with the little square here on the left. But I think we can have some padding on the left for the whole list and then have negative margins to position this on the left.

for the whole list and then have negative margins to position this on the left where the padding is taking space. So this is our starting point. We're going to start by removing the background color and add the logo. Okay, so let's focus on this header section. And we are going to remove the background color class. And instead of the navigation placeholder, we'll have an anchor tag.

And instead of the navigation placeholder, we'll have an anchor tag. I think this one can go to the homepage. It's pretty common for a site logo to navigate to the home route. And so here I will paste the logo. svg. It's a pretty big one. Uh, and as we've seen before, because we have a viewBox but no dimension, we need to give it some classes. And here I think we can give you the height of level 8.

but no dimension, we need to give it some classes. And here I think we can give you the height of levelEight and let the width figure itself out. Alright, not bad. And if I click on it, I should go to the home route and then I can go back to the appFeed like so. Nice. Next we'll have a decent amount of spacing before the navigationList. You can see here we have 40 pixels. So let me collapse the anchor tag here.

You can see here we have 40 pixels. So let me collapse the anchor tag here and below we're going to have a nav with a class of empty 10 inside of there. We'll have an ol list and let's try something fancy. I will take a screenshot of this and see if copilot, if I paste the screenshot here, can write this list for us. So make an li element for each item in the screenshot.

So make an li element for each item in the screenshot. I'm pretty sure it should be able to do that and it's actually trying to build the thing and make it look the same. But what I want is no, no, just unstyled li items. We are going to do the work copilot. There we go. That's exactly what I wanted. So I'll grab this ul,

That's exactly what I wanted. So I'll grab this ul, although I think I can use this button to plop it in. Yep, like this. Thank you copilot. And this is what it looks like. Not a bad start. So let's turn these li items into a tags because they will be links so I can select all the li items and with Cmd + D multi cursor my way into having anchor links. And let's space the closing tag. There we go.

having anchor links. And let's space the closing tag. There we go. And so I want a little bit more space between each element. So the ul will become a flex flex-col. And let's go with gap of 2, which is definitely my go-to combo for stacked lists. And check it out. This looks pretty nice. Let's add an underlying effect on hover. So again, multi cursor, all of these and add a class of hover:underline

So again, multi cursor, all of these and add a class of hover underline and this is going to start to feel like a real nice navigation. Cool. Alright. And let's do the due diligence to check the gap. So it's 15, so it's actually almost gap-4. So I'll bump the gap to gap-4. Okay, this is looking good, although it looks on the design a little bit closer.

Okay, this is looking good, although it looks on the design a little bit closer. I know it was 15 and not 16. So let me just try. Is 3.5 an option? Yeah it is. And I think that'll look just a little bit nicer. Yeah, I think that's the right amount. So now we are going to add some padding-left to the entire navigation. And the reason we'll do this is to accommodate for the active styles.

And the reason we'll do this is to accommodate for the active styles. And you can see here, let's see how much gap there actually is. I don't know if I'm going to be able to do that. So it looks like there's the space for two of these squares and this square is 7 by 7, so it'll be 14. So again, uh, padding-left 3.5 should do, we don't have to be pixel perfect, but let's try that. So not just the navigation,

to be pixel perfect, but let's try that. So not just the navigation, but the entire header here will have PL 3.5. Okay, so it pushed it off the side a little bit and then we're going to make the notifications item be the active one and maybe we leave a little comment for the team active item. So here we could either have an absolutely position square on the left, so make the li relative and then absolutely position the decorative element.

on the left, so make the ally relative and then absolutely position the decorative element. But that might make the vertical alignment of the square with the text. A bit tricky, actually, maybe not. But typically whenever I wanna vertically align something, my brain goes straight to flex item center. So let's make the ally item a flex container and we are going to offset it to the left with margin-left: 3.5

and we are going to offset it to the left with margin-left: 3.5 to offset the padding-left: 3.5 that should work. And so remember that we have the padding-left: 3.5 up here for the entire header. And so just for the li item, I think we can have a negative ml: 3.5. So that should pull this item to the left. And yep, that's exactly what I was hoping for. And now we can do some mental gymnastics.

And yep, that's exactly what I was hoping for. And now we can do some mental gymnastics to create an element that is going to occupy 3.5, which is 14 pixel of width. But remember we sort of have the space for two squares here. So what I'm thinking is to have one square each should be half of 14 pixel, which is 7, uh, which is the value here, but maybe we can move it to 8. Uh, so an 8 pixel square

but maybe we can move it to eight. Uh, so an eight pixel square and then an eight pixel gap between the square and the text. And that should work just right. So to try to stick to tailwind default values, I'll change the padding-left here to four and so the ml will also be four and we could go with the perfect value, but I like to be lazy when I can and stick to tailwind conventions or like default scales.

but I like to be lazy when I can and stick to tailwind conventions or like default scales. And to be honest, I also think that the offset by four will look just a bit nicer. 3.5 felt a little bit too small. So now I'm going to have a square of w-2 and then a gap of gap-2 as well. And 2 plus 2 should equal to 4 and replace exactly the offsets that we've got here. Check this out, flex gap-2 items-center.

and replace exactly the offsets that we've got here. Check this out, flex gap two items center. And then all we need to have here is a div with a class of size-2 and bg-pixel. And that should be it. And just to make sure that the square never shrinks, let's give it a class of shrink-0 and look at this right on the money. Now I know that you might think, hey, why don't you use a ::before or ::after pseudo element here and you can,

Now I know that you might think, hey, why don't you use a before or after pseudo element here and you can, but I honestly think there's no difference and no problem with having a decorative div here instead of a pseudo element. We have a real element. I very rarely myself use pseudo elements before, after, especially when using tailwind. If you want to, you can probably do it another way, but I think it's completely fine to do it with the flex container like we've done here.

but I think it's completely fine to do it with the flex container like we've done here. Alright, and I think that is our navigation covered. Uh, like I was mentioning when we were exploring the design in one of the first lessons, the navigation here is offset from the left, but we can't really, or we don't really want to do this at the resolution that uh, I have in my recordings, but as the screen gets wider, the way we can handle this is

that uh, I have in my recordings, but as the screen gets wider, the way we can handle this is by just adding some margin-left to the navigation. And so what that would look like is on the head of tag, we would have ml-24, for example, and you can see that it creates this offset from the left. And the main idea with this on larger screens is that the center column feels center aligned in the viewport because the left navigation is narrower. So when it's flushed to the left, the center column sort

port because the left navigation is narrower. So when it's flushed to the left, the center column sort of offsets a little bit to the side. And if you want to be precise, the sidebar has a width of 80 here. And so our header class has a width of 40. So to make it the same width as the right sidebar, we should have ml-40 here. And now that means that the center column is going to be perfectly centered.

And now that means that the center column is going to be perfectly centered. Let me turn on the dev tool for the flex container. So you can see that the main column that way is perfectly centered in the view port, but I do personally think that at this screen resolution, this wastes too much space and the center column becomes too narrow. So what we will likely end up with is have this ml-40 class only applied from the excel.

So what we will likely end up with is have this ML40 class only applied from the Excel breakpoint and up. But with that setup, what's gonna happen is we will cave in on the idea of centering the center column on this resolution size and smaller. But as the users monitors get bigger, you can see if I zoom out, we will then switch to a center aligned main column. But let's not get ahead of ourselves.

to a center aligned main column. But let's not get ahead of ourselves. We are going to do a responsive pass for this app layout later in the course, just like we've done for the signup screen. Let me turn off the flex lines and I think that this is looking really nice and we are now in the really good place to finally tackle the main column, the content feed. Let's do it in the next video.

to finally tackle the main column, the content feed. Let's do it in the next video.