1
00:00:00,330 --> 00:00:06,840
All right, and I think we're going to start by setting up our number, just keep in mind that number

2
00:00:06,840 --> 00:00:14,160
is transparent and what that means is that we'll have to add a hero so we can see it better.

3
00:00:14,580 --> 00:00:18,840
So once we just add no, it's going to be kind of tough to see it.

4
00:00:18,840 --> 00:00:26,400
But then once the hero is going to be rendered as well, and of course, we will nicely see we not only

5
00:00:26,400 --> 00:00:32,850
because the number by itself is transparent, so I'll leave the hero the way it is.

6
00:00:33,090 --> 00:00:36,140
And what I'm looking for, of course, is the number.

7
00:00:36,480 --> 00:00:42,240
Now, I do want to quickly grab my global context just so I can speed this up.

8
00:00:42,600 --> 00:00:51,800
And then instead of the number, let's start by looking for two functions and then also one state value

9
00:00:52,060 --> 00:00:52,650
zone here.

10
00:00:52,680 --> 00:00:59,730
I would want to access the open side, more open side bar and then for reason for that is, of course,

11
00:01:00,000 --> 00:01:01,230
on a small screen.

12
00:01:01,470 --> 00:01:04,610
We're going to have this toggle button that toggles the sidebar.

13
00:01:04,920 --> 00:01:09,600
That's why, of course, I would want to have that function online.

14
00:01:09,600 --> 00:01:14,910
I would want to have a function to open and close the seven years ago.

15
00:01:15,330 --> 00:01:20,400
And I'm sorry that there's going to be one state where effectively we'll have three functions, we'll

16
00:01:20,400 --> 00:01:27,300
have open submenu and then also close submenu function.

17
00:01:27,570 --> 00:01:30,930
And all that is coming from use global context.

18
00:01:31,140 --> 00:01:34,200
And we try to invoke it as far as our return.

19
00:01:35,200 --> 00:01:44,680
We're going to go here with a last name off now, so let's set up now, let's add a class name and it's

20
00:01:44,680 --> 00:01:47,120
going to be equal to now.

21
00:01:47,530 --> 00:01:52,360
Eventually, there's going to be some more functionality, but not right now.

22
00:01:52,750 --> 00:01:53,890
But delete this one.

23
00:01:54,130 --> 00:01:58,960
And then instead of the knife again, we have a day for the class of nerve center.

24
00:01:59,200 --> 00:02:04,330
And then we're looking for the idea with a class of knive, Aitor over here.

25
00:02:04,690 --> 00:02:10,420
And then right next to the header, there's going to be on our list with a class of narrowings.

26
00:02:10,720 --> 00:02:16,000
Now, in this case, I'm not going to iterate over the links because these links are not coming from

27
00:02:16,000 --> 00:02:17,880
my data and they're not going to be links.

28
00:02:18,460 --> 00:02:21,330
They are going to be buttons, and that is done on purpose.

29
00:02:21,640 --> 00:02:25,190
So within an hour of heter, we're going to have a image.

30
00:02:25,250 --> 00:02:26,680
Let's outsource right away.

31
00:02:26,900 --> 00:02:29,050
And I have important in the file as well.

32
00:02:29,350 --> 00:02:30,330
So we have logo.

33
00:02:30,340 --> 00:02:34,040
It is coming from the images and I just need to serve quarter.

34
00:02:34,270 --> 00:02:35,350
So we go with logo.

35
00:02:35,350 --> 00:02:39,430
As far as the alternative, I'm going to go with it again.

36
00:02:39,430 --> 00:02:41,700
Coding or you know what, let's see.

37
00:02:42,310 --> 00:02:49,240
Here is the logo and of course got a stripe so that just a right stripe and we're going to add a class

38
00:02:49,240 --> 00:02:49,480
name.

39
00:02:49,630 --> 00:02:50,560
So class.

40
00:02:51,860 --> 00:03:02,870
Name and no one will be equal to, I believe, knive logo, so let's ARIADNI logo, let's save an artist

41
00:03:02,870 --> 00:03:04,220
that is our logo.

42
00:03:04,430 --> 00:03:04,860
Awesome.

43
00:03:05,150 --> 00:03:08,570
And still within us there will be setting up our toggle button as well.

44
00:03:08,570 --> 00:03:11,810
So button and then let's add some classes here.

45
00:03:12,200 --> 00:03:17,060
Last name, ETN and then Toggle Vitton.

46
00:03:17,630 --> 00:03:25,130
And on the click I would want to invoke open sidebar, which by the way is right away open by default,

47
00:03:25,280 --> 00:03:26,780
but of course eventually will change that.

48
00:03:26,790 --> 00:03:27,930
So on.

