Let's go ahead and build the sidebar, but just before we do, I wanna show a little flow that we've got with our three column layout. Uh, so I'm going to expose that flow and we're gonna fix it and then build the sidebar. Okay. All is looking well in our three column layout. We have the navigation and sidebar that have width that are respected thanks to the shrink-0 classes. But if you think about it, we haven't set any width.

to the shrink zero classes. But if you think about it, we haven't set any width to the main column and the reason it's using all the rest of the space is there is enough text to fill that space. But if I was to go in the main content here and I was to remove all the paragraphs, they are a lot except the last one. And then we made the last one much shorter like this. Take a look at what happens. Oh, oh, our three column layout looks broken

Take a look at what happens. Oh, oh, our three column layout looks broken because it's not occupying the whole viewport real estate. And so where we've set setWidth here that don't shrink, we need to tell the middle column explicitly to use as much space as available even if there's not sufficient contents to feed it all. And for that we can use the opposite of the shrink class, which is the grow class. And so we're going to tell this element to flexGrow.

which is the grow class. And so we're going to tell this element to flex-grow. In other words, take as much space as it possibly can. And so with that, even if we have a short paragraph of text, the main column is going to occupy everything minus the space for the navigation and sidebar who have explicitly asked to not be shrunk because there will be a lot of content in the main column. The likelihood of that bug where we don't use the whole width was pretty minimal

The likelihood of that bug where we don't use the whole width was pretty minimal anyway, but I think it's still a good thing to fix it and explicitly say that the main column should grow as much as it can. Alright, now let's go build the sidebar. Okay, here we are in the Figma prototype, but for this I will switch to the Figma design actually. So we can zoom in on the sidebar and see what we've got. So we have a search form which is going

So we can zoom in on the sidebar and see what we've got. So we have a search form which is going to be an input field, and then we have one container here with artists to follow. And then another container with the same styles for topics or idea streams to follow. I am just building the HTML here, so I'm trying to avoid thinking in components, but my mind is already thinking of all sorts of possible reasonable components here.

but my mind is already thinking of all sorts of possible reasonable components here. But let's take it one by one. So we'll start with the search bar. Okay, so in our sidebar I'll remove the placeholder sidebar and instead we'll have an input and the placeholder will say search an ID or pixel. Alright, so two problems here. The first is the input is not wide enough and we want to remove this background color now.

The first is the input is not wide enough and we want to remove this background color now. So let's remove the background color and we're going to give our input a width of full so it uses the whole sidebar. Nice, much better. Next, this is not in the design, but as you can see when I focus, we have the default outline style. Uh, in my Mac os I have the pink color theme, so that's why it's pink.

Uh, in my Mac OS I have the pink color theme, so that's why it's pink. But I think we should have custom focus style that match our design. At least use the pixel color for that. So I could here go focus outline pixel and yeah, just that change is much nicer but I don't want to have to do this for every focusable element. So what I'll do instead, I'll remove that class here.

for every focusable element. So what I'll do instead, I'll remove that class here and in the CSS file styles that CSS in the base layer here before the font phase declaration, I will target any elements that is focus. And actually even better, I will target the focus-visible state and exactly like copilot suggests, except uh, I don't want the offset, but I will set the outline to be 2px solid of the pixel color. So focus-visible will only trigger

to be two pixel solid of the pixel color. So focus-visible will only trigger when an element is focused with the keyboard navigation instead of the mouse. So for example, if you click on a button with the mouse, we won't have this outline, but if some person that uses the keyboard more tabs into the button will have the focus-visible styles. So I think this is a little bit nicer.

the focus visible styles. So I think this is a little bit nicer than just focus styles. Okay. And so with that in place, we should have any element on the whole project covered. So here I have removed the focus styles on the input, but as I tap in we should have the nice two pixel pixel color outline. All right, on the design there is this bottom edge here. I don't know if it's the border bottom of the input.

All right, on the design there is this bottom edge here. I don't know if it's the border-bottom of the input or if it's a divider, but I think we can set this as the border-bottom of the input. So let's try that. border B and then border-pixel. We're going to use the light class here at, I'm not sure how much, 50%, it might be 20%. Let's take a look. Yeah, this is definitely too strong. So let's inspect the design.

