Alright, we almost ready to build the profile page. But before we do that I want to do some changes to the application shell that is going to be shared between the feed and the profile pages, few responsive tweaks and add a few missing bits. Let's do that and then move on. All right. So the first and most obvious problem right now is when I resize the page, uh, there will simply not be enough space at all.

is when I resize the page, uh, there will simply not be enough space at all for the main column and it completely disappears. So what I want to do is actually hide the sidebar from a certain width and down or rather show it from a certain width and up. And if we take a look at Twitter for example, we have a very similar sidebar here. And as the space becomes narrower, the sidebar simply disappears.

And as the space becomes narrower, the sidebar simply disappears. So we are going to do the exact same and assume that there will be other ways to access that information if we on smaller screens. Okay, so we've got our navigation, our content, and our sidebar here. And what I wanna do here is hide it by default with the class hidden and then reveal it at the LG breakpoint.

with the class hidden and then reveal it at the LG breakpoint. So now as I reduce the space, the sidebar will eventually disappear, giving more room to the main column to operate. Uh, but even with this, we are going to face more problems when we get to narrower screens like this. So let's repeat the process, but with the navigation here, so for the header,

So let's repeat the process, but with the navigation here, so for the header, I will also hide it by default and then this time at the small breakpoint, bring it back with display: block. And I think for the navigation, whenever it's not showing, we'll be able to have a hamburger menu, a flyout menu or something to reveal the navigation. So let's take a look at what happens.

or something to reveal the navigation. So let's take a look at what happens. As I get narrower, the sidebar goes away and then eventually the main column is the only thing that's left. Alright, that's kind of cool. But as I scroll down you'll see that it feels sort of odd. The scroll bar here is not on the side but kind of flush against the main column. And remember we had set a max height of a hundred vh.

but kind of flush against the main column. And remember we had set a max height of a hundred dvh for the whole body and then that allows the main column and also the sidebars to scroll. But really when there's no need, just the main column showing, it's kinda odd and we don't really need that behavior. So what we can do is disable the 100 dvh max height, uh, on mobile and then reveal it only once we start showing the sidebar.

on mobile and then reveal it only once we start showing the sidebar. Okay, so on the body tag here where we have this H-D-V-H-I will only make this true for the small breakpoint and up. And the same with the overflow clip. We only want to clip that at the small breakpoint. In other words before that, before the small breakpoint, the page is just going to naturally scroll based on the

before the small breakpoint, the page is just going to naturally scroll based on the amount of content available. So everything behaves the same while we are on desktop. But if I go all the way down to the smallest screens now we will have just the normal HTML and body element scroll behavior instead of having this inner column that scrolls within itself. Alright, so I think this is already a very good improvement. The next thing I may want

Alright, so I think this is already a very good improvement. The next thing I may want to do is reduce the gap a little bit here and only make it bigger at maybe the Excel breakpoint when we are on this size. Now that I've zoomed out. So what I'll do again on the body tag is take this gap of 16 and only trigger this from the Excel breakpoint and up and before that we'll have half of this gap of 8. So now there's still a gap between each column.

before that we'll have half of this gap of eight. So now there's still a gap between each column but it's less pronounced and we can use a little bit more of the restrained real estate and I think that is going to work a little bit better for smaller screens. But once we hit the Excel breakpoint, we still have this nice generous gap. I like that. Alright, the next thing that bothers me is

we still have this nice generous gap. I like that. Alright, the next thing that bothers me is that the scroll bar when I go down here is on top of the content here. I would like it to be a little bit on the side. And so here we could just add a bit of horizontal padding to the edges of our main column and that would put the scroll bar on the side, but it would also make the column narrower. So we are going to add some padding

but it would also make the column narrower. So we are going to add some padding but we can offset it with some negative margins of the same value. And so we should have the column of the exact same width, but the scroll bar should be on the side a little bit here. Let's try that. So this happens in the main column and I remember we had this px of 0.5. Remember that was to allow the edge here of the highlight of the outline to show.

Remember that was to allow the edge here of the highlight of the outline to show. But let's increase that by quite a bit more. So we are going to go px-4. So you might not notice but the column is narrower now, but the scroll bar would now be outside. And what I can do is offset this px-4 with a negative mx-4. And so this will bring the center column to the same visual width.

And so this will bring the center column to the same visual width, but the scroll bar will be on the outside. Nice. And you know what? I think we should do the same treatment for our sidebar here. Remember the same is going to happen. It looks a bit better, but it's actually on the border of the boxes here. So where we had px 0.5, let's do the same px 4

but it's actually on the border of the boxes here. So where we had PX 0.5, let's do the same PX four and minus MX four. And so now the sidebar hasn't changed with and we should see the scroll bar on the outside. Very cool. Okay, good stuff. This is starting to feel great. There's just one more thing that I wanna change and it only shows up on the very narrow sizes and so it's these four U Idea streams and following lists. If I open the dev tools

and so it's these four Idea streams and following lists. If I open the dev tools and make this window very narrow, let's try to go down near 320. You can see that the words will start collapsing here and there's a few way we could go about this. We could have the words stack, uh, with flex-wrap. So whenever there's not enough space, the words will go to the next line. But I, I think once again I wanna do what Twitter does here,