49
00:03:27,950 --> 00:03:31,540
Kaleck is equal to open sidebar.

50
00:03:31,820 --> 00:03:36,460
So once we click on a button, we should be able to open up the sidebar.

51
00:03:36,800 --> 00:03:44,240
And then of course, we're going to go with F.A.A. Barsh and that is the icon that will place inside

52
00:03:44,240 --> 00:03:44,840
of the button.

53
00:03:45,170 --> 00:03:47,040
And then I would want to work on Winx.

54
00:03:47,060 --> 00:03:48,320
So there is our button.

55
00:03:48,320 --> 00:03:54,140
Of course, once we click we open up the sidebar, which is open by default because it's just going

56
00:03:54,140 --> 00:03:57,710
to be easier while we set up the structure for the sidebar.

57
00:03:58,010 --> 00:04:03,290
And that instead of the links, like I said, we're not going to iterate over those links because they

58
00:04:03,290 --> 00:04:05,120
will be buttons at the end of the day.

59
00:04:05,450 --> 00:04:06,590
So allow.

60
00:04:07,550 --> 00:04:14,000
This item and then in here, let's add a button, let's set up a class name, and this one will be a

61
00:04:14,000 --> 00:04:22,040
link between and eventually there's going to be some functionality, same like I have already, General

62
00:04:22,040 --> 00:04:24,250
NAV, but not the moment.

63
00:04:24,440 --> 00:04:25,220
And then let's.

64
00:04:25,220 --> 00:04:25,610
All right.

65
00:04:25,610 --> 00:04:31,340
Some buyers now, these values, though, must match what you have in there.

66
00:04:31,850 --> 00:04:34,940
So notice here I have the pages and I have links.

67
00:04:35,270 --> 00:04:41,750
So the values inside of buttons need to match the text buyers where we have the object.

68
00:04:42,260 --> 00:04:48,800
If the object page values this product set up as product, if it says developers set it up as developers

69
00:04:49,040 --> 00:04:50,510
and hopefully you get the gist.

70
00:04:50,750 --> 00:04:52,970
So the first one will be products.

71
00:04:53,330 --> 00:04:54,770
Then we copy and paste.

72
00:04:55,040 --> 00:05:01,150
Then we'll add these two and we'll set it up as developers.

73
00:05:01,790 --> 00:05:07,880
OK, so I'm the last one will be company.

74
00:05:08,570 --> 00:05:13,500
Now, these buttons will only show up on a big screen and that's why you cannot see them.

75
00:05:13,940 --> 00:05:17,270
So if I make my screen bigger for I check it out.

76
00:05:17,280 --> 00:05:19,840
What I have here, these are my values.

77
00:05:20,120 --> 00:05:27,190
Again, it's going to be kind of tough to see what is happening right now because we haven't added everything.

78
00:05:27,530 --> 00:05:31,490
And also one thing that is missing is the button for the.

79
00:05:32,450 --> 00:05:35,540
So this is not going to be any kind of functional button.

80
00:05:35,870 --> 00:05:37,330
It is just there for show.

81
00:05:37,460 --> 00:05:45,230
So we go with Button, then let's add a class name and we're going to go with Button and then sign in

82
00:05:45,620 --> 00:05:46,930
my friend B10.

83
00:05:47,180 --> 00:05:53,720
And then instead of this button, let's just say sign in, we're going to say it and I'm almost done.

84
00:05:53,720 --> 00:06:02,210
But I just need to fix one bug where I placed all my buttons and the same link that is of course not

85
00:06:02,210 --> 00:06:03,340
set up that I was looking for.

86
00:06:03,680 --> 00:06:09,750
So we go here with Ally and then copy and paste and I'll create one or less than.

87
00:06:10,730 --> 00:06:13,490
My apologies have these values.

88
00:06:13,760 --> 00:06:17,500
And now, of course, this is something that we should see on a screen.

89
00:06:17,510 --> 00:06:25,790
Again, it is kind of tough to see the links because we haven't had the hero, which probably will work

90
00:06:25,790 --> 00:06:28,790
on next since I would want you to see the number.

91
00:06:29,120 --> 00:06:35,070
And once the hero is going to be in place, it is going to be much more easier to see those.

92
00:06:35,450 --> 00:06:38,240
But that should be a general setup for the number.

93
00:06:38,240 --> 00:06:41,870
Again, we grab some functions from our global context.

94
00:06:42,320 --> 00:06:44,030
For time being, we just use one.

95
00:06:44,120 --> 00:06:47,630
But eventually, of course, we'll use the other ones as well.

96
00:06:47,930 --> 00:06:54,710
And as far as our turn, we go with NAV, we have the header, we have some links that are buttons and

97
00:06:54,710 --> 00:06:59,930
also just one button for the show and one is the side and button.