Let's take a look. Yeah, this is definitely too strong. So let's inspect the design. Oh, and actually you can see the input is here and then there is a separator that could be an hr tag. So we should probably do this, but let's look at the color. And so it's uh, pixel light color, but it's at 10% opacity only. Alright, so I'll remove the border B here and instead I will have an hr tag here. And here I will give the color.

and instead I will have an horizontal rule tag here. And here I will give the color of border pixel light at 10. Alright, that looks much nicer. Alright, yeah, that looks much closer. Let's add a bit of separation. So empty two maybe that might be a bit too much. And you know what? I actually think that works pretty good. So now a User can come and search for design. Yeah, I think that works nice. All right, let's keep going.

So now a User can come and search for design. Yeah, I think that works nice. All right, let's keep going. So next we have this artist to follow box. There is some spacing on top. Looks like there's 40 pixels, so that would be empty 10. So here let's have a div with a class of empty 10 and it's going to have a border and the color will be border pixel light at 10% exactly like the HR right above we are going to have some internal padding.

light at 10% exactly like the HR right above we are going to have some internal padding. You can see 16 approximately all around. So we're gonna go with p-4. Alright, and here's our boarded box. So h2 artists to follow. And this is going to be pixel light at 60% opacity and the font size is 14. So text-sm. So class text-sm text-pixel

So text sm. So class text sm text pixel light 60%. Okay, nice. I feel like this text here is also text sm. Yep, it is. So let's update the inputs to also use text sm just so it's more consistent here. Nice. And so now let's have a list of artists to actually follow. So for each we are going to have an avatar, a handle, and then a follow button.

So for each we are going to have an avatar, a handle, and then a follow button. So once again I will reach in my magic little folder off screen and place a few avatar pictures in our public directory. So here in public/images I will drag across a few images that I'll drop here and that's gonna get us covered for the next few lessons. Alright, so we want a list of artists and I'm gonna call this an ordered list.

Alright, so we want a list of artists and I'm gonna call this an ordered list. Even if we don't see the number, it's actually in the specific order for a specific reason in the backend I imagine. And so we'll make this a flex flex gap 2 container. And so each artist will be its own li item. So we'll have an image, then we'll have a paragraph tag for some text.

So we'll have an image, then we'll have a <p> tag for some text. And then we'll have this time a button because I believe it's an action to perform to follow that person. And so it will start with Alessia. So the image source will be /images/alessia.jpg, the alt can be avatar of Alessia, yes, <p> tag will have the handle which is AlessiaDraws and the button will say, I think Follow.

PT tag will have the handle which is Alessia and the button will say, I think follow. Is that what it says? Yep, it is. So let's take a look at the UI without any classes applied. So we obviously need to flex in line these elements and add a little bit of margin-top to the ol element. So for the margin-top we'll have uh, 16, so mt-4. And then for the flex setup, I imagine these two elements left aligned and the button right aligned.

these two elements left aligned and the button right aligned. So we are gonna have a space between separator here and we'll probably have to uh, truncate that name because if it's too long it's going to clash against the button. So a flex container and then inside another flex container for these two. Let's do that. So on the ol element, I'll go empty four and here I like I mentioned will be flex

Let's do that. So on the ol element, I'll go gap 4 and here I like I mentioned will be flex and then vertically items-center and then horizontally justify-between. And we'll probably want a gap of 4 at least to create some separation. Alright? But like I said, we then want to group the image and the paragraph in another flex container. And this one will also have gap, maybe 2.

flex container. And this one will also have gap, maybe two and items center to center align the image and the handle. So this should already look pretty good right now and yet it does. But like I was saying, you can see the handle sort of going over the follow button. And this is why we are going to one tation. Also, I might make the sidebar slightly bigger.

And this is why we are going to one tation. Also, I might make the sidebar slightly bigger. Maybe let's go update it to w-80. Yeah, just so we got a little bit more space to work with. So the avatar is too big and maybe the gap here is too small. Again, I'm mostly eyeballing, but we can see here there's a gap of 10 which is 2.5. But more importantly I think the image here is 30 by 30, which is what size 8 or a little bit smaller.

But more importantly I think the image here is 30 by 30, which is what size eight or a little bit smaller. And I think that here right now our image is much bigger than that. Yeah, it's double. So we are going to go in the image and add a class of size eight and just in case an image wasn't square, all my images are square here, but if they were not, we want to set object-fit cover so it gets scrapped to a square without distortion.

