1
00:00:00,150 --> 00:00:07,680
All right, so we can change the location now, I would want to change the values depending on which

2
00:00:07,890 --> 00:00:09,870
button hovering over.

3
00:00:10,050 --> 00:00:16,140
So essentially once my mouse enters the button, then, of course, I would want to display different

4
00:00:16,140 --> 00:00:20,620
values as well, because, of course, that represents a different page.

5
00:00:21,090 --> 00:00:27,800
And then remember when we were setting up that functionality in the number, we also pastorate?

6
00:00:27,900 --> 00:00:28,350
Correct.

7
00:00:28,590 --> 00:00:31,920
We passed that page in the open submenu.

8
00:00:32,190 --> 00:00:34,950
So now, of course, in the context, we would want to handle that.

9
00:00:35,280 --> 00:00:41,340
Now, I already imported the suppling story from Beira, so that is already there.

10
00:00:41,580 --> 00:00:44,310
And I know I showed you already multiple times.

11
00:00:44,310 --> 00:00:46,590
But in the data, what do we have?

12
00:00:47,010 --> 00:00:50,610
We have array of objects and then we have the page property.

13
00:00:50,940 --> 00:00:57,150
So now, of course, I would want to use that value that I'm getting from the button and then get the

14
00:00:57,150 --> 00:01:01,830
correct page, whether that is product developers or the company.

15
00:01:02,170 --> 00:01:08,010
Let's go back to the context and that in here, I named this text because there's going to be a state

16
00:01:08,010 --> 00:01:09,090
value by the page.

17
00:01:09,490 --> 00:01:15,510
So let's go with Consed and I'll call this page and then set the page.

18
00:01:15,690 --> 00:01:23,640
And that one is equal to a used state and then by default it is going to be an object with two values.

19
00:01:23,880 --> 00:01:30,780
So we pass in the object page will be empty string and then we have links which is going to be an empty

20
00:01:30,780 --> 00:01:31,140
array.

21
00:01:31,470 --> 00:01:34,730
And you can see that I have pretty much the same structure.

22
00:01:35,190 --> 00:01:39,780
The thing is that of course there's no values in the sub, but you'll find values in here.

23
00:01:39,990 --> 00:01:40,820
There are no values.

24
00:01:41,190 --> 00:01:50,130
So here, when I open up the submenu, I also can get the correct page so I can go with const and then

25
00:01:50,130 --> 00:01:57,830
page is equal to subclans, whatever data I have in there and I would want to use the find method.

26
00:01:58,200 --> 00:02:06,360
So with one method, I'm just going to say, get me the page that matches the page that is coming from

27
00:02:06,360 --> 00:02:06,770
the bottom.

28
00:02:06,900 --> 00:02:07,350
Correct.

29
00:02:07,650 --> 00:02:15,600
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

30
00:02:15,600 --> 00:02:16,350
to the text.

31
00:02:16,720 --> 00:02:24,330
So essentially if the text that is coming from the button matches my page value in my data, then of

32
00:02:24,330 --> 00:02:26,010
course that is my page.

33
00:02:26,250 --> 00:02:31,230
And of course I can go set page is equal to page.

34
00:02:31,500 --> 00:02:31,820
Good.

35
00:02:32,190 --> 00:02:36,760
So we have coordinates, we have a page and then we also open up the submenu.

36
00:02:37,110 --> 00:02:43,100
Now of course we need to handle that in the submenu so we can navigate back to the submenu.

37
00:02:43,380 --> 00:02:47,430
And this is going to be interesting where I would want to get the page.

38
00:02:47,730 --> 00:02:48,930
So let's go back.

39
00:02:48,930 --> 00:02:53,550
And you're not going to go really bad because we still need to pass in the page.

40
00:02:53,850 --> 00:02:54,960
So let's start with that.

41
00:02:55,290 --> 00:03:03,270
Let's pass in our state value and then in the submenu, when we use that global context, I also would

42
00:03:03,270 --> 00:03:07,710
want to grab the page and I'll write away the structure of, say, page.

43
00:03:07,890 --> 00:03:09,960
And since I know that it is going to be an object.

44
00:03:10,170 --> 00:03:13,140
Correct, if we double check it, there it is.

45
00:03:13,530 --> 00:03:18,760
It is an object with these values on the page and then the links.

