1
00:00:02,200 --> 00:00:04,760
The display property seems to be

2
00:00:04,760 --> 00:00:07,530
one of the keys to achieve our logic

3
00:00:07,530 --> 00:00:09,470
that if we click onto the button here,

4
00:00:09,470 --> 00:00:11,920
that the sidebar appears, because in theory,

5
00:00:11,920 --> 00:00:15,300
you could say in the default mobile view the side drawer,

6
00:00:15,300 --> 00:00:16,567
so the side drawer ID,

7
00:00:16,567 --> 00:00:18,310
and the corresponding elements

8
00:00:18,310 --> 00:00:19,990
are set to display on.

9
00:00:19,990 --> 00:00:22,600
If we click onto the hamburger icon, well,

10
00:00:22,600 --> 00:00:25,050
then it's set to display block.

11
00:00:25,050 --> 00:00:27,550
Then display on is no longer active

12
00:00:27,550 --> 00:00:30,023
and we can see the actual side drawer.

13
00:00:30,960 --> 00:00:33,670
This is our goal. But to achieve this goal,

14
00:00:33,670 --> 00:00:37,720
we have to understand one or two more core concepts

15
00:00:37,720 --> 00:00:41,210
For the first concept, I'm here on academy.com

16
00:00:41,210 --> 00:00:44,193
our website in a tutorial article.

17
00:00:45,090 --> 00:00:47,450
The content is not important at this stage.

18
00:00:47,450 --> 00:00:50,600
It's not related to the basics of web development.

19
00:00:50,600 --> 00:00:54,470
It's a bit more advanced, but in this article down here,

20
00:00:54,470 --> 00:00:56,410
we have a table of contents.

21
00:00:56,410 --> 00:00:59,483
And in this table of contents, we have clickable links.

22
00:01:00,360 --> 00:01:02,620
Before I click onto one of these links, though,

23
00:01:02,620 --> 00:01:05,090
please check the URL up here.

24
00:01:05,090 --> 00:01:06,170
As you see,

25
00:01:06,170 --> 00:01:08,060
the URL is acadmey.com tutorials.

26
00:01:08,060 --> 00:01:12,010
And then the name of the article back there.

27
00:01:12,010 --> 00:01:14,480
Now it's not an HTML file here,

28
00:01:14,480 --> 00:01:18,290
but we could assume that this is the name of the HTML file

29
00:01:18,290 --> 00:01:21,190
in our project to simplify things.

30
00:01:21,190 --> 00:01:23,983
So as you see, it just ends with the name basically.

31
00:01:24,820 --> 00:01:28,560
If I click onto this first link here now, though.

32
00:01:28,560 --> 00:01:30,520
Then you see two things.

33
00:01:30,520 --> 00:01:32,830
First, we jumped down on the page

34
00:01:32,830 --> 00:01:34,460
to the corresponding section that

35
00:01:34,460 --> 00:01:37,730
I just selected in the table of contents.

36
00:01:37,730 --> 00:01:41,550
And if we, again, check our URL up here,

37
00:01:41,550 --> 00:01:44,050
you'll see that now a hash,

38
00:01:44,050 --> 00:01:47,990
and then the name of this part on the website was added.

39
00:01:47,990 --> 00:01:50,633
It's actually an ID as we will see soon.

40
00:01:52,220 --> 00:01:55,900
What happens here basically is that we have an internal link

41
00:01:55,900 --> 00:01:57,610
created with an ID.

42
00:01:57,610 --> 00:02:00,340
This means if I click onto this link,

43
00:02:00,340 --> 00:02:02,120
we jump to the element,

44
00:02:02,120 --> 00:02:06,170
which has the corresponding ID we defined right here.

45
00:02:06,170 --> 00:02:09,169
So in the link up here, we said that, okay,

46
00:02:09,169 --> 00:02:11,510
if I click you, please jump

47
00:02:11,510 --> 00:02:14,460
to the following ID on this page.

48
00:02:14,460 --> 00:02:17,880
And this element here with the corresponding content

49
00:02:17,880 --> 00:02:20,190
has that ID applied.

50
00:02:20,190 --> 00:02:23,110
So it's kind of an internal navigation

51
00:02:23,110 --> 00:02:24,803
on the existing website.

52
00:02:25,920 --> 00:02:30,600
How does this help us for our side drawer though?

53
00:02:30,600 --> 00:02:32,820
It's step one towards the goal, to be honest,

54
00:02:32,820 --> 00:02:37,460
but if we would be able in our project right here to click

55
00:02:37,460 --> 00:02:39,320
onto the hamburger icon,

56
00:02:39,320 --> 00:02:42,920
and then to jump towards the area of the website

57
00:02:42,920 --> 00:02:45,390
where the side drawer is located well,

58
00:02:45,390 --> 00:02:47,860
then this would be a great step

59
00:02:47,860 --> 00:02:50,970
because thinking ahead, we could also say that if we

60
00:02:50,970 --> 00:02:53,570
click onto the hamburger icon,