but if they were not, we want to set object-fit cover so it gets scrapped to a square without distortion. Okay, so now the text looks way too big or the image way too small. I know the text is too big and let me go to a hundred percent zoom level. So yeah, the image size is correct, but we need the text here smaller to match the text-sm. So here class equals text-sm. And remember we wanted to increase the gap to 2.5.

So here class equals text-sm. And remember we wanted to increase the gap to 2.5. All right, this is starting to look really nice. So next we can tackle the button here. So this button reminds me quite a lot of these buttons, so we might use them as a starting point. So I'll go in the index.html and find one of these secondary button there's one. And so I'll replace the placeholder button here. I will turn the anchor tag into a button, remove the hre,

And so I'll replace the placeholder button here. I will turn the <a> tag into a button, remove the href, and it looks like we need a closing button tag and the text should say Follow. And yeah, it's not a bad start and we are gonna have the harvest styles also, but the text needs to be smaller here. So I will go text-sm, and you can already imagine how a button component could be born at some point in this.

and you can already imagine how a button component could be born at some point in this project and it would have multiple sizes variants. Just picturing things in my head here. All right, this is looking pretty good to me and you can see that works. But let's say that Alessia had a much longer handle Alessia draws stuff and you can see that now we are entering a world of pain. Uh, and this is why we need the truncation to happen

and you can see that now we are entering a world of pain. Uh, and this is why we need the truncation to happen on the text element here. So Tailwind has a nifty truncate class. If the name is too long, it's going to be truncated. And on that note you can see that it truncates on the underscore. So there might be a case here for making the tation inside Laravel instead, uh, to have a bit more control on where the ellipsis comes here.

inside Laravel instead, uh, to have a bit more control on where the ellipsis comes here. It's literally going to go dot, dot, dot as soon as it runs out of space. But if it's done in Laravel, you can decide to do the truncation word per word or different options. So I'll let the team decide of that. But for now I'll use just the truncation with CSS to get us going. So let's go back to Alessia draws, which is her real handle.

with CSS to get us going. So let's go back to Alessia draws, which is her real handle. And that's looking pretty nice. I will now duplicate this a couple of times. So the entire li element, I will copy and paste 1, 2, 3 more times just so we can experiment with the spacing and then different length of text and see if the buttons are behaving accordingly. So we're going to add just Ann, Mr. Anderson and Michael just to test it out.

So we're going to add just Ann, Mr. Anderson and Michael just to test it out. And since I've got all these pictures in my public directory that's looking really neat. I think the gap between each element is maybe a little bit too small and I somehow feel like the buttons are also a bit too big, specifically vertically. So let's look at the design and yeah, so the gap here is probably 16, so it's gap of 4 actually.

and yeah, so the gap here is probably 16, so it's gap of four actually. And I feel like the padding here is smaller than on the main buttons. Yeah, it's eight and four so, so px-2 and py-1. So on the button here while I have the numbers in my head, I'll go px-2 and py-1. And the gap between each element of the ordered list up here was not two but four. All right, so that is looking much better,

of the ordered list up here was not two but four. All right, so that is looking much better, but I've only changed one button. I will go update the three buttons. But when we deliver the HTML for the team to build, I might only keep one of these because it just adds a lot of repetitive markup that they're anyway going to put inside a loop of some sort. So I'll copy the fourth button here and look at this. I don't know about you, but I think

So I'll copy the fourth button here and look at this. I don't know about you, but I think that this follow table is looking really, really nice. Alright, so our box is missing one more thing and it's this show more button. And actually think this one's going to be a link to a separate page. So the text color is going to be pixel-light at 60% opacity right after the entire ol element here.

to be pixel light at 60% opacity right after the entire ol element here. I'll have an <a> tag that goes nowhere. It says show more and it'll have some classes, class text, pixel light at 60 and text extra small. We'll also give it empty-4, but this is not going to work just yet. And can you tell me why this is not going to work just yet? Can you, if your answer was

And can you tell me why this is not going to work just yet? Can you, if your answer was that an anchor tag is not a block level, but inline level element and therefore the margin is not going to be respected, you've got it right? So we can either wrap our anchor tag in a div, but we can also give a button or link inline block and it's going to continue behaving like an inline element, but have block level properties.

and it's going to continue behaving like an E9 element, but have block level properties for padding, margin, et cetera. So now the space is respected, I don't like how small it looks, so I'll go text-sm here. Alright? And with that artist to follow, box is complete and we've got one more thing to do, but I think we're going to be able to speed run through this because there's a lot of similarities. If you look at the heading the showMore button.

