Nested Exercise

[00:00:00]
>> All right, your job is to create a some kinda navbar. You can either take one inspired by Instagram or you can kind of, I left some icons here for whatever you wanna do, some of these are for them bottom nav, whatever, do whatever you want. But the idea is we want at least the logo and the avatar, and then a search field which will grow and shrink kind of based on the size of the navigation bar.

[00:00:33]
So our mission is to create something that looks kinda like a navigation bar. We've got some component pieces laying around here. Let's go ahead and start to arrange them in a way that feels navigationey, that's the technical term. We can go ahead and put that maybe in the middle, and you could decide that you actually want it over to the right, you do whatever you want.

[00:00:59]
I am going to then, let's go within the middle and then we'll see how to adjust it. Maybe messages too, messages should go up there, right? I don't know. Put that there as well, and we can kinda already see a little bit of the structure of what we're gonna wanna do here.

[00:01:24]
So we'll kind of take this here and we'll wrap that in a frame and we'll say account and messages. We'll call this one, So we can take the three of these now, wrap it in a frame with, again, I can either right-click and say Frame selection or on a Mac, its Command option G.

[00:01:56]
I think it's Ctrl+Alt+G on Windows, and we've kind of got that in place. Now, it's not perfect yet, because that's not what I want to happen. Are those in there? Yeah, those are in my frame. That's not an auto layout just yet. So actually, what happened. All right, so, I don't know if I wanted to change that or not, but we'll find out together, we'll make this whole auto layout frame.

[00:02:37]
But yeah, it doesn't stretch the way that I want. So just wrapping it in auto layout does not solve my problems immediately like I would like it to. So what do we need to do? We need to change this from, Having a fixed gap to auto. Right, so now we've got some of that in place.

[00:03:00]
And so far, not bad, right? The fact that these are wrapped together in one nested auto frame, we can give that, it's not an auto frame just yet, but we'll give that one as well. And then we don't want these to be auto. We want this one to, let's go with 8, which is the number we used before, and we actually have this one hugged as Contents, right?

[00:03:20]
So that one will expand and contract based on what's in it, other than that, the bar itself will then space everything out based on its own. So the navigation bar in and of itself has a fixed width, and then everything inside of it is spaced out. My icons, on the other hand, if I wanted to drag another one in, Go and center those, I can drag additional, I dragged it outside of that thing, that's what happened.

[00:03:51]
It was in a frame, I dragged the vector out, right? I can drag additional icons in and that part will then hug the contents with, again, that 8 pixel space. And you can change it to 16, you can do whatever you want. Other than that, though, the items themselves space out.

[00:04:09]
Now, that kinda gets awkward. This doesn't really expand or contract, right? So I can give this one a fill container, that's a bit much right as well. So what I can actually do here is on the logo, let's actually give that one a min width of, let's go with 240, Right?

[00:04:41]
We'll do the same here, we'll give this Account and Messages a min width of 240 as well, and we'll right align it, right? And you can increase that number if you want to, they'll always have some amount of padding. The other option here is, if I didn't wanna do this, cuz eventually, it will butt up against this as well, and so that won't necessarily solve all my problems forever.

[00:05:10]
Now granted, this is a design, in code, I think you've gotta be a little bit more defensive about these things, right? You can always see that it's not the way that you thought and change it. But let's say that if we added more icons forever, we'd end up with a problem where it is smashing up against that as well.

[00:05:29]
One of the things that macOS does, if you are in Safari or whatever or even Finder, and you're changing the items in that navbar, is it has this idea of spacers that you can put in there as well. So we can try something like that also. So we can get rid of the min and max width, I'll say this one.

[00:05:58]
I'll make that an auto layout as well. So it's got 8. And it'll hug the contents, kinda putting it back to where we had it before. Same here, we'll get rid of the min width. So the other option is that we can add some spacers in here, and that's really just taking some kind of frame, Right?

[00:06:24]
This one happens to be white, but we can kinda put it in there in between. This one, we can get rid of the fill on it, and we can give that either a min width or something like that. We can actually give it like fill container but you can give it a max width too or something along those lines.

[00:06:43]
So let's add that and let's give it another copy. So I'm gonna hold Option and drag it to duplicate it, you can see the two mouse cursors here. So then what we can do here is give these two a max width, which means they'll only grow a certain amount.

[00:06:57]
And that will let the search bar in the middle then kind of expand and contract with the navbar, but with a certain amount of a bound to it, right? So we'll grab both of these and we'll give them a max width instead of, let's say 180, right? And so now let's give it a fill color of white for now, and let's give it some horizontal padding.

[00:07:35]
So now I've got a navbar and you can see that we have that spacing in there, we'll give it actually some, There we go. And now it can, Expand and contract with a certain amount of extra space between the search bar and the icons, right? So you have different approaches, arguably this is gonna be more resilient to anything we might need.

[00:08:01]
You could also choose to let these be completely fluid, but give this one a min width and a max width or something along those lines. There's various different options. Honestly, to a certain extent, it's not necessarily that there's a right way, they will all mostly achieve the same effect, right?

[00:08:16]
As your design grows and changes, you might find that a certain choice that you picked might have some implications that does lead you into one direction or the other. But at this point, honestly, any of those approaches mostly get the job done, and changing them is pretty easy, especially when we look at components later and we can see that we can use one kinda prototype all over, making those changes then cascades throughout all your designs.

[00:08:41]
But the idea of kind of mixing and matching various auto layout frames will kinda allow you to build more sophisticated designs but then have a very clear analog to how you would implement them in Flexbox.