All language subtitles for 4. Using Menus - Setup

Now that we understand how the menu item actually works let's work on setting it up for our services

tab so remember in app dot J.S. when we had set up our routes we have the custom software mobile apps

as well as the website's path all of these are the different services that we have listed and these

are what I want to appear as links in the menu that we're going to create on the services tab so whenever

I hover over the services tab I expect this menu to appear allowing me to navigate to any of the pages

as well as these services page which will have a set of icons for all of the pages so we can go ahead

and close out of the app dot J.S. file and inside of header dot J.S. here at the top underneath are

link for reactor outer let's import the menu from app material UI slash core slash menu and then also

import the menu item from material that's why such core slash Menu menu item.

Next we're going to want to scroll down and here underneath our value hook we want to create the anchor

element and set anchor element hooks using the use state with a default of no remember from the documentation

that this is the state which is going to store whichever component we clicked on and where we want the

menu to be rendered so eventually this state is going to contain the services tab which is then or the

menu will be rendered so let's go ahead and keep setting up some of the other dependencies for this

we'll go ahead and create the constant open and a set open.

And this is going to determine the visibility of the menu.

So whether or not the menu is actually being displayed on the screen or not again we'll use state but

we will set this to a default of false now if we come down underneath the handle change function we're

going to create a another function.

But this time we're going to call this handle click and said this equal to a function taking our event

which in this case will be the Click event containing all of the information about where we have just

clicked on the screen and we will make this an arrow function and inside of here we're going to use

a set anchor element to tell our menu where we want it to be rendered and we can find that out on the

event dot current target.

So that is going to contain the element that has just been clicked on.

And if we pass that to the set anchor element that will tell the menu where we want it to be rendered

after the menu actually knows where to render itself.

We need to actually tell it to be rendered by setting open to true now or we need to come down and set

the reverse of this for when the menu is closed.

So we're going to call this handle close which will also take an event for this base in there and we'll

set it up again as an arrow function.

But this time we're going to set the anchor element back to the default of normal since the menu is

closed and we do not need it to be displayed anywhere.

And after we get rid of the anchor element we also need to set the open to false which will again tell

the menu to close that should be all we need to get started.

So let's scroll on down to where we can actually start using some of these properties here on the tab

for services.

The first thing we need to do on these services tab component is set R Aria owns equal to a ternary

statement which is going to check the anchor element and if we have an anchor element because remember

if the menu is closed then the anchor element will be null.

So if we do have an anchor element and that is true then we want to set the area owns property equal

to our menu name.

In this case we can call it anything we'd like but I'll just stick to calling it simple Dash.

Menu if we do not have an anchor element.

So if the ternary statement falls to the false case then it will simply pass undefined which is equivalent

to not setting the property at all.

We don't want to set it to just an empty string or something like that because then it could be misinterpreted

as having been left out.

The second Aria property that was necessary is the aria Aria has pop up pop up.

Make sure you have that correct.

And that is equal to another ternary statement of the similar structure anchor element.

And if we have that then we are going to set this to true.

Otherwise we'll set this to undefined so that it does not appear just like the other property now for

the tab to actually display the menu.

Remember we need to call our handle quick function which will set the current target.

And at first we're going to set this up a certain way so that I can show you guys something and then

we're going to fix that and do it the way that I actually would like.

So let's go ahead and we'll try this out by setting on these services tab in on click function of handle

click.

Now we actually need that click event in there as well.

So we need to make this in Arrow function taking event as a prop and then returning the handle.

Quick call with the event passed in we can actually go ahead and remove these parentheses over here

since it's just one input and that should be enough for me to demonstrate what I want.

Well let's now go down underneath our estimate button and we're going to create our menu component.

Remember the first prop that we need is the I.D. passed of a simple menu to match the I.D. that we specified

for the aria owns property on the tab where it will be appearing and then we specify the anchor element

prop set to our anchor element state value we'll do the same thing for the open property setting it

to our open the state value and then we'll set R on clothes handler equal to our handle close.

Function this does not need the event passed through to it because it is simply setting the anger element

back to normal can go ahead now and close off the menu component and open it up.

And on the inside.

Let's start making our first menu item.

Component on the menu item.

Let's go ahead and set in on click handler equal to the handle.

Close function and inside of the menu item tags we'll write the first service we want to list which

is a custom software development let's go ahead and copy this menu item and then we'll come down and

paste this two more times one for the mobile app mobile app development and at the bottom.

The website development tab with all of this set up.

Let's go ahead and save and make sure that your development server is still running and we'll go ahead

and see where that gets us.

So let's save and I think I just need to refresh my page to get it started again.

And so if we come up to the services tab and we go ahead and click it we can see our menu appear inside

the menu.

We see each of our menu items and they're already getting the appropriate styling for the hover effect

but right off the bat we can see a couple of problems first is that the services tab itself is actually

being covered up so there's no way for me to actually press the services tab underneath there because

it is being covered up with the tabs displayed I really don't think that that is the functionality or

look that we really want.

And on that note we also if you notice have to click on the tab for it to appear ideally it should appear

just by hovering over the tab and not by clicking on it.

We can go ahead and fix that and come over to our tab component and the on click that we set up that

I said wasn't the best way of doing things.

Well we're going to change that to an on mouse over Prop and that is going to do exactly what it sounds

like and it's going to trigger the event and set our anchor element any time the mouse hovers over the

services tab instead of having to be clicked.

Let's go ahead and save this and take a look at how that works and if we come over now and we hover

over the services tab you can see the menu pop up.

Now if we leave well now the menu just kind of hangs there because we actually have to click off of

it for the menu to disappear now and that's definitely not ideal because normally when you hover over

a menu like this when you move the mouse a way from it is going to close the menu as well.

Now the way we have to solve this actually is not quite as straightforward as you would expect but if

you come down to the menu component you'd think that maybe here or even maybe on the services tab itself

that you could just add in on mouse out property or something like that.

But the component that you actually need to target to be able to do this is the menu list component.

And if you remember when I walked through the menu component documentation at the bottom where it says

API it shows you that the menu component is built on top of many other components.

One of those being the menu list this base material UI component is what we actually need to target

if we want to close our menu when the mouse leaves it material UI provides a way for us to do this and

many components have similar functionality where we can add a menu list props prop to the menu component

and we set this equal to a javascript function with an object inside and actually set the on mouse A

we've prop to our handle close function this then sets the on mouse leave prop on the base menu list

component so that we can properly track the right element if we go ahead and we save this and the screen

refreshes we can come over and hover over to see our menu appear and now if we hover off you can see

the menu disappears.

So that is really what we wanted and I think is what is most typical for an app or pop up menu.