46
00:03:19,170 --> 00:03:21,840
So what I can say, yeah, grab me the page.

47
00:03:22,050 --> 00:03:27,380
But more specifically from page, I'm looking for page and then comma links.

48
00:03:27,720 --> 00:03:32,810
So those are the two values that I'm getting from my state.

49
00:03:33,180 --> 00:03:33,690
Beautiful.

50
00:03:34,080 --> 00:03:36,290
And now where I have the inside.

51
00:03:36,300 --> 00:03:40,800
Now of course I would want to iterate over those links.

52
00:03:40,800 --> 00:03:41,220
Correct.

53
00:03:41,500 --> 00:03:44,940
So first we can just start by displaying the page.

54
00:03:45,540 --> 00:03:48,830
Of course, that is the value that I can access right away.

55
00:03:49,500 --> 00:03:51,030
And of course, let's check it out.

56
00:03:51,220 --> 00:03:58,470
So I'm going to navigate back to my project and then I have a big, fat error where it says Page is

57
00:03:58,470 --> 00:03:59,020
on the.

58
00:04:00,360 --> 00:04:01,090
Let's see.

59
00:04:01,230 --> 00:04:03,570
So we have it in the context.

60
00:04:03,860 --> 00:04:07,950
Least we should, because when we open up the menu, we have the text.

61
00:04:08,310 --> 00:04:13,470
So let's see in no, maybe I messed that up on a property and yes, of course I did.

62
00:04:13,740 --> 00:04:16,830
Where I have the page, it should be a different target.

63
00:04:16,830 --> 00:04:19,590
Text content, not context.

64
00:04:19,840 --> 00:04:20,310
Right?

65
00:04:20,550 --> 00:04:22,970
Not as the property name my bad.

66
00:04:23,220 --> 00:04:27,150
And now, of course, we should see properly our page.

67
00:04:27,330 --> 00:04:29,580
So as I have our notice, it tells me.

68
00:04:29,580 --> 00:04:34,500
All right, that is a product page and I have developers page and then I have the company.

69
00:04:34,980 --> 00:04:38,550
And what's really left is just iterate over the links.

70
00:04:38,880 --> 00:04:42,150
So I'm going to navigate back to my submenu.

71
00:04:42,510 --> 00:04:44,030
I think we are in good shape.

72
00:04:44,400 --> 00:04:46,860
Of course, the links are here.

73
00:04:47,130 --> 00:04:48,210
That is Meira.

74
00:04:48,480 --> 00:04:54,390
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

75
00:04:54,390 --> 00:04:59,730
logic there because I also want to change the amount of columns that I get the.

76
00:04:59,830 --> 00:05:04,600
Standing on the wings, if you check out data, some have three.

77
00:05:04,950 --> 00:05:08,190
Some have four and some have two wings.

78
00:05:08,610 --> 00:05:14,810
And what I would want is dynamically change the width of my submenu depending on that.

79
00:05:15,090 --> 00:05:16,210
So set up my class.

80
00:05:16,370 --> 00:05:20,700
Then again, we're going to set up our interpellation and the template strand.

81
00:05:21,030 --> 00:05:26,550
And for the time being, we'll just say submenu and then hyphen center.

82
00:05:26,910 --> 00:05:30,360
And our initial value will be column number two.

83
00:05:30,720 --> 00:05:32,070
So that's the class we're adding.

84
00:05:32,280 --> 00:05:35,850
But eventually, of course, we'll check what is the length of.

85
00:05:35,850 --> 00:05:36,380
All right.

86
00:05:36,570 --> 00:05:39,230
And then depending on that, we'll change those values.

87
00:05:39,570 --> 00:05:41,100
So instead of this div.

88
00:05:42,070 --> 00:05:48,880
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

89
00:05:48,880 --> 00:05:49,210
link.

90
00:05:49,330 --> 00:05:52,630
But before we set up anything, I'm going to have two parameters.

91
00:05:52,640 --> 00:05:54,790
One for link, one for index.

92
00:05:55,120 --> 00:05:57,820
Then I'll the structure, those properties out.

93
00:05:58,110 --> 00:06:00,490
And again, the properties that I'm looking for are here.

94
00:06:00,760 --> 00:06:03,160
Label icon and then you are.

95
00:06:03,730 --> 00:06:09,730
So we say label icon and then you are not just coming from my link.

