All right, so we can change the location now, I would want to change the values depending on which
button hovering over.
So essentially once my mouse enters the button, then, of course, I would want to display different
values as well, because, of course, that represents a different page.
And then remember when we were setting up that functionality in the number, we also pastorate?
Correct.
We passed that page in the open submenu.
So now, of course, in the context, we would want to handle that.
Now, I already imported the suppling story from Beira, so that is already there.
And I know I showed you already multiple times.
But in the data, what do we have?
We have array of objects and then we have the page property.
So now, of course, I would want to use that value that I'm getting from the button and then get the
correct page, whether that is product developers or the company.
Let's go back to the context and that in here, I named this text because there's going to be a state
value by the page.
So let's go with Consed and I'll call this page and then set the page.
And that one is equal to a used state and then by default it is going to be an object with two values.
So we pass in the object page will be empty string and then we have links which is going to be an empty
array.
And you can see that I have pretty much the same structure.
The thing is that of course there's no values in the sub, but you'll find values in here.
There are no values.
So here, when I open up the submenu, I also can get the correct page so I can go with const and then
page is equal to subclans, whatever data I have in there and I would want to use the find method.
So with one method, I'm just going to say, get me the page that matches the page that is coming from
the bottom.
Correct.
Now I'll call this a link just because I'm running out of names here and I'll say if Lync page is equal
to the text.
So essentially if the text that is coming from the button matches my page value in my data, then of
course that is my page.
And of course I can go set page is equal to page.
Good.
So we have coordinates, we have a page and then we also open up the submenu.
Now of course we need to handle that in the submenu so we can navigate back to the submenu.
And this is going to be interesting where I would want to get the page.
So let's go back.
And you're not going to go really bad because we still need to pass in the page.
So let's start with that.
Let's pass in our state value and then in the submenu, when we use that global context, I also would
want to grab the page and I'll write away the structure of, say, page.
And since I know that it is going to be an object.
Correct, if we double check it, there it is.
It is an object with these values on the page and then the links.
So what I can say, yeah, grab me the page.
But more specifically from page, I'm looking for page and then comma links.
So those are the two values that I'm getting from my state.
Beautiful.
And now where I have the inside.
Now of course I would want to iterate over those links.
Correct.
So first we can just start by displaying the page.
Of course, that is the value that I can access right away.
And of course, let's check it out.
So I'm going to navigate back to my project and then I have a big, fat error where it says Page is
on the.
Let's see.
So we have it in the context.
Least we should, because when we open up the menu, we have the text.
So let's see in no, maybe I messed that up on a property and yes, of course I did.
Where I have the page, it should be a different target.
Text content, not context.
Right?
Not as the property name my bad.
And now, of course, we should see properly our page.
So as I have our notice, it tells me.
All right, that is a product page and I have developers page and then I have the company.
And what's really left is just iterate over the links.
So I'm going to navigate back to my submenu.
I think we are in good shape.
Of course, the links are here.
That is Meira.
So right after the heading for I'm going to go with a div in this case, there's going to be a bit more
logic there because I also want to change the amount of columns that I get the.
Standing on the wings, if you check out data, some have three.
Some have four and some have two wings.
And what I would want is dynamically change the width of my submenu depending on that.
So set up my class.
Then again, we're going to set up our interpellation and the template strand.
And for the time being, we'll just say submenu and then hyphen center.
And our initial value will be column number two.
So that's the class we're adding.
But eventually, of course, we'll check what is the length of.
All right.
And then depending on that, we'll change those values.
So instead of this div.
I'm going to go with my legs map over and that as far as the return, I'm going to go with a simple
link.
But before we set up anything, I'm going to have two parameters.
One for link, one for index.
Then I'll the structure, those properties out.
And again, the properties that I'm looking for are here.
Label icon and then you are.
So we say label icon and then you are not just coming from my link.
And now like I just said, I would want to return to link somewhere, say like so simple link, not
a reactive router one we're going to go with index will have the H.F. that points to the URL and then
inside of this link I'm going to go with Icon and I'm also going to go with a label.
So once I save one, I hover over my buttons and nicely display not only the page but also the links
that relate to that page.
But like I said, depending on the amount of links, I also would want to change the amount of columns.
And in the process, of course, the width of my submenu.
And the way I can do that is when I'm setting up my years of notice.
I have my links.
So what I could do is say, you know what, there's going to be some kind of state value.
So that's my global context.
This is my container.
And also will set up a state value, will say columns like so, and then we'll have set columns as well.
And that is equal to your state.
And by default, we have this column number two.
So that's my default value put in here.
Of course, now I can change it to the interpolation and I'm looking for three columns, state value.
So then in the years of fact, once the data changes, I also would want to change this state value
for the columns.
Now, by default, I'll set it back to two.
And that is important because otherwise you might run and some bugs.
So we're going to go with some columns and by default we'll set it equal to column two.
That is my default one.
And then right after I set up in one style, I'm going to say if lengths, length so length of mirror
is equal to three, then I'm just going to change it to a different class.
Now, of course, these classes are already set up in access.
If you want to check them out, go ahead and just Google them, meaning just use the search and you'll
find these classes.
And if the length is bigger than three, then I would want to add a column for class.
So we'll go with F and then links like.
It's bigger than three.
Then, of course, we'll have four Kamale, so we go sitcoms and the class name is Collum Hyphen for
now.
There's some dependencies that I would want to add over here.
So I think I'm going to go with location and also if the links value changes like so and now it's the
start out, we're going to navigate to a bigger screen and I'll see if we have three links.
Then, of course we have our three commonwealth.
If we have more than three and we have four Kammler and then eventually if we have only two items and
by default we'll have a two come.
So now, of course, the only thing we need to worry about is hiding the submenu at some point, because
at the moment, yeah, we hover over the buttons and then we display them.
But also at some point, of course, we would want to hide it as well.