All right, in this one we're going to start building the main column of our app layout. So we've got our sidebar and we've got our navigation. And so now begins the work of building domain column. And I think we're going to focus on this navigation here and the post prompt up here. So all the way to this separator in this lesson. But before we do this, I wanna quickly do the same vertical scroll treatments that we've done for the sidebar here.

vertical scroll treatments that we've done for the sidebar here. We have not seen a scenario where this navigation is too high for the viewport, but if it was, it would be problematic. So if I was to make the viewport much less vertical, uh, you can see that the sidebar scrolls and the main column will scroll, but the left one here does not. And we have lost the last few items, just like we've done

but the left one here does not. And we have lost the last few items, just like we've done for the main column and the sidebar, I'm going to also add an overflow-y-auto class to the head of navigation. And I think that that by itself should fix it and give us the ability to scroll down if we need to. Alright, and with that in place, let's tackle the main column.

Alright, and with that in place, let's tackle the main column. Alright, so let's start with this navigation up here. So in the main column here, instead of this placeholder, I will start by having a nav element and inside I'll have an ol list with for each link, an li item and an a tag. So we'll have three of them. The first one says for you, the second one Idea streams and the last one says, I believe following.

The first one says for you, the second one Idea streams and the last one says, I believe following. Did I get that right? Yes, I did. Alright. And we want this right aligned. So I'll use a flex container and then use justify-content: flex-end and add a bit of gap between the items. So it's going to be on the ul here, here, display: flex, and then justify-end. And yeah, let's go with a gap of 4.

and then justify end. And yeah, let's go with a gap of 4 and looks like the gap is too small and also the text is too big. So I can adjust this with gap 8 and text small. Okay, that's looking decent now. And so for the active link we are going to have the color we currently have. And then for the other ones we are going to have 60% opacity on the same color.

And then for the other ones we are going to have 60% opacity on the same color. So I will select the last two items and then add a class of text-pixel-light at 60% and okay, I'm happy with that. Let's maybe change the opacity on hover. So for these two we'll go hover:text-pixel-light at 80% and that should give a nice subtle feedback on hover.

text pixel light at 80% and that should give a nice subtle feedback on hover. Yeah, I like that. Alright, so moving on. We are next going to have this post prompt, which in my mind might be a form. So we're going to have an input here and then the submit button and those I guess are file uploads button for images and videos. I'm not sure how exactly the team's gonna wire this up.

for images and videos. I'm not sure how exactly the team's gonna wire this up. This could be a file input, but we'll have buttons here to trigger the behavior. So let's focus on the layout. I see a column here and then another column here. So in my mind this is going to be a flex container. We're going to have the avatar here in the first flex child and then we're going to have a second child that contains all of the other items.

and then we're going to have a second child that contains all of the other items. And within itself the control buttons and the submit buttons will also be a flex entity. And so it'll be using justify-between to push the things on the sides. Alright, let's tackle that. So I will collapse the navigation and we'll start by having a Comment post prompt. And so we'll have a flex container

and we'll start by having a Comment post prompt. And so we'll have a flex container and also want some empty top margin-top: 8. And the first flex is going to be the avatar, but I think it's going to link to the User profile page because remember if I zoom out, there is also a profile page design. So I think it's a nice touch that if we click on one of the avatars, it takes us to the profile for this User. Alright, so let's have an anchor tag that will go

of the avatars, it takes us to the profile for this User. Alright, so let's have an <a> tag that will go to profile even if this page doesn't exist yet. And inside of it we will have an <img> tag. So right here in the design we have an image of Adrian in this beautiful cat. So we are going to use Adrian's image that remember we have in our images folder because we've added it earlier. So the source here will be /images/Adrian,

because we've added it earlier. So the source here will be /images/Adrian.jpg. The alt can say avatar for Adrian. And we definitely want to crop this image to a square. So let's give it a class of size-10 and yes object-cover to make sure it's cropped and there is no distortion because of how flex behaves. We might wanna quickly add a shrink-0 class here on the anchor tag so that the image always remains of size-10.

