All language subtitles for 6. Using Menus - Styling

Now that we've actually got the menu hooked up for our application I want to go ahead and start styling

it to make it consistent with the look of the header as well as add a little bit of functionality for

managing which menu item we have selected.

The first thing that I want to change is when you hover over this menu the white background here we

definitely don't want something totally jarring and different like that and it would actually look a

lot more integrated if it was just the same color as this app bar.

So I think we want to go ahead and set that to our primary arc blue color but again since the menu is

built on top of other material UI components we can't just add the coloring to the menu itself.

The underlying component handling the menu in the background here is actually the paper component if

you want to know how I know that and how you can find that out for other material UI components if you

come up to the documentation.

And this is here still on components and then under navigation and menus and then you scroll all the

way down to our menu API and here you can scroll down and you'll see at the very bottom.

These for our CSX style sheet names and the rule names you can see the real name paper and that is the

styles applied to the paper component in the menu component so if we want to pass on styles to the paper

component in our menu from the API what we can do is come to the menu and instead of setting a class

a class name instead of doing this we're going to set.

Class is classes and we're going to set this equal to our brackets and inside of this an object with

the property paper and that is coming from our paper component and the name that we have right here.

This rule name.

So if we wanted to target the list we would use list but the paper.

And then we make the value of this whatever class we want to set.

So let's create classes from our classes object dot menu and of course that means we need to come up

above and inside of our styles object.

Let's create a menu menu style.

First things first of course is our background color and we'll set that equal to our theme dot palette

dot com in dot blue if we save this and then we come back over to our application and now we hover over

the services tab you see our blue background.

So that style is properly being passed down to the paper component.

But now we want to make sure the each menu item looks like the other tabs in the header we'll start

by actually setting a color here for the font of white which will set the font color for all of the

text inside of the entire menu.

And if we save this we can flip over and see that the text is now white now.

A few more things is I'm don't necessarily like how the menu is floating above the header.

I think the for this application it would look much better more integrated within it.

And so we can do that by coming down to our menu component and let's go ahead and here underneath all

the rest of the props and make sure you're on your menu components.

Let's give it an elevation of zero.

And this will change its default material UI elevation and drop shadow to these zero preset in the theme

which is obviously none so if we save this we'll now see you when we hover over the tab then our menu

looks perfectly integrated with the page and that is really I think a clean look of what we were really

going for.

So now we obviously just need to make sure that all of that text is styled correctly.

So what's come down to the first menu item and add a classes.

So we'll need to be passing the styles down here as well.

And here we'll set that equal to the route.

Make sure that's an all in an object the route class with a class's name of menu item again if you need

to know which components style to pass down directly to go and check the component API on the material

UI documentation page so now what's come up and create the menu items style and we'll do that.

Setting it equal to our theme theme.

And Dot typography Dot.

Tab.

Since all of these styles that we have for the rest of the tabs are already stored right there so you

can already start to see why we set these styles in our theme and how that's already going to begin

making our layouts more consistent and convenient.

We'll go ahead and save that.

And now if we come over and hover over we see that these services tab here at the top is looking good.

And that's because we haven't actually set the class names on any of the other menu items yet.

So let's scroll back down here and copy our classes route menu item and go ahead and put that on all

of the rest of the menu items as well.

Then you can save that and you'll see now when we hover over the all of the tabs look exactly like the

rest of the tabs in the header and other small detail that we can change though is the the rest of the

tabs and when they are not active you see that they're a little darker here.

They're not as bright as the highlighted tab and that is actually a lower opacity that is being set.

So I think that if we wanted our menu items to maintain that same look and feel as the rest of the header

we could go ahead and do the same effect here to do this.

We can go ahead and come back up to our menu items style which we already have set and we can add an

ampersand colon hover property and set this equal to an object that contains these styles we want to

apply when a menu item is being hovered over here.

I would like to set an opacity of 1 and then outside of the hover underneath our tab let's set an opacity

of zero point seven.

And I actually have gone in and checked and this is the same opacity being set on the other tabs.

So if we go ahead and we save this this is going to set a lower opacity for all of the tabs in less

we are hovering over it in which it will receive the full brightness.

So if we come over here and hover over we can now see that the rest of those tabs have the same look

as all of the rest.

And now when we hover over it it gets that highlighted to look giving it an extra interactive feel one

last tiny stylistic choice that I personally would like to make here is how at the bottom of the menu

you see we have these rounded corners.

I actually would like it to just be sharp and I think that that kind of is more consistent with the

feel of my application.

So if we go ahead and on our menu style let's go ahead and set a border radius of 0 pixels and that

will just make sure that now if we hover over it we have those sharp corners which I think I just kind

of like a little bit more this looks really good now though.

And if we come down and we switch between all of the different pages you can see that the navigation

still works as well as a hovering.

And the services tab is being maintained as active.

The only thing that could make this better though is if we actually were able to keep track of which

menu item we have selected.

So if we're on the Web site development page when we hover over this there should maybe be a little

indicator that the Web site development page is already active.

So let's go ahead and set that up in the next video.