So our functionality somewhat works once we rendered the at the moment, we hover over one of the buttons,
of course we can see the submenu.
Now there are two or maybe I would say even three issues with that.
So first, we would want to display only the links that belong to that page.
That's number one.
Now, second, also, we don't want to change the width depending on how many links we have.
And third, notice how we're changing the location of the submenu.
So at the moment, yeah, we hover, we show something, but it's not really dynamic.
Now, I'll show you why it is not dynamic as far as the regular says.
So in here, let's look for submenu and you'll notice that, yeah, it is displayed, it has position
absolute and it has some kind of values.
Now, what I would want is when I hover over the button, not only I would want to get which button
there is, whether that is product developers and company.
And then of course, I would want to get only the substance, but I also would want to get the position
of the button.
This is important because I want to place that submenu right in the center of that button.
That's why, like I said, when we were setting up the function in the number, it was somewhat simple
in the beginning.
But of course, we're going to make it more complicated.
And first, what I want is just to get that target.
So in order to get that, I would want to go with a one target.
So if we go with E and Target, you'll notice that in a console, by the way, of course, we need to
do having a setup, otherwise it won't make sense.
This will point to a button.
So as I'm having notice, the value is changing.
Now, submenu, of course, stays here the way it is, but every time my mouse moves on to a button,
I can see a different value.
And of course, this is the value that I'm looking for, because from here I would want to grab the
text and I would want to grab also the coordinates for the button.
And then once I've got those, then of course I'll dynamically change two values in the submenu.
I'll change which links this plan and also the location.
So what I would want here is the first set up text, so I'll get the page.
So I'm going to go with const online page.
So that is my variable name and I'm going to go with a random target.
And then in order to get the text that is inside the button, I'm going to go back to Joske plant and
I'm going to say text content.
So this is going to give me a page, whether that is developers, product or company.
And then also I would want to get that location.
And then remember, in order to get that location, we need to run that, get Bohning client right.
So we go with const and then temp and I'll call this PTM, and that is equal to one target.
Target, and then we're looking for get this function name is somewhat annoying because it is really
long and very hard for me to pronounce, so get bounding client direct.
And now I want to get to things.
I would want to get the center of the button and also the bottom of the button.
And I'm going to start simply by logging the temp VPN.
And of course you'll see in a console that again, once we have our notice, we're getting back these
objects.
So this tells me the left position, the right position, the bottom, as well as the.
So what I would want is to get the middle.
And in order to calculate that, I would need to sum up left and right and divide by two.
And as far as the bottom, I would need to get the value, but since I would want to place my submenu
three pixels on top of the button and that is done on purpose.
And I'll show you at the very end once we're trying to hide the submenu.
That's why I say minus three.
So only two values that I'll pass eventually into the submenu want to center, so say center.
And that one is equal to a button because this gives me that object that I'm looking for left then plus
time button and then.
Right.
And I would want to divide that by two.
So this is going to give me the center of the button so I'm not where I need to move my submenu.
That's number one.
And number two, I would want to get that bottom several seconds and then bottom.
And that one is equal to a temp bottom.
So the bottom value and then a minus three since I would want to lift my submenu three pixels up.
And now instead of just calling the open submenu, I would want to pass these two values.
I would want to pass in the page so I know which links to get.
And the second thing is an object with two values with the center and then of the bottom.
So once we call that push, we would need to navigate back to the context just.
And we would need to fix our open submenu because at the moment we're not handling that.
So we have open submenu, beautiful.
And now I'm just going to say that it is looking for two things.
It is looking for a text and it is looking for the coordinates.
So we say here coordinates.
So now none of these things we haven't set up yet.
So I have text and I have the coordinates and I'll have to set up state value.
And that's that value will be location.
So I'll have contact.
I'll start with location and then set the location and it is going to be an object, I'll say use state.
And then since it is going to be an object by default, I will also set it up as object.
So not once I get my text and coordinate.
Not only I would want to open submenu, but I would want to pass in those coordinates.
So say set a location and line whatever I'm passing in as far as the coordinates and the last thing,
of course, in the submenu now I would want to grab those values and then I would want to add the inline
success where of course I change the location of the submenu.
So let's navigate back.
That's the third missing piece in our setup where we say that not only I would want to have a IS submenu
open, by the way.
I need to pass the Senate.
I need to say location, I want to pass it on and then of course I will destruction.
So I'll say location.
And then what I'm going to do here is every time that location value changes, I would want to run usufruct.
So set up my usufruct over here and I'll have my dependancy.
Right.
I'll say every time location changes, I would want to run it.
And then, of course, I would want to set up also a huge rep because I would want to access my submenu
container.
So let's call the container consed container is equal to my use, Merav, and I'll pass in A..
And of course where I have the aside, I'll need to add my roof and that one will be equal to my container.
And then when I call the effect this is where I would want to get that container because I would want
the inline success.
So I'm going to go with some kind of variable or call this submenu.
Now that is equal to my container and dot current.
So that gets me the node and then let's do the structuring where from the location I would want to get
center and bottom since I know that it is an object, so center and then bottom and that is coming from
the location.
So what's the value that is coming from the context?
And lastly, let's do that in line.
So yes, that's where we go with submenu.
So that holds, of course, my node and we go with style and line as far as the location would go with
left and in here, we would want to have interpellation where we research center and then pixels.
So this is just going to set it up in the center and then also vertically would want to go with submenu,
submenu style and on top.
So how many pixels from the top?
And of course now we pass in that bottom value where we go with bottom and then pixels again.
And what you'll notice that every time your mouse moves onto the button.
Notice how the submenu is changing nicely location because we grab the coordinates for the button and
then notice we're changing the location of the segment.
Again, we're not changing any values yet.
That is coming up.
But at least what's really cool is that by default, yeah, it is setting position absolute, but now
we're dynamically checking the values for the button.
And then also every time that value changes, well, we also change the location of the submenu.