the words will go to the next line. But I, I think once again I wanna do what Twitter does here, which is scroll horizontally. We are not going to have the control buttons, although we certainly could. Alright, so this happens within the main column and this is this navigation here. Basically I want to set the navigation to overflow-x: auto to scroll horizontally, but that's not going to work just yet.

to scroll horizontally, but that's not going to work just yet. We need to tell the unordered list inside of it what width to use. And we can use the magic class here of min-w-max. This is going to tell the ul to use as much space as it needs based on the content. And check this out, we now have a scrolling list of words. Now I don't think we need or even want the scroll bar here.

And check this out, we now have a scrolling list of words. Now I don't think we need or even want the scroll bar here. And so for the browsers that support it, we can add scrollbar-width set to not auto but none. So setting scrollbar-width to none will essentially make the scroll bar disappear or I guess have a width or a thickness of zero. And so now whenever I scroll through the words, no scroll bars is to be seen. Cool. So you can see there's still clearly some problems.

no scroll bars is to be seen. Cool. So you can see there's still clearly some problems of overflow and this is very, very likely due to these buttons here taking more space than they need. So what we are going to want to do here is have three buttons on top and then these two stack under. But because we have repeating markup with the reply here, this is typically something I would want to leave for later when the code is in partials

this is typically something I would want to leave for later when the code is in partials or components in the Laravel app and it's much easier to make the change in one place. So let's leave that and other little intricacies for later. And I think we are in a good place. Before we move on to building the profile page, I want to add two bits of UI that are missing. The first one is this bottom left corner user control here, which is fairly simple.

The first one is this bottom left corner user control here, which is fairly simple. The challenge here is going to make its position to the bottom left and maintain the scrolling container here. And the other one is at the very bottom of the feed we have this little, that's all folks closing footer. Uh, and so we also going to add this and let's start with that one.

Uh, and so we also going to add this and let's start with that one because it's pretty straightforward. So this is also going to happen in the main column. So we have the navigation, the post prompt, and then the feed list. And basically we'll have that after the ol here. So it is a footer. So even inside the main tag I can have a footer. I think that makes sense. And then we'll have a p tag.

So even inside the main tag I can have a footer. I think that makes sense. And then we'll have a p tag that says that's all folks. And then we need to have our white noise image here. Alright, so let's scroll to the bottom and here it is. That's a start I guess. So we want the text center aligned and then we have this divider underneath and then the image. So on the p tag, let's give a class of text-center and then we're going to have a horizontal rule

So on the <pt> tag, let's give a class of text-center and then we're going to have a horizontal rule with some classes and yep, we want exactly that. We want to have a border of 10px light at 10% opacity that you've seen many times and some vertical margin before and after to create some space. And then for the white noise, let's for now have a <div> of a height of let's say 20 and BG pixel. That should just make a big yellow box but we can see the dimensions and yeah, this is nice.

That should just make a big yellow box but we can see the dimensions and yeah, this is nice. And what I was expecting, I do want some spacing before the paragraph. So let's refer to the design here. Okay, there's a fairly big gap one 10. Uh, let's go. Let's go one 20 actually. So this is going to be MT 30. And then how are we doing with the height here? 75 in height. So yeah, H 20 is not bad actually. Alright, so on the ER tag class, MT 30.

75 in height. So yeah, H20 is not bad actually. Alright, so on the ER tag class, MT30. Okay, nice. And one thing that you might have noticed in the design is this is not left aligned with the avatars, but it's left aligned with the main column of the post contents like this here. So we should have the box finishing here. Here's what I mean. If I zoom out, you can see the avatars here,

Here's what I mean. If I zoom out, you can see the avatars here, but the left edge here will be where this is aligned. So we don't need to recreate a flex container for the offset, we just know that the avatars are 10 or 40 pixel in width and then there's a padding of 16. So in Tailwind land it's a width of 10 and then a width of four. So we should be able to give it a padding left of 14 or margin left of 14 and align it exactly like we want.

So we should be able to give it a padding-left of 14 or margin-left of 14 and align it exactly like we want. Let's try and I'll go with margin-left level 14 and this should perfectly align with the content here. Let's go check it out and yep, it does. Fabulous. Alright, so the last thing we need to do is replace the yellow box with the white noise image. And that's easy, we've used that before. So instead of bg having a color, we'll go bg and then url to signify

So instead of BG having a color, we'll go BG and then URL to signify that this is a background image And then /images/white_noise.gif. Remember this is an animated GIF and that should complete our footer. Let's check it out and hey perfect. Alright so that's all. And the last thing that we want to set up now is the bottom left user controls here.

And the last thing that we want to set up now is the bottom left user controls here and this is what I'm referring to. Okay, I think building this UI is going to be pretty simple, but the interesting challenge I guess is going to be to have the navigation scrolling vertically, whether it has space or not, while keeping the logo on the top left and the user account thingy on the bottom. So we need to make a decision on