We might wanna quickly add a shrink-0 class here on the anchor tag so that the image always remains of size 10 and doesn't get tiny. Alright, that's a decent start and then we cannot see it here. But I imagine this whole thing that I'm highlighting here is a text area. I don't know if it goes all the way to here or maybe it has a max-width, but remember here we want to stack this text area

or maybe it has a max width, but remember here we want to stack this text area with the form controls. So we need to wrap all of these inside a common parent, which is going to be the flex child that works alongside this flex child. Okay? So after the anchor tag, which is the first flex child, I think we can have here a form element which can be our flex child.

I think we can have here a form element which can be our flex child. We leave the action empty here. And so inside this form we will first have a textarea. Let's give you the name of post and an id of post. And it's also going to have a placeholder text. I believe it said, what's up Adrian? Question mark, how does that look? Okay, so you can see there is no gap and you can see the resize window here only on

Okay, so you can see there is no gap and you can see the resize window here only on the vertical axis. And if I focus, you can see the boundaries of this form. Alright, so let's add a gap between the two and I'll make the text here. Bigger text, text-lg probably. All right, so class text-lg. And while I'm here I'll also make the width of full. I think that'll make most sense here. And on the common flex parent, which is this div,

I think that'll make most sense here. And on the common flex parent, which is this div, let's add a gap of four. Okay, that's looking better, but it is not using the full width. And this is because the flex child doesn't have sufficient content. Uh, we can tell it to take the whole space by going flexGrow on it. And so on the form element here, we'll add a class of grow.

by going flex-grow on it. And so on the form element here, we'll add a class of grow to make it grow to the rest of the main column width. Aha, great. This is looking better. And oops, you can see we have the same problem that we had up here where the outline gets cropped out because of the scrolling container. So maybe on the main tag, and by the way, that's what we did on the aside. We had this px-0.5.

and by the way, that's what we did on the aside. We had this px 0.5 to factor in the outline of two pixels. So we can add also here px 0.5 and I think that should fix our problem and yep it does. Okay, decent start. So next, let's tackle the action buttons. Oh and maybe we can hide the resize handle because we don't see it in the design. And so I'm talking about this handle here.

because we don't see it in the design. And so I'm talking about this handle here. And so that happens in our text area. I'm actually not quite sure of the class, but I guess resize: none should be what it is. And bingo, it's gone now. Cool. So we are going to have a flex parent here that is going to have the two buttons inside of it, which will be yet another flex nested level and then the post button. So remember we have a flex top level parent here,

yet another flex nested level and then the post button. So remember we have a flex top level parent here, and then we have the avatar as the first column and then the form as the second. But then inside this form we are going to have this taking the full width and below that we'll have a, that flex parent inside of it. There will be another that flex which has the two buttons. So image and video. And in here we'll have another button.

So image and video. And in here we'll have another button. Let's give this one a type of submit. And by the way, I think these two buttons should have a type of button to not accidentally submit the form. And this one will say, what does it say post I think? Okay, so we have a three buttons side by side and what we want to have is two buttons with a gap between these two. And then use a space between to push these two to the left.

with a gap between these two. And then use a space between to push these two to the left and this one to the right. And for this button we are going to reuse the stars that we've used on another button on the home screen just like we did for these. So if I go on the index.html file, let's find one of the yellow buttons.

So on the index.html file, let's find one of the yellow buttons. So I'll copy these classes and in our feed HTML for the post button, I will paste these classes here and that should give us a good starting point. Yep. Alright, so let's uh, sort out the spacing here and the space between arrangements between these buttons. So we got the three buttons here, but it's on the parent here that we want to use justify.

So we got the three buttons here, but it's on the parent here that we want to use justify-between, let's have a gap of 4. So the items never touch each other. And I think because we're dealing with elements of different height, we want to align-items vertically on the flex children with items-center. So I'll add here items-center. Now these two buttons will still touch, but we can fix that later.