61
00:02:53,570 --> 00:02:57,170
we jump to the area where the side drawer is positioned

62
00:02:57,170 --> 00:03:00,930
and by default the side drawer is not visible.

63
00:03:00,930 --> 00:03:03,300
But if I click onto the icon,

64
00:03:03,300 --> 00:03:06,530
I jump to the side drawer and I also changed

65
00:03:06,530 --> 00:03:09,103
the display property from none to block.

66
00:03:10,400 --> 00:03:12,280
So that's where we're going to this

67
00:03:12,280 --> 00:03:15,620
changing of the display property is another technique,

68
00:03:15,620 --> 00:03:18,470
but let's first implement this logic that we jump to the

69
00:03:18,470 --> 00:03:22,520
side drawer if we click onto the hamburger icon.

70
00:03:22,520 --> 00:03:24,770
For this, let's go back to the code.

71
00:03:24,770 --> 00:03:28,053
And in here, I want to change two things.

72
00:03:29,210 --> 00:03:32,770
In the style CSS file, I'll temporarily

73
00:03:32,770 --> 00:03:36,770
comment out the position fixed and top left zero

74
00:03:38,180 --> 00:03:39,390
properties.

75
00:03:39,390 --> 00:03:43,723
So the side drawer, if we load here looks like this.

76
00:03:44,750 --> 00:03:45,970
And then

77
00:03:45,970 --> 00:03:48,333
back in the index HTML file,

78
00:03:49,830 --> 00:03:53,140
we'll go to the side drawer to be created.

79
00:03:53,140 --> 00:03:57,960
So this aside element here and also temporarily,

80
00:03:57,960 --> 00:03:59,750
let me cut this out,

81
00:03:59,750 --> 00:04:04,750
we will paste this below the main section of our project.

82
00:04:05,550 --> 00:04:06,563
So right here.

83
00:04:08,570 --> 00:04:10,920
Saving this going back.

84
00:04:10,920 --> 00:04:12,880
Well, the page would look like this.

85
00:04:12,880 --> 00:04:16,130
And now I'll zoom in a bit here like this.

86
00:04:16,130 --> 00:04:18,260
So for me, it's 150%.

87
00:04:18,260 --> 00:04:21,440
It's just important that the side drawer is not visible

88
00:04:21,440 --> 00:04:24,660
anymore because now we can implement this logic that if we

89
00:04:24,660 --> 00:04:27,957
click the hamburger icon, we jump to

90
00:04:27,957 --> 00:04:30,610
the side drawer on our existing page.

91
00:04:30,610 --> 00:04:33,563
This logic that we just saw on academy.com.

92
00:04:35,270 --> 00:04:36,800
So back in the code,

93
00:04:36,800 --> 00:04:41,100
we see that the side drawer has the ID side draw already

94
00:04:41,100 --> 00:04:41,933
here.

95
00:04:41,933 --> 00:04:42,770
We added this.

96
00:04:42,770 --> 00:04:44,040
So what we have to do now,

97
00:04:44,040 --> 00:04:47,293
we have to go up to our hamburger button.

98
00:04:49,330 --> 00:04:52,323
The button we created right here, this anchor tag.

99
00:04:53,490 --> 00:04:55,320
And as a reference,

100
00:04:55,320 --> 00:04:59,300
and now don't refer to any page or any external page.

101
00:04:59,300 --> 00:05:04,120
I now simply add the ID of the element I want to jump to.

102
00:05:04,120 --> 00:05:05,820
So here, the element would be

103
00:05:05,820 --> 00:05:09,430
side drawer the ID of the element.

104
00:05:09,430 --> 00:05:10,780
That's it.

105
00:05:10,780 --> 00:05:12,710
So now by clicking onto this link,

106
00:05:12,710 --> 00:05:15,440
we should hopefully jump to the element which has the ID

107
00:05:15,440 --> 00:05:19,170
side drawer, and this is our side drawer in the end.

108
00:05:19,170 --> 00:05:23,100
So let's go back and let's click onto the hamburger button,

109
00:05:23,100 --> 00:05:24,933
and as you see we jumped down.

110
00:05:25,870 --> 00:05:28,680
Of course, it's not at the top because our page ends here,

111
00:05:28,680 --> 00:05:29,820
but it works.

112
00:05:29,820 --> 00:05:32,170
Let's scroll up and click again.

113
00:05:32,170 --> 00:05:33,093
I jumped down.

114
00:05:35,390 --> 00:05:39,090
So this is how we can navigate to the side drawer.

115
00:05:39,090 --> 00:05:39,970
Problem here, of course,

116
00:05:39,970 --> 00:05:42,830
is that the side drawer is not at the right position

117
00:05:42,830 --> 00:05:45,350
and that it's not occupying to enter a space

118
00:05:45,350 --> 00:05:47,070
here at the moment.

119
00:05:47,070 --> 00:05:50,363
This is something we have to tackle as a next step now.