96
00:06:09,970 --> 00:06:16,330
And now like I just said, I would want to return to link somewhere, say like so simple link, not

97
00:06:16,330 --> 00:06:23,380
a reactive router one we're going to go with index will have the H.F. that points to the URL and then

98
00:06:23,380 --> 00:06:29,910
inside of this link I'm going to go with Icon and I'm also going to go with a label.

99
00:06:30,100 --> 00:06:38,590
So once I save one, I hover over my buttons and nicely display not only the page but also the links

100
00:06:38,830 --> 00:06:40,440
that relate to that page.

101
00:06:40,780 --> 00:06:47,470
But like I said, depending on the amount of links, I also would want to change the amount of columns.

102
00:06:47,770 --> 00:06:51,730
And in the process, of course, the width of my submenu.

103
00:06:52,120 --> 00:06:57,250
And the way I can do that is when I'm setting up my years of notice.

104
00:06:57,250 --> 00:06:57,960
I have my links.

105
00:06:58,750 --> 00:07:03,930
So what I could do is say, you know what, there's going to be some kind of state value.

106
00:07:04,360 --> 00:07:06,420
So that's my global context.

107
00:07:06,430 --> 00:07:07,900
This is my container.

108
00:07:08,110 --> 00:07:17,320
And also will set up a state value, will say columns like so, and then we'll have set columns as well.

109
00:07:17,530 --> 00:07:19,120
And that is equal to your state.

110
00:07:19,270 --> 00:07:22,480
And by default, we have this column number two.

111
00:07:22,690 --> 00:07:24,850
So that's my default value put in here.

112
00:07:24,850 --> 00:07:31,050
Of course, now I can change it to the interpolation and I'm looking for three columns, state value.

113
00:07:31,510 --> 00:07:39,880
So then in the years of fact, once the data changes, I also would want to change this state value

114
00:07:39,880 --> 00:07:40,540
for the columns.

115
00:07:40,870 --> 00:07:43,510
Now, by default, I'll set it back to two.

116
00:07:43,780 --> 00:07:48,180
And that is important because otherwise you might run and some bugs.

117
00:07:48,550 --> 00:07:53,920
So we're going to go with some columns and by default we'll set it equal to column two.

118
00:07:54,220 --> 00:07:55,390
That is my default one.

119
00:07:55,690 --> 00:08:04,600
And then right after I set up in one style, I'm going to say if lengths, length so length of mirror

120
00:08:04,840 --> 00:08:08,510
is equal to three, then I'm just going to change it to a different class.

121
00:08:08,890 --> 00:08:12,330
Now, of course, these classes are already set up in access.

122
00:08:12,520 --> 00:08:18,130
If you want to check them out, go ahead and just Google them, meaning just use the search and you'll

123
00:08:18,130 --> 00:08:19,420
find these classes.

124
00:08:19,840 --> 00:08:27,090
And if the length is bigger than three, then I would want to add a column for class.

125
00:08:27,460 --> 00:08:31,570
So we'll go with F and then links like.

126
00:08:32,410 --> 00:08:35,380
It's bigger than three.

127
00:08:35,710 --> 00:08:42,970
Then, of course, we'll have four Kamale, so we go sitcoms and the class name is Collum Hyphen for

128
00:08:43,420 --> 00:08:43,840
now.

129
00:08:43,930 --> 00:08:47,110
There's some dependencies that I would want to add over here.

130
00:08:47,710 --> 00:08:56,760
So I think I'm going to go with location and also if the links value changes like so and now it's the

131
00:08:56,770 --> 00:09:03,060
start out, we're going to navigate to a bigger screen and I'll see if we have three links.

132
00:09:03,430 --> 00:09:06,440
Then, of course we have our three commonwealth.

133
00:09:06,790 --> 00:09:14,380
If we have more than three and we have four Kammler and then eventually if we have only two items and

134
00:09:14,380 --> 00:09:17,070
by default we'll have a two come.

135
00:09:17,710 --> 00:09:23,190
So now, of course, the only thing we need to worry about is hiding the submenu at some point, because

136
00:09:23,200 --> 00:09:27,220
at the moment, yeah, we hover over the buttons and then we display them.

137
00:09:27,640 --> 00:09:31,350
But also at some point, of course, we would want to hide it as well.