All language subtitles for 21. Clipped AppBar

One more little stylistic thing that I would like to change actually is with our draw when we open this

up.

I think I would actually like to have this underneath our app bar which would give a little bit of a

cleaner look on mobile and they actually in the material UI documentation provide an example of how

to do this really isn't very difficult.

And so I'm just going to run through it real quickly and explain as I go.

So the first step is actually coming down to where we are rendering our app bar and on the app bar we're

going to add a class name of classes classes dot app bar.

So then let's come up to our theme object and we'll create the app bar style and here we're going to

set the z index property which if you're not familiar with z index that determines which elements appear

on top of which other elements and a higher z index places you further on top of the screen.

So for example an element with a z index of five would be covered up by an element with a zip index

of 10.

If you remember when we went over a material you guys default theme they actually provide to us different

Z indexes that they are using within their styles.

So here let's access the theme theme.

Dot z index dot modal plus 1.

And so that is accessing the index of the z index of the modal component which is use underneath our

temporary draw.

And it adds just one to that value which will place our at bar just above it if we go ahead and save

this file now.

The page will refresh and if we open up our drawer you'll see that the app bar is now covering up part

of our draw.

Now this looks really good but it's not exactly what we wanted because it's covering up some of our

tabs up here and we can't actually access all of our routes.

So we need something to push all of our draw items down past our app bar and we actually already have

a way to do this.

If you remember the R content here on the screen actually had to be pushed down underneath our app bar

as well using our toolbar our toolbar margin style up here.

So essentially what we need to do is instead of pushing the content out from under the app bar we need

to be pushing the draw items out from under the app bar to do this.

Let's come under and where we set up our draw so right down here at the very top of the draw.

So under our draw but above the list let's create a div with a class name of classes of classes dot

toolbar margin and then we'll create a self closing div and you'll see this is just like the little

div we set down here which pushes our home screen content out.

So now if we have that pushing all of our list items down well we can go ahead and save this and we'll

see when we open up the draw that exact effect and now all of the items are being displayed very cleanly

underneath our app bar now there's one very last thing to take care of.

And I didn't notice until recently that if you go and you inspect our page and you come to the console

you'll see that we have an error this error is telling us that we are using an invalid prop type of

an array on our list item text.

So you can see here when a list item is selected we're passing in both the drawer item classes and the

drawer item selected classes.

But it looks like material UI doesn't like us using this syntax on the list item text component.

So there's actually a better way of doing this.

Anyways that will go ahead and implement to fix this console error and make the code a little more direct.

So what we're gonna do is we're actually going to come in this list item text and we're going to we've

only the classes that draw item so we'll get rid of that whole ternary statement and then come up to

the list item and underneath our selected prop let's add a class's prop equal to targeting are selected

selected like did class set to classes that draw.

Item selected will also come down to our list item for the estimate page and we'll get rid of the ternary

statement within here as well.

Leaving just our draw item and then we'll change our class name to classes and then add a set of brackets

and then add a property of route to set our draw item estimate.

Class.

All right.

And now all we should have to do is come up to our styles object and under the draw items selected style

we're going to add a property starting with the ampersand and then a period actually a space and a period

and then M U.

I list item.

Text dash route and then we're going to create a colon and open that up.

Placing R opacity of 1 inside.

And now we can get rid of the opacity outside of that object.

So what we're doing here is we're setting our styles for each list item and this class will only be

applied whether or not the list item is selected.

And then this specifies that any list item text component within a selected a list item component is

going to have an opacity of one on its root class which will get our opacity onto the text where we

needed it by using.

Let's see down here.

And by using the classes selected property we actually don't have to check to see whether or not our

value is selected because this class is only going to be applied to a selected list item.

Anyway this is a class provided to us by material UI which does the check and handles that logic behind

the scenes.

So again that just cleans up our code and makes things a little bit more convenient and direct.

So if we go ahead and save this now our page will refresh and you'll see the error in the console is

gone.

So I did actually just notice a couple real quick things we didn't actually come down on our estimate

list item and add these selected.

Make sure you get the comma and add the selected property.

Selected property and set that to our classes of draw.

Item selected so that it receives the proper styling when the estimate route is selected as well.

I also notice the here if you hover over our menu you see that we're actually cutting off the first

couple of items.

That's because we changed the z index of the app bar to be above the draw but that actually put it above

our pop over menu as well.

So let's come down to or up actually up to the menu components and let's just add a style here with

a z index set to 13 0 2 and that will be 1 above the app bar.

So if we save this page we'll refresh and we can see that now our other services tabs are being displayed

one less thing was I noticed the here on our draw.

If we go ahead and open this up we actually do have another console error here and this is telling us

the we actually forgot to come over on the menu item here and on this key.

Let's change the option to use back ticks and then we will inject the option.

So we'll put our option in there and then we can also add the index that we're currently on and that

should be enough to create a unique identifier and you can see after refreshing that now even if we

go ahead and open this and then open the drawer that those console errors are now gone do you want to

play around with the draw and the styling to make sure all of our active tab styling are working correctly.

Can resize the page get rid of the console you can see all of our tabs are still working we have the

active tab we can switch we can switch again we can refresh and everything is still working.

So play around with that if you need to convince yourself.

But we did a great job of cleaning up this code and really making probably the best header that we can

and so give yourself a break.

Now relax go outside take a walk listen to some low fi hip hop or do something to get your mind off

of the project just for a little bit before you come back in the next section.