Now these two buttons will still touch, but we can fix that later. But at least we should have the justify between set up correctly with a post button to the right. So here I'll add a gap of 4 between the two buttons, gap-4 and we should be in a pretty good place. So obviously we need to make this button smaller and we need to turn these into icon buttons. And you can see that our main column is completely broken, uh, on smaller devices, but we'll fix that later.

And you can see that our main column is completely broken, uh, on smaller devices, but we'll fix that later. But for these buttons, what did we do for the padding? So px-2 and py-1. So I think we'll use the same. So here instead of px-4 we'll have 2 and py-1.5 we'll have py-1 and that still feels too big. Oh, but it's the font size. We also want text-sm. text-sm, this should look nicer and yep it does. Alright, so now a User will arrive to this page and ooh, we can see that the actual avatar.

Alright, so now a User will arrive to this page and ooh, we can see that the actual avatar because a flex is using the full height. So I wanna fix that real quick. And on the parent most flex wrapper, I can have items-start instead of trying to stretch it out. So let's scroll back up to here. This main flex, I think items-start should fix that issue. So let's go through the tab once again and yep, perfect.

start should fix that issue. So let's go through the tab once again and yep, perfect. And so now the User will arrive here and say I am hungry. And then Post. And because we have a form you can see that it's submitted, uh, a get request. And so you can see the value of the text area field here. So the team can wire that up, that works. But I think we should have a label still, even if it doesn't show in the design,

But I think we should have a label still, even if it doesn't show in the design, we should have a label that is for screen readers only. So we are going to not display it in the design, but screen readers will be able to see it and that should make things a little bit more accessible. Alright, so here's our textarea and here I will have a label and the for attribute will point to the id. So it's post and now you will see this label.

and the four attribute will point to the id. So it's post and now you will see this label and if I click on the label it should focus the textarea and yep it does. But now we are going to hide this with the sr-only class like so class equals sr-only. That is a tailwind class that will visually hide the label from the design but make it available to screen readers.

visually hide the label from the design but make it available to screen readers. Alright, and so now we are back to what we had, but we made our form a little bit more accessible. Good stuff. Alright, so let's go and replace the image and video text with the icons. And as I tend to do, I do have these SVG elements somewhere in a clipboard. And so inside the first button here, instead of the image I will paste the relevant

And so inside the first button here, instead of the image I will paste the relevant SVG as we've seen before. Whoa, this is a big one. Uh, there is a viewBox but no height and width. And so if we look at the ui, the SVG might either be gigantic or not visible. And here we can't see it but we can give it a class and because here you can see the width is 24, let's go w-6, which in tailwind is 24 pixels.

because here you can see the width is 24, let's go w-6, which in tailwind is 24 pixels and we should have our first button and yep, we do. And we'll do the same for the video. So I'll collapse the first button and for the second one here I will paste the SVG and we are going to add a class. This one has a width of 25, but w-6 should work just right if need be, I'll re-export the SVG so it has the perfect dimensions.

but W six should work just right if need be, I'll re-export the SVG so it has the perfect dimensions. And yeah, actually I think that you can see a subtle difference, eh, maybe not, but maybe I can actually show you my process to export SVGs from Figma. I've been hiding this behind the scenes up to here. But let me show you how I would go about this to grab an SVG from Figma and then prepare it for the web. Alright, so let me actually select this first icon.

to grab an SVG from Figma and then prepare it for the web. Alright, so let me actually select this first icon. Yeah, let's grab this. I'll copy this whole group and make a new Figma composition and I'll paste it here and I will go grab the other group, I'll copy it as well and paste it next to it. And just so we can see the icons a bit better, let's make the page darker. Alright, so if I select the whole group, uh, you can see there's a bunch of spacing before and

