All language subtitles for 14. Using Drawers

Here we are at our project directory in the code editor and now that we have set up responsive design

to get rid of our tabs and now we know about the draw component that we'll use to replace them.

It's time to get started on implementing that.

The first thing we're going to want to do actually is to come down to our terminal and here we're going

to npm install material dash UI slash icons.

And this is a package that they provide.

There has an extensive suite of all sorts of different icons that you may need throughout any application

that are completely available and free to use for go ahead and run that whenever it gets finished we'll

be ready to go.

All right.

And you can see I have successfully installed the package at version four dot four dot three.

With that ready we can go ahead and NPM start our server back up and that will get our application running

so we can minimize that.

And now let's start by going up to the top of our header dot J.S. file and let's import the swipe a

ball draw from material dash a UI slash core slash swipe a ball draw.

Next we're going to come down and import the menu icon from an app material.

Dash UI slash icons slash menu now what's scroll on down here to the beginning of our function.

And let's actually go to the material UI draw documentation page that we were just checking out in the

last video and here where it talks about the swipe a bold draw and how you can optimize it for mobile

performance.

We're gonna go ahead and do that by copying here.

This constant which checks to determine whether or not the user is on an IOW device.

So we're going to copy that and we'll throw that up here underneath our theme and let's actually give

us some space here.

Now although actually let's put that underneath here so we have all of our hooks separated.

And here I actually also want to create a constant of open draw and a set open drawer equal to our use

state function with the default value of false.

Now I think for clarity's sake we should actually go down and change open to open menu and set open

to set open menu which now means we have to go and change wherever those values are being called.

So let's scroll down and here under handle click change this to set open menu change handle menu item

click to use set open menu set open menu and this is where having iOS lint telling me where these errors

are appearing.

Those little red dots right here makes it very easy.

So open menu on the menu component and I think that that is all of it real quick for clarity's sake.

I would also like to change right here in our handle change function instead of just value here.

Let's change this to new value which is what they had in the documentation so new value which just makes

it a little more clear that we're not referencing this value state right here.

But the new value that's being passed to the function all right.

And now if we scroll down let's go underneath our tabs constant and will create right above the return

statement are constant of Draw.

Set it equal to a meal time line statement with our parentheses and we'll start with a react dot fragment

open that up.

And now we're gonna come back over to the documentation page and we're gonna copy the swipe a ball draw

component that they have for us right here.

So.

Copy that.

Come over and paste it and then go in and where.

It's a self closing tag.

Get rid of that little slash and now create a closing tag and then we're going to open this up.

So again the reason we did that is because these props right here disabled discovery and disable backdrop.

Transition help just optimize for mobile performance.

Now we know the draw component also needs an open prop to determine whether or not the draw is visible.

And we have created the value open draw on our state to manage that then we can set in on Carlos properties

so that the draw knows what to do when we close it.

And in that event we want actually an arrow function and we're just going to make that call are set

open draw two false the opposite of that then is also in on open set equal to another arrow function.

Actually we need to make sure this is outside of that bracket.

So on open and set this prop equal to an arrow function where we are going to set the open draw to true

now to just demonstrate that all of this is working.

Let's go ahead in INSIDE OF THESE swipe a ball draw just place the text example draw and that'll be

enough to see something on the screen.

We still have more to do though before we can use this draw.

And so what's come down outside of the draw but inside of the fragment and we're going to place an icon

button components which means we actually then need to import the icon button component.

So underneath our swipe a ball draw let's import the icon button component from that material dash UI

such core slash icon button.

This does exactly what you think it does.

And I think I've covered it a little bit before.

When we went over the different types of buttons and this just applies all of the buttons styling to

just an icon.

That's exactly what we want for our draw icon which is actually going to be exactly like this material

UI and draw.

Right here you can see they have a temporary draw for their Web site.

But with Icon button imported now we can go back down to our drawer and inside of the icon button will

place our menu icon components that we had in ported that icon button is going to have an on click handler

which is going to call an arrow function which will set our open draw.

Piece of state to not open drawer which will toggle the visibility to true or false based on what is

already set.

So if the draw is open and open draw is set to true it will set it to false closing the door and if

it is already set to false then it will set it to true and cause the drawer to open I also on icon button

wants to add the disable ripple prop because I know I don't want that ripple effect when we click on

the button like it comes with the default style.

With that in place all we should have to do is come down here and where we're rendering our tabs based

on whether or not the screen matches our media query.

Well instead of rendering.

If we are at a medium sized screen or below then we actually want to render our draw if we go ahead

and save this then our application is going to refresh.

And now you can see if I start to resize the screen as soon as our tabs go away we have a menu button

show up if we go ahead and go and click this menu button we can click it and we see our example draw

a pop up over the screen.

So this is great.

We have got our base functionality.

You can see we can click off of it open it back up and you can see the draw is working.

There are obviously a few stylistic things to change though.

The first for me is the.

I don't actually really want to see that circle above the menu icon when you hover over it.

I'd actually really prefer just to have the icon by itself and it's since most people are gonna be on

mobile when they see this.

They're not going to be able to see the hover effect.

Anyways so if we come to our icon button here in the drawer constant and we add a class name of classes

dot draw icon container and then we come up to our styles object and we create the draw icon container

style.

Now I can place R Ampersand colon hover style and when we are hovering over that draw icon I want the

background color to just be transparent.

So if we save this and now the page refreshes we can see when we hover over the icon.

We no longer get that circle of opacity that's good so far but now we obviously don't want this buttons

squished all the way up right against our icon and clearly we would want it on the other side of the

screen here aligned to the right as we saw in all of those examples.

So actually on our draw icon container styling still.

But outside of the hover style let's set our margin left to auto in the same way that we did for the

tabs but make sure that you get that comma underneath there to complete for the hovering style.

So if we go ahead and save that now we'll see the page refresh.

And now our menu icon button is all the way over here on the right.

The last thing that I want to do now is to then make that button a little bit bigger because obviously

that is pretty small and I don't think that that's really what we want.

And so if we come down to the draw constant and on the actual menu icon component itself let's add a

class name to that of equal to classes dot draw icon and now let's go up to our styles object in right

above the draw icon container.

Let's create our draw icon style and make sure you get the comma underneath that and we're just going

to say a height equal to 50 pixels and a width with equal to 50 pixels as well.

If we save that we can now see a much nicer sized button on the screen.

So now we've originally done it.

And you can see if we resize the screen are tabs appear and as we go down and resize the screen is now

much more appropriately handled for any of the sizes that we can move through.

This already is working really great and is hopefully starting to show you the real power and flexibility

of material UI.

And although we have our drawers set up and functioning with our little example draw text.

This obviously is not how we want it to look and not the content that we want to have in our drawer.

And instead we want to move essentially these tabs into our drawer and provide a way for navigation

on the mobile site within here so to do that we're going to use a new material UI component that will

start getting look at in the next video.