because there's a lot of similarities. If you look at the heading the show more button and then the setup here, it's basically the same markup, but we don't have an image and the button has a different text. So I'm going to duplicate my existing box and then we are going to take it from there. And this is why putting this to Laravel is going to be a joy because we have already a lot of repetition inside our HTML and I'm going to now duplicate this.

because we have already a lot of repetition inside our HTML and I'm going to now duplicate this whole thing for more repetition. And so I'm going to copy the entire box, let me add a comment here and I'll collapse this and I wanna copy all of that and I will paste it one more time. But this one is going to be called followIdeaStreams. Alright, let's change its title to follow

idea streams. Alright, let's change its title to follow idea streams. And we have the margin top of 10 already, so it should look very nice. Uh, and now the first problem arises, you know how we allowed our middle section to scroll down because we've locked the body tag to 100 dvh. Well now our sidebar is longer than this and it's not capable of scrolling.

Well now our sidebar is longer than this and it's not capable of scrolling because we haven't told it that it could scroll. So that's gonna be a real easy fix on the aside itself. Here I can add just like we did on the main tag overflow-y: auto;. And so now if the sidebar needs to scroll, it's going to be able to scroll up and down just like the middle one and we will eventually probably do the same on the left sidebar as well.

and we will eventually probably do the same on the left sidebar as well. Alright, let's keep building. I'm only going to keep the first element and remove these three because we are going to modify that. We are going to keep the first li and then we are going to remove the next three like that next, I don't know if these are links or just paragraph text, I'll treat them as paragraph of text and then the team can change it to a link if they need to.

or just paragraph text, I'll treat them as paragraph of text and then the team can change it to a link if they need to. So essentially we have the exact same setup than before, but without the avatar image. So I can remove the avatar image here, which means that I can remove the flex wrapper that was wrapping it because now it's just a p tag. And so now the list item is a flex wrapper that has the justify-between. And so we just need to change the text here, break fast.

that has the justify between. And so we just need to change the text here, break fast ideas and whatever, make it long enough to test the tation and it works beautifully, but the button here should not say follow, but plus. So we might get away with a plus character here, but I imagine that this is some sort of icon. Oh no, it's just text with the font size of 24. I would typically use an icon here, but let's try that. So for the text here, we'll have plus

I would typically use an icon here, but let's try that. So for the text here, we'll have plus and we are going to change the font size to text. There we go. twoXL is 24 pixels. We probably going to want YAP to reduce the line height on this because by default the line height is 1.333, but here we want letting none because we basically don't want it to make the button taller, huh?

because we basically don't want it to make the button taller, huh? I don't like how it makes this button taller than this button. Where in the design both this button and this button have 25 pixel height. For now to unblock us, let's try to have a paddingVertical of 0.5 instead of one. And maybe we'll reduce the px as well. So it's proportional. And you know what, that looks decent enough.

And maybe we'll reduce the px as well. So it's proportional. And you know what, that looks decent enough. It also looks like a Swiss flag when I look at it. And so one more time, let's add two more duplicates just to compare how it looks with different length and the spacing between. Let's take a quick look maybe. Maybe the spacing is too big between these and here we have a gap of 10 as well. Let's quickly check that.

and here we have a gap of 10 as well. Let's quickly check that. So the gap here is definitely less. It's gonna be 15. So let's go 16. So mt-4 instead of mt-10. And here, yeah, the gap is 2.5 only, whereas I think we had four between each. On the ol element we have the gap, we'll change that to 2.5. And then on the div uppermost div here, instead of 10 we are going to have mt-4. And with that I believe

of 10 we are going to have MT dash four. And with that I believe that we have our sidebar completely implemented. We might just have introduced a little bug when we made the element scrollable. And this is, if I focus here, you can see that it's now cut to the edges and the outline is not showing through. And so maybe we can fix that by going all the way to the side tag and add the outline to 2px, so we're going

to the side tag and add the outline is two pixel, so we're going to add a padding horizontal of 0.5, which is two pixel. So we won't really notice the difference in terms of width, but we should have the focus styles completely showing and yep, we do. Alright, let's take a final look at the design and it looks like we have covered it. All good stuff. We now get one of three columns completed. In the next lesson we're going

All good stuff. We now get one of three columns completed. In the next lesson we're going to focus on the other sidebar, the navigation. See you there.