Alright, so if I select the whole group, uh, you can see there's a bunch of spacing before and after up and down. And this is going to reflect in the design and that might be unwanted. Ideally I like to have my export flush against the edges of the SVG. Next you can see that the values are a little bit off, so it's 23 67, 18 93 and if we look at the other one you can see

so it's 23 67, 18 93 and if we look at the other one you can see that it has the exact same values. So we should be able to export these and have them consistent. But perhaps one thing I'll do, considering that every design element is already off pixel is select the whole SVG like this and then I'm going to use the scale tool which allows me to scale everything within the selection.

and then I'm going to use the scale tool which allows me to scale everything within the selection. And here I will change the width to 24, which should scale everything to a round pixel. And these were the values that I had in my SVG in the code you've seen just before. So let's do the same here. I will select that and scale it to 24. Alright, so now they have the same values and what I do at this point is I right click

Alright, so now they have the same values and what I do at this point is I right click and copy as SVG, but before I paste this into the code, I like to go to a tool called SVG. Oh my God, OMG. And here I can paste the markup that I had. And so it's hard to see but the SVG icon is here. And so you can see that this is going to reduce the SVG and prepare it for the web. And you have a bunch of settings you can change.

and prepare it for the web. And you have a bunch of settings you can change. What I typically like to do is use viewBox instead of sizes. So I will not remove the viewBox, but typically I remove the height and width so I can control it with CSS classes. But okay, for now I will go and copy this. And so this was our image, SVG. And so I will find the first button, which is this one here,

And so this was our image, SVG. And so I will find the first button, which is this one here, and I will replace the whole SVG with what I've got in my clipboard. So we should have a viewBox of 24 19 here. I will remove the width and height, which allows me to replace it with a size class. So this time we have exactly 24 and 19, remember that our other element has 25 and 19.

So this time we have exactly 24 and 19, remember that our other element has 25 and 19. So this process that we're doing here should help us have 24 19 for both, right click copy as SVG, go to SVG, oh my god, and paste the markup. Oh, there's the column. Prefer viewBox, width, height. That's what I wanted. And so again, reduced by 50%. I will copy that and I will replace this second SVG. All right, where did it go here? Um, this time the viewBox should be 24 and 19 and es.

All right, where did it go here? Um, this time the view box should be 24 and 19 and es. And so we can add the class of w-6 and this time we should have two exactly aligned elements. If I go with my measure tool, you can see that they perfectly align, which is great. Alright, so how are we doing? We have the navigation with the harvest styles, we have the post prompt, and then we have the buttons here and the submit button.

we have the post prompt, and then we have the buttons here and the submit button. I think this is looking pretty good. So let's have a quick look at the design and uh, I think that the button here has actually quite a bit more horizontal padding. So it has 60 which is yeah, px-4 and then py-1 where we went to px-2 and py-1. So let's try go back to on the post button px-4.

and then PY one where we went to PX two and PY one. So let's try go back to on the post button PX-4 and yeah, that looks a little bit more like the design. The last thing we can think about is this horizontal line here. This could be an <hr> tag or this could also be the border bottom of the whole post prompt. I will make it the border bottom. So let's inspect the color.

I will make it the border bottom. So let's inspect the color. You can see it's one pixel high and the color is the pixel-light at 10% opacity. So let's scroll all the way back up and yes, the post-prompt is what we are looking for. So border-b and then border-pixel-light at 10% and padding-bottom 4. This is what I was going after.

and padding bottom four. This is what I was going after and I'm quite impressed that it knows. And so yeah, I think it's looking nice. This might be a bit too big, the gap and these are a little bit higher because they're vertically aligned with the post button that is taller. I do think that this is good enough for now. Uh, we are going to commit these changes

I do think that this is good enough for now. Uh, we are going to commit these changes and we now have a post prompt for our pixel feed. Very, very, very, very cool. All right, good stuff. So I'm going to commit these changes to let the team know that I'm progressing and then we are going to tackle the actual post design in the next lesson. See you.

See you.