All language subtitles for 2. Menus Overview

In this video we're really going to star and polish off the header by adding a cool feature that I think

is pretty common in a lot of headers.

This is the feature where when you hover over a certain tab in our case such as the services tab it

then will open up a menu displaying the further pages within that material UI provides a menu component

for us to help with a lot of the functionality behind this such as showing and hiding the menu styling

the menu items and keeping track of which menu item is selected so just like before we're going to go

ahead and jump in to the documentation to see how they set this up and how this provided functionality

works.

And then in the next video we're going to jump in to implementing it in our application.

All right.

And here we are at the material UI documentation page under components navigation and menus.

And here you can see their definition of a menu is that it displays a list of choices on temporary surfaces.

So that's the technical way of basically saying it appears for a little bit and lets you do something

and then it disappears.

This is a very common component and task not only in headers like we'll be using it for but all over

all sorts of different applications if we start and take a look at their simple menu we can see that

if we press this button they have a little just text button here for us and we go ahead and press that

bam we've got a little menu.

And so this gives us a little styling for our hovering over each option as well as when you select an

option it then it closes the menu.

This is probably extremely familiar to you.

I'm sure you can think of a billion different times that you've seen this or interacted with menus.

And so obviously it's pretty useful to have if we come and take a look at the source code required for

this.

We can see at the top they are main important imports are the menu and the menu item and then they just

use a button down here to actually trigger opening the menu so you can see here the implementation is

very simple.

It is just a menu component here wrapping all of our menu items each menu item has in on click prop

which then is pass the handle closed function.

And if we look up here we can see that all that does is it takes and uses are set anchor element hook

to Noel So what's going on there.

As you can see up here at the top we set an anchor element and a set anchor element react hook and default

that state to know and the anchor element is then passed to the menu as a prop the anchor element essentially

tells the menu where to show itself on the screen and which component to latch on to on the DOM whether

or not the menu is being displayed is controlled by the open prop and that creates a boolean out of

the anchor element.

So if there is an element there that it is attached to the boolean call will result in true.

Whereas if the anchor element is null the boolean function will result in false when the anchor element

is present in the boolean function returns a true creating a true value for our open prop the menu is

displayed and you can see here on close set to the handle closed function which is setting our anchor

element to normal which then creates this boolean function to return a false value setting of the Open

Value to false and then closing the menu.

You see we have the handle close for the on close prop on menu as well as for the on click prop on menu

items.

Because whether we click on a menu item and navigate to a new page or select a new option we then want

the menu to be closed or if we simply closed the menu by clicking on the button again which triggers

the on clothes handler on the menu we also just want the menu to close this other prop here.

Keep mounted essentially tells the children elements of the menu in this case all of our menu items

to stay mounted on the DRM whether or not it's actually visible on the screen.

This could be useful for search engine optimization or other situations where you don't actually want

that information or data to disappear.

The other prop on menu is this idea and that is provided the simple menu string.

And the reason we pass that I.D. is so there on our button up here which actually triggers the showing

of our menu on the button we set some Aria controls which again are for web accessibility and people

who are browsing the internet on specialized devices need to be told if there's a menu popping up on

the screen or not.

So that it can read off the options to that effect.

We set the RBA controls equal to the menu item that is managing or that the button is triggering.

In other words.

So that is why we set the same string of simple dash menu both for the RBA controls on the button as

well as for the idea on the menu linking the two together.

The second part in that process is the RBA Dash has pop up equals true prop which again we just set

to make sure that any screen reader or other specialized devices are aware of the fact that this button

is triggering a pop up menu the last step to this of course is the actual on click handler where we're

calling the handle click function.

This is where the Click event is being passed through to our function and we use set anchor element

to set the event dot current target which specifies the element that we have selected and sets that

to our anger elements state which is then updates the menu to be anchored to the selected element.

In this case our button.

So I think that that makes pretty good sense.

It's not too crazy.

We're really just specifying on the button the on click handler to set our anchor element to the button

when we click it which then opens our menu over that element and we can then select an element which

triggers the on click handler on the menu items to close the menu.

So this is just simply opening and showing the menu.

But if we want to add a little bit of extra functionality to it.

We'll actually be using the selected menus.

We are going to be using this in our application and it allows you to keep track of which option is

currently selected.

You can see it not only do we have the hover effect for the other options but then we have this darker

styling for the one that is already selected.

So if we go we can choose another one and you see it is keeping track let's take a look at how they're

doing this with the source code and you can see if we scroll down here and if we keep going down to

where they have the menu here at the bottom you can see what they're doing.

So here is our opening menu component with all of the familiar props from the last example but now instead

of rendering each menu item explicitly they're actually mapping over a list of the different menu options.

This allows them to keep track of the index of which option they are currently iterating over and managing

a selected index piece of state to compare to the index of the currently iterated menu item and determine

whether or not it is the item selected let's actually come up and take a look at the functions up here

and hopefully this will make a little more sense than just talking about it.

And so you can see that we have our anchor element and set anchor element state like we did in the previous

example just telling the menu where to render itself.

But now we also have the selected index and the set selected index state for managing which item we

have clicked on.

So now we see our handle menu item click function that takes an event in an index and sets the selected

index to whichever index is provided while also then emptying the anchor element and clearing the menu

off the screen.

So if we come down here and we take another look at this you can see that when a menu item is clicked

so on click it takes that event back click event and it passes it to our handle menu item click hook.

And like I said earlier since we are now iterating through a list of menu items we also have access

to the current index of each menu item and we can pass that as well to determine whether or not that

is the item we've clicked on before that index past to the on click handler is then used to set our

selected index at the state.

And once that updates then the selected prop on the menu item will update to determine whether or not

the selected index piece of state is equal to the currently iterated index of the menu item to enable

this approach.

They had to come up here and define an array of options with each element in the array or being the

string that they want to have displayed for the menu item.

I think that that makes a lot more sense now.

When you see this knowing the each of these menu items is actually being iterated over and having the

seeing elected option being managed we are going to be implementing this in our application.

So if that still seems a little confusing don't worry.

I think it'll make a lot more sense once we go through and hook it up.