All language subtitles for 13. Drawers Overview

We've started to use responsive design in our application to remove the tabs when we are on a small

enough screen size.

Well of course we can't just get rid of the tabs and have no head or navigation and so we need to replace

the tabs with a different navigation structure for smaller screens.

We're going to do this by using the material UI drawer component drawers or otherwise known as side

panels are essentially pages that are anchored off screen either to the left right top or bottom.

That can be brought on screen when a certain button is pressed or action is completed to then display

a list of further options or information we'll be using the drawer component to display the different

tabs for our Web site on smaller screens.

So to take a look at how we're going to set that up and what functionality material UI provides for

us let's head on over to the material UI.

Documentation.

Here we are at the draw documentation page on the material UI Web site under components navigation and

then drawers.

And here we can see that they define a draw as providing access to destinations in your app or surfaces

containing supplementary content that is anchored to the left or right edge of the screen they provide

a lot of really nice examples for different types of draws and the different options that you have to

configure that.

Here you can see a list of buttons and as you may expect if I come and click on the open left button

it is going to open up a drawer to the left side of our screen just like that and you can see that this

is what's called a temporary draw because it is temporarily blocking all of the other content on the

screen and floating above we can click anywhere to get rid of the menu and then we can go ahead and

try out the open right menus and see that come from the right side as well as the top and the bottom

sides so you can see that they offer a lot of different ways to control this.

And if we want to go and take a look at how exactly they're doing this we can see first that they import

the draw from material UI poor slash draw and that is actually for just this draw functionality.

All that's really important.

If we scroll down we can see some of the functionality for how they have this set up and continuing

down here at the bottom here where we have our different drawers.

You can see they use the anchor prop to determine where to render the draw as well as an open prop which

takes a piece of state set to either true or false to determine the visibility.

Then they set it on close prop with a function that closes the appropriate draw.

In this case they implemented an extra function to toggle which a draw needs to be closed since they

are using multiple but in our application we'll just be able to use react hooks.

For now we're just going to cover the draw itself and not any of the content inside of the draw because

we'll get into that when we start talking about lists in a couple of videos.

But if we keep scrolling down we'll find some more examples of the drawers that material UI provides

to us such as this first other example.

These swipe a ball draw as you may expect.

This creates a draw that looks similar but now can be swiped close and provides a much better experience

for those on mobile devices.

There is a little caveat to this though and we'll want to keep this in mind when we go ahead and implement

these swipe board drawer which is actually what we will use.

But you see here they talk about optimizing performance by using these extra props to determine whether

or not the application is being run on an IAW device.

And if it isn't then it enables some features to help the animations just run a little more smoothly.

Now I would show you the swipe a ball draw but it actually only works if you have a mobile device.

So since I'm on a desktop I have no way to swipe but you'll see when we test the application on my phone

that the draw is indeed swipe Aboul further down.

They show us the responsive draw in the so you can see if I started to resize the screen the content

they're re sizes see.

Here we go.

The content is resizing.

And then once we get small enough you see that the draw turns into a button by which we can then click

to show the draw instead of it always being displayed.

And so this is an example of how you can make responsive draws right off the bat.

This is very similar to what we are doing and how we are going to be implementing the draw in the place

of our tabs below the responsive draw.

We have persistent draws.

And so these are jaws that can be toggled but when they're toggled they actually keep the other content

equally on the screen.

So unlike a temporary draw this isn't taking the focus and blocking out all this other content.

You can see I'm free to click here and do whatever I would like and the draw will only close again when

it is toggled they give us another example of that by here on the right side of the screen.

So again you can obviously go either way and below these examples that we have the mini variant draw.

So here you can see a mini draw of just icons.

And now when the draw is toggled it expands to show the full name of each action the mini variant is

helpful whenever you want to keep some commonly used actions or locations on the screen but without

taking as much real estate and finally underneath we have the permanent draws.

And so these are drawers that are always visible and are typically used in applications that rely on

vertical navigation they give us two examples here as well with one on each side of the screen.

The other example they give then is the crypt under the app bar draw and you see here that now the app

bar is extending over the draw.

And so it gives it a nice tucked in look which is probably what you would want for a lot of applications

like this so you can see again that they have provided a very versatile component for what can be used

in a wide variety of ways and applications the draw component enables you to have complete control over

the functionality of your side content and the way that it is displayed to and interacting with your

user they really enable you to create any work that you want and then obviously customize it extensively

from their so hopefully this has given you a good idea of all the different possibilities for your future

applications.

But let's go ahead and start taking a look at how we can integrate the draw components instead of our

tabs components in our application in the next video.