All language subtitles for 8. Responsive Grids

I'm here at the material UI documentation page under components layout and then hidden if this is one

of the components provided to us by material UI to help with responsive design the hidden component

works with the breakpoints system that we're already familiar with to either show or hide different

content this works extremely well with the grid component and is commonly used to change layouts or

functionality based on the different device so if we scroll down here we can see an example of this.

And if we open it up we'll see if they import a hidden component and all they do is simply wrap whatever

components that they would like to be hidden or shown with the hidden components and then specify on

our hidden component a prop that determines the breakpoints that you want your component to be visible

at.

You can see here that they use the extra small and up prop..

So for any screen that is extra small or above which is all of them.

This paper will be displayed you can see there were only have the one being displayed currently.

And if we go and we begin to scroll the page down then we'll see more of them start popping up as we

start entering the other breakpoints.

And so you can see that they're being currently hidden but as we answer their breakpoints they begin

to show up.

And now we can see all of them.

So it honestly is a pretty simple component that enables us to do some pretty nice and convenient things

while using the media query and Breakpoint system that we're already familiar with.

Let's go ahead and jump into our project directory so that we can see how this would actually work for

us.

So let's go ahead on size this down to here.

And if we flip over to our development server page let's now go and take this screen down even smaller

to where we get down to our drawers and then even to the very smallest size and you can see now they

are foot or tabs are all totally messed up.

They're being cut off.

A lot of them aren't being displayed and honestly I just don't think that it looks very good right there

or that that's really what you'd expect for a mobile site.

I think for a lot of mobile sites they really don't include all of the links right there or if they

do they kind of hide them away or put them in a different style but I'd really like to just get rid

of them entirely because on a mobile site I think that you'd be much more familiar with just using the

menu button and the draw for your navigation than you would be necessarily looking for links in the

footer.

I think that that's maybe something you would do more on a desktop.

And so we're going to use the hidden component to implement this functionality if we come up in our

footer dot J.S. file all the way to the top underneath our grid.

Important Statement.

Let's go ahead and import the hidden component from app material dash UI slash core slash hidden.

And now we're going to come down and really simply underneath our footer above the grid.

Let's wrap the entire grid with a hidden component.

So we'll get rid of the closing tag and let's just go all the way to the bottom all the way to the bottom

above our image.

But underneath that last grid tag and let's close up our hidden components.

So now we've got our entire grid link system here wrapped with the hidden component.

And let's add a prop to this hidden component of MDI down.

So that means that all the content inside is going to be hidden at the medium and below breakpoints

the medium breakpoint is when we begin showing our draw instead of the tabs which is also an appropriate

place to get rid of our footer links.

So if we go ahead and save this now we'll see the page refresh and our footer links are gone.

So if we bring the page back up to size we'll see all the sudden our footer links are restored and you

can see they look great and centered as we size all the way up to full screen and we can come back down

to see them continue to resize until they disappear entirely.

And I think that gives us a really really clean mobile look that doesn't feel cluttered like it would

otherwise.

The hidden component is a pretty simple but really convenient and powerful piece of functionality that

the material UI team has added For us that I think make it really easy to flexibly and dynamically render

different content especially with the grid.

But I don't want to weave our photo completely blank.

I'm still actually going to want something in there for our mobile footer.

So let's go ahead and start adding our social media icons are links to the Twitter Instagram and Facebook

in the next video.