Mobile Header Layout

[00:00:00]
>> So this is the last part. And this is one that you'll probably see quite often, and this is the mobile navigation, right? So in our example here, you can see instead of the logo on the left, the nav, and then the shopping cart icon, what instead we have, on the left, we've got a hamburger menu, the logo's in the middle, and the shopping cart's on the right.

[00:00:23]
And when we click that hamburger menu, we've got a full page navigation that pops out, and that hamburger menu changes to a close icon. [COUGH] Now we can still use the markup, the same markup. We don't need an entirely new mobile navigation element or set of elements to make this happen.

[00:00:44]
We can just style our navigation differently. So first, let's add that menu SVG icon to our index file. Inside of our icons folder, we've got menu, right? I'm gonna do inline SVG again because we're gonna need to change the color, the speaker's page. So we'll do inline SVG.

[00:01:14]
I will paste this above the CSS, let's go to our index file, hold on. Where are you? This one, paste this above the CSS alink here, so that's gonna be plopped right in there. And I'm gonna add a class to this SVG called menu. This will be very useful when we have to open and close that menu, okay.

[00:01:44]
So if we look back in our UI, things look a little bit chaotic, right? Let's see what's going on here. Inside of our header, we now have this SVG being rendered, right? But we told our grid we only wanted three columns. So now the shopping cart icon has moved into a new row.

[00:02:09]
Okay, well, we don't really want that to happen. What we want to happen is the menu icon to display only when the viewport width is small enough to need a mobile navigation. So we don't want this in the UI until we hit a certain viewpoint. So, in the base file, I'm gonna do this in base, on the menu icon, I'm gonna set display: none.

[00:02:32]
And I mentioned previously, display: none will remove it from the DOM, so it's not gonna appear until we explicitly tell it to appear, right? So we also want to ensure our icon is appearing on our orange background, because by default that icon is orange. So again, just like we did with the shopping cart, we can target the path and set the fill color on it.

[00:02:53]
We only want this on the homepage, remember, so maybe I'll do this on the index.css file here. So .home .menu, and we're targeting the path of that menu SVG. Let's fill it, and we'll fill it with color-text-on-primary to give that white, all right? If I remove that display none for one second here, it should render white.

[00:03:21]
Yeah, now we're seeing it here, right? Okay, putting that display: none back on. So we wanna hide our navigation items, our nav bar here. Let's hide them at 840 pixels for now, okay? And we'll come back to them later. We'll also show our menu icon at 840 pixels.

[00:03:40]
So that'll be the width of our viewport that we switch over to that mobile navigation. So, 840, let's put it right here in the middle. So, media, max-width, 840. Okay, so first let's display our menu icon, right? So instead of display: none, it'll be display: block. Display is a block element.

[00:04:08]
And then also let's hide our nav items. So display: none. Just for now, right? So when I go to 840 pixels, look, our nav items are now hidden and we've got our icon showing up. Okay, we also have to update our header grid to account for the new menu icon, right?

[00:04:31]
Because before we had the logo, then the nav, then the shopping cart icon. So at 840 pixels, we need to update the grid layout to work with that. So let's go ahead and add this in here. So header was our grid container, so header. I guess I don't need the display: grid here.

[00:04:52]
Because that's redundant, already has a display of grid, but just to remind you. So we need to define three new columns, right? The width of this icon, if we inspect it, the width is 21. It's a little bit small, in my opinion. Hold on, if I go into my design file.

[00:05:15]
Yeah, 21. Well, let's try it with 21 and see what happens. I actually had 33 pixels written down. If I try 33, let's try it and see if it looks any different. And I can change it to fit the exact width if needed. So one fraction for that, the logo.

[00:05:32]
And then remember our shopping cart icon was 34 pixels, so we can keep that as defined, right? So when I change that, now we can see we've got those three columns, three grid areas, right? So one for the mobile nav icon, one for the logo, and then one for the shopping cart.

[00:05:54]
We also wanna align our items so they sit in the center. align-items: center, right? So now, Why you don't like that? Let's find out. align-items: center, is it justify content? justify-items, [LAUGH] syntax. Where'd you go? There we go. Look at that, justify-items. Today we're learning that syntax is important.