and the user account thingy on the bottom. So we need to make a decision on how we wanna structure things so that the navigation list is a scrolling container but the logo and the user accounts do not move. Alright, so let's try this back in the header we go. And so we currently have the logo, the navigation, these are perhaps too many comments but oh well. And then down here we want the user controls.

And then down here we want the User controls. So I'm going to use Flexbox here and I want to keep these two items at the top and then push the User control to the bottom. So we are going to have a justify-between spacing here, which means I need to wrap these two insights in their own flex container or just common container. Let me explain. So I will turn my header into a flex flex-col and gap of, yeah, eight container.

Let me explain. So I will turn my header into a flex flex call and gap of, yeah, eight container. And thanks to the intelligence I realized that we were hiding and then showing as block. So I need to SM flex and remove the block class, which clashes, there we go. But then I want the logo and the navigation to be a common flex child. So I will wrap them in a div and I could keep them like this.

So I will wrap them in a div and I could keep them like this. We have the spacing handled with the navigation here. And now for our User control, let's once again have a bg-pixel with the height of 8 this time box just so we can visually see what happens. Alright, so here's our box, let's make it a bit thicker and we're going to push it down with space between. So page 12.

and we're going to push it down with space between. So page 12. And then on the parent here, I want to set the justify-between class to push the second one, that one to the bottom. All right, excellent. This is really cool and this kinda works already, but we are going to have problems when it comes to scrolling. As you can see, only the top section is scrolling.

to scrolling. As you can see, only the top section is scrolling. Actually I might make the logo scroll, but what we want is that to happen while the user control always shows. So what I need to do is move the overflow-y: auto from the whole header to this div here. And actually I think that this might just work like this. Let's try that here. I cannot scroll down because we still have sufficient space,

Let's try that here. I cannot scroll down because we still have sufficient space, but if I was to arrive here, very cool. Can I scroll? Yeah, I can. Nice. Alright, well that was quicker than I thought. So let's quickly build the UI now here. So we have an avatar, what's the size? 45. And then we have username handle and then this menu that we can reuse from here that we've used before.

and then this menu that we can reuse from here that we've used before. So let's have the elements. We have again an <a> tag that's going to link to the profile I guess, although this should probably be a button because it's going to trigger some user actions. But let's leave it like this for now. We'll have an img that has images/adrian.png and we can have the alt tag.

We'll have an image that has images/adrian.png and we can have the alt tag. And here the size is gonna be just a little bit bigger. Let's go size 12. Okay, nice. Then we are going to have two paragraphs, one for the username Adrian, and one for the handle. I'll copy that to make sure there's the right amount of Ss. And also here it's underscore lowercase adrian. So let's fix that. And here I will paste that this will definitely need to be wrapped in a common div.

So let's fix that. And here I will paste that this will definitely need to be wrapped in a common div because we are going to use flexbox. This is going to be a flex container. Let's go with the gap of 2. And let's remove the pixel color background. We need to have this outside of the anchor tag, like so this is the first flex child and then this is the second column after the gap. The gap here is probably bigger 14. So let's go 3.5.

and then this is the second column after the gap. The gap here is probably bigger 14. So let's go 3.5. And then we have a vertical gap of, let's go 8 here. So gap of 2. So this gap is going to be 3.5. And this is also going to be a flex, flex col gap 2. Uh, let's go gap 1 because of the line height and we can fine tune this later. But yeah, that's looking pretty nice. I'm pretty sure the text is going to be text-sm. And so here we are going to have an opacity of 60%.

I'm pretty sure the text is going to be text-sm. And so here we are going to have an opacity of 60%. So this one has the color of text-pixel-light at 60%. Very nice. And the last thing that we need to add is the menu button next to the user meta. I think if I collapse this one, I'm going to find the button here. There it is. So I will copy all of that and we'll go right back up in our UserController.

There it is. So I will copy all of that and we'll go right back up in our User controls and have the button here. We might need to reposition it, but this should work quite well. And actually it does. So you can see our avatar shrinking and we can uh, give it a shrink zero value to avoid this. But I think the column here might be a little bit too narrow. So what happens if I increase the width of the header?

be a little bit too narrow. So what happens if I increase the width of the header to w-48? Okay, yeah, that works a little bit better. Let's still give our avatar a shrink-0 value. And I'll also make it just a bit smaller. This feels too big. So this is here, let's go. Size is size-11, I think. Of course everything is a thing in Tailwind CSS. And so the anchor tag here will have a class of shrink-0.

Of course everything is a thing in tailwind four. And so the anchor tag here will have a class of shrink-0. Alright, and I think this is good enough. Let's verify that it still works with a lower height where the content is scrolling above and it sure does. I am super happy. All right, ladies and gentlemen, I am a hundred percent sure that there's still lots of things that went through the cracks and I'll need to fix later.

that there's still lots of things that went through the cracks and I'll need to fix later as the team uncovers them. This is part of a normal project workflow lifecycle I guess. But for now, I am declaring that we are ready to go and build the profile page. This is going to be our last page. I hope you're excited. Let's do this. See you in the next one.