All language subtitles for 18. Using Lists - Selection

The last thing that we need to do now is to actually manage whether or not one of these list items is

clicked on and apply a styling to display that to the user.

If you remember from the documentation and also from the menu when we set up the menu items we use these

selected prop to do this.

Now if we think about what we want to do we want to manage which of these list items are selected.

Well we actually have already done a very similar thing when we manage which of the tabs is selected.

You can see here that the revolution is already selected and so we just need a way to make sure that

we marked the revolution here in the drawer as being selected as well well since we're using the same

roots in the tabs that we are as the draw.

I think we can actually use this same a value that manages which tab is active to manage it which list

item is selected to give this a shot.

Let's come over to our list items and at the top on our home let's give a another prop to the list item

of selected and set this equal to a check to see if our value which if you remember is the value that

we use to manage the active tab is equal to zero zero in this case would be the first tab which would

be the home round.

So let's go ahead and save this.

And if you see the page refresh we can go over and open up the drawer.

And now if we come over and select our Home tab and we open the drawer back up we actually still don't

see anything.

And that's because we haven't set any of these list items to actually change the value.

When we click on it so if we actually went and we open this up and we used the tabs here to go to the

home page this changes the active tab.

Now to being set to home and if we were to shrink the page back down and now open up our drawer we can

click on it and see that now the Home tab has a darkening behind it indicating there is the tab selected.

So now let's go ahead and actually change our on click for the home list item.

Let's wrap this in a pair of brackets and that will enable us to come to the end enter a semicolon and

then we can actually enter a another function to be called on the on click handler.

We want to make sure that when we click on the home list item that we set the active tab value back

to zero.

Let's go ahead and make these changes as well as adding these selected prop to the rest of our list

items.

And once we have done that we should be just about finished.

So let's copy that selected prop and then come down and add it here.

But we're going to set it to the first tab.

Now let's set this second tab for the revolution.

The third value for about us.

The fourth value.

Fourth for contact us.

And the fifth value for the estimate.

Make sure that you got all of those in the right places.

And now what's come back up to the Home tab and you see how we wrapped on click with the brackets and

added a set value.

Let's go ahead and do that for all of the other on clicks as well.

So we'll wrap this in a set of brackets and then we'll add the semicolon and then set value in this

time one because we'll want to set the active tab to the first index for these services root any time

these services list item is clicked on.

This is really nice that we're able to use the value and set value from the tabs without having to implement

any more functionality so let's keep going and changing these on clicks we'll add the brackets a semicolon

and this time we'll set the value to to we'll keep going.

Brackets semicolon set.

Value of three add or brackets semicolons add value for four and the last one we add our brackets a

semicolon in the set value four five five.

Let's go ahead and save this now and you'll see the page refresh and if we now open up our draw we see

the Home tab is still selected.

But let's go to the About Us tab and let's reopen the draw.

And now you can see that the about us has the dark end selection styles we can click on the Free Estimate

tab and you see that that gives it the dark in style as well.

And so all of the tabs seem to be working and marking themselves as active.

Now what I like even more about the fact that we have used this based on the value that we use to manage

our active tab is if we go ahead and now refresh the page and then open up our draw you can see these

services tab is still set as selected.

That's because when we put in the fix to manage our active tab on the page refreshing we're using that

same active tab value for our draw.

Meaning that the fix for refreshing is already set.

This is just another little convenience when you properly wire up your application.

All right.

There's actually one last thing I want to do before we go and if you look at the tabs when we're up

here you see the we have the lower opacity for these tabs and then the highlight on our services tab

that is active.

Well I want to go ahead and actually add that functionality to our draw as well.

But right now you can see that all of the text is actually fully bright let's now change this by going

up to our draw item style and adding in opacity of zero point seven just like we had done for the menu

item.

Let's save this.

And now if we open up our drawer you can see that all of the drawer items having lowered opacity you

can see though that these services tab although it is selected still also has this lower opacity.

And so to change this we're going to have to use a little trick.

Let's go ahead and in our styles object create a draw item selected style and we're just going to set

this with opacity of one now and scroll down back to our list items here.

We're going to change our list item text class to where instead of just setting our classes dog draw

item what we're actually going to do is on the list item text component.

Make sure you're in the right place inside of the class name.

Let's add a check to see if the value currently is set to 0 for being selected.

And we're going to create a ternary statement so that if this is the selected class well then we're

going to actually want to apply multiple classes using the array syntax and we'll provide the classes

dot draw item class as well as the classes dot draw item selected class if we are not on a value of

zero and we default to the false case then we just apply our regular draw.

Item class this sets our draw items selected class with our opacity of 1 2 whichever list item text

is selected.

I'm going to go ahead and copy this entire class name so inside of the class name javascript injection.

Go ahead and copy that and we'll come down to the next list item text and make sure to replace all of

that in there as well.

But then change our value to one for the index of these services.

Root will continue and change the rest of these classes to reflect the logic as well.

But for the second route and now for the third route for the fourth fourth route and of course for the

fifth route.

So now if we go ahead and we save this the page will refresh and we can come now and see when we open

up our draw that the Home tab which is currently set to active also has a brighter text due to the full

opacity.

You can see the rest.

Our dollar.

And if we go to the revolution and open or draw back up now the revolution not only has the darkened

background to indicate selection but the highlighted text as well.

Again remember that if we refresh the page we already have the fix in place to manage all of these styles

already.

And with that I want to congratulate you for completely finishing the header.

We have learned so much over this process and setup so many of the core concepts that we need to build

the rest of this site and any other material UI application and I hope that you have really started

to glimpse the true power of material UI for building production applications Believe it or not.

This really is the completed header with everything that we need to do for managing all the perfect

styles and looks on all screen sizes leaving us now only to worry about the actual content.

Now as seeing this here on the browser is one thing because definitely when we look at the tabs you

can see that that looks good but let's actually flip over to my phone real quick and I'll show you guys

how this is looking on a actual mobile device just to prove to you how already responsive and good this

really is performing so here on my phone screen I'm running from the local development server and you

can see already that there is a little bit of an issue with the text in our icon but we're going to

solve that in a later section when we take a look at cross browser support but for now just pay attention

to what the header actually looks like and how well that is resized for the mobile screen.

If we go ahead now and open up the draw you can see that that actually looks really great.

And if we switch to each one we're taken to the appropriate page and the draw is hidden.

Now we can also open the jaw back up and I said our approved you guys that the draw is swipe a ball

and you can see now that I am able to swipe that with my finger and control the draw as if it were a

regular native panel.

These styling for manage our active tab is all working as well and you can just really see how this

design makes sense and works on an actual mobile device so that officially wraps up our header which

means we can start moving on to even more complex topics and start using our new knowledge of material

UI and responsive design to take a look at the grid system now when we start building our footer in

the next section.