All language subtitles for 16. Using Lists - Setup

We now have all of the information that we need to finish the last little feature on our header if you

remember when we worked on this last.

If we resize our screen down to where the tabs go away and our menu appears and then if we open up our

menu you can see we still just have our example draw in this video.

We're gonna go ahead and change this and fill this draw out with the mobile navigation system and then

we're going to get it all styled so let's get started using the list component that we learned about

in the last video by coming up to the top of our code editor and we're going to underneath our menu

icon.

We're going to import the list from app material dash UI slash core slash list and then we're going

to import the list item from material UI core list list item and then we're going to import the list

item text from material dash UI slash core slash list item text.

So now we can go ahead and scroll back down to our swipe table drawer where we have set this up and

inside of our drawer all we have is the example text and let's go ahead and remove that now and replace

it with a list component inside of our list we're gonna want to go ahead and create a list item for

each of the routes that we had in our tabs each of these list items is going to be turned into a link

a link using the component prop like we have on all of the rest of the components and then we'll pass

down to that wing component the two property of just slash for this first one now inside of our list

item we can make a list item text and we'll open that up and instead of placing our text on the primary

prop like you had seen in the documentation instead of doing that we're actually just going to put our

text on the inside of this which makes it a little bit easier to style since we're adding our own custom

styles.

Anyway let's go ahead and copy the list item and it's a list item text component.

And we're gonna paste that for each of the routes that we want in our draw.

So I'm going to change this one to slash services and change the home text to services and then create

a another list item slash revolution said this to the revolution revolution and then another set to

about it's about us and then our contact contact for contact us.

And then finally our slash estimate to the Free Estimate page.

Let's go ahead and save this and take a look at what our new draw is going to look like.

So it wants the page refreshes.

Let's come over and we'll open up our new draw and you can see here that we've got a new we set up a

list of all of our different routes.

You see that the links themselves are actually purple though and that is coming from some of the typography

styles.

So on each of our own list items actually no on the list item text component.

Let's add the disable typography prop and this is going to disable the rendering of a typography component.

Getting rid of all of those default styles so we'll add that to each of our list item text components

and once we have done that we can save.

And again the page will refresh so we can go see our new draw.

And now you can see that actually the font has changed but that coloring is still the same.

But that's OK because we're going to be getting rid of that anyways.

But we needed to disable the typography regardless.

Now we can add a couple more props here to help clean things up.

For example here if you notice at the very top we have a bit of an extra a gap above the Home tab and

it may be hard to see with the white background but there is actually extra spacing there.

And so if we come to the lowest component let's actually go ahead and add the prop disable padding for

go ahead and save this.

Now the page will refresh and when we check you'll see that the home is now closer to the top and we've

removed the extra bit of spacing that was in there.

If you ever want to remove the padding or any default styles for any material UI component you should

always go to the documentation page and see if they provide a prop or some other easy way to change

the setting without having to create your own styles another example of a prop like that is on each

of our list item components if we add a divider prop that's going to add a little thin divider between

each of our tabs and make it look a little cleaner than just having the text on a blank background.

We also actually need to add the button prop here on each of our list items to add the appropriate styles

and functionality for the fact that we are using the list item here as a button so let's go ahead and

copy the divider and the button props and go ahead and paste that onto each of our list items and once

we've done that and we can save and we will refresh the page.

And now what we can come over and see that we have some styling provided to us from the button it now

does not have that purple coloring to it and you can see the dividers in between each route and how

that really just cleans up the look now.

You'll notice if you actually try and come and use one of the links that we're navigated to the page

here up in the U.R.L. you can see our route is changing but the draw here actually stays open regardless.

We definitely want to close this draw any time one of the list items is clicked on.

So let's go ahead and on each of our list items we're going to add in on click prop set to an arrow

function that is going to call our set draw are set open draw hook equal to False.

Let's go ahead and copy this on click handler and paste that onto each of our list items as well get

that on all of them and then we can save this.

And now if we come in we open up our drawer compress that.

Now you can see when we click on a link it then closes the drawer as it takes us to the new page.