1
00:00:02,570 --> 00:00:04,720
We now have a connection between our button,

2
00:00:04,720 --> 00:00:06,703
the button click to be more precise

3
00:00:06,703 --> 00:00:09,230
and our side drawer.

4
00:00:09,230 --> 00:00:11,380
Problem is that our final goal is not to

5
00:00:11,380 --> 00:00:13,040
jump to the side drawer.

6
00:00:13,040 --> 00:00:14,780
If we click onto the button,

7
00:00:14,780 --> 00:00:17,630
we actually want to display the side drawer.

8
00:00:17,630 --> 00:00:20,797
Only if we click the hamburger button.

9
00:00:20,797 --> 00:00:23,320
The great thing is that we have

10
00:00:23,320 --> 00:00:25,110
another pseudo selector,

11
00:00:25,110 --> 00:00:26,170
which allows us to

12
00:00:26,170 --> 00:00:30,253
exactly do this: the target pseudo selector.

13
00:00:31,160 --> 00:00:33,560
The target pseudo selector checks

14
00:00:33,560 --> 00:00:37,113
whether an ID is added to the URL.

15
00:00:38,880 --> 00:00:42,210
And if you check all your URL at the moment here,

16
00:00:42,210 --> 00:00:44,903
we have added the side drawer ID.

17
00:00:46,000 --> 00:00:47,270
Did you see this?

18
00:00:47,270 --> 00:00:49,430
This happened once we added

19
00:00:49,430 --> 00:00:53,290
the hyper reference, the reference for our side drawer

20
00:00:53,290 --> 00:00:55,040
here to the button.

21
00:00:55,040 --> 00:00:58,360
If I delete this ID and load the page again,

22
00:00:58,360 --> 00:01:00,670
you'll see it's the default URL.

23
00:01:00,670 --> 00:01:02,610
But if I click the button,

24
00:01:02,610 --> 00:01:04,379
the ID is added

25
00:01:04,379 --> 00:01:06,710
and move to this target pseudo selector.

26
00:01:06,710 --> 00:01:10,600
We can make sure that once our specified ID

27
00:01:10,600 --> 00:01:13,090
is added to the URL, well,

28
00:01:13,090 --> 00:01:16,010
certain CSS styles are applied.

29
00:01:16,010 --> 00:01:18,480
In our case, this means we can set

30
00:01:18,480 --> 00:01:21,440
our side drawer to display none by

31
00:01:21,440 --> 00:01:23,851
default. So it's not visible by default,

32
00:01:23,851 --> 00:01:28,100
but if this ID is added to the URL,

33
00:01:28,100 --> 00:01:31,460
then we turn it to display block.

34
00:01:31,460 --> 00:01:33,280
Now let's see how this works.

35
00:01:33,280 --> 00:01:36,490
For this, we can leave the HTML part here

36
00:01:36,490 --> 00:01:38,413
and go to our CSS file.

37
00:01:40,230 --> 00:01:42,272
And in there, maybe below our

38
00:01:42,272 --> 00:01:43,500
side drawer

39
00:01:44,810 --> 00:01:45,840
selector,

40
00:01:45,840 --> 00:01:48,513
will again at this side drawer selector,

41
00:01:49,540 --> 00:01:51,360
but now a colon

42
00:01:51,360 --> 00:01:53,790
and now target.

43
00:01:53,790 --> 00:01:54,850
Like this.

44
00:01:54,850 --> 00:01:57,870
This target selector now specifically checks

45
00:01:57,870 --> 00:02:01,710
if this specific ID is added to the URL

46
00:02:01,710 --> 00:02:03,360
in the browser.

47
00:02:03,360 --> 00:02:05,650
Well, and if this is the case for us,

48
00:02:05,650 --> 00:02:09,710
then we want to set the display property

49
00:02:09,710 --> 00:02:13,220
of the side drawer to block, right?

50
00:02:13,220 --> 00:02:16,030
And more importantly, by default.

51
00:02:16,030 --> 00:02:17,406
So right here,

52
00:02:17,406 --> 00:02:20,740
we want to set the display property for the

53
00:02:20,740 --> 00:02:23,093
side drawer to none.

54
00:02:24,370 --> 00:02:26,270
So let's see if this works.

55
00:02:26,270 --> 00:02:28,768
Yeah, it doesn't work at the moment

56
00:02:28,768 --> 00:02:30,730
because in the URL, we still have

57
00:02:30,730 --> 00:02:32,950
the side drawer ID edit.

58
00:02:32,950 --> 00:02:36,840
So let's remove this and press enter.

59
00:02:36,840 --> 00:02:38,850
As you see it's removed now.

60
00:02:38,850 --> 00:02:41,320
And if I click the hamburger button,

61
00:02:41,320 --> 00:02:43,490
you see the side drawer,

62
00:02:43,490 --> 00:02:45,659
which it's not a real side drawer here

63
00:02:45,659 --> 00:02:46,763
at the moment, appears.

64
00:02:48,040 --> 00:02:50,970
If we go back to the code

65
00:02:50,970 --> 00:02:54,130
and now even coming back in our position,

66
00:02:54,130 --> 00:02:58,100
fixed and top left, zero properties,

67
00:02:58,100 --> 00:02:58,940
go back.

68
00:02:58,940 --> 00:03:01,220
We see the full side drawer so we can remove

69
00:03:01,220 --> 00:03:04,170
it from the URL once again, load the page again.

70
00:03:04,170 --> 00:03:05,570
It's not here.

71
00:03:05,570 --> 00:03:07,363
If you click the button it's there.

72
00:03:09,160 --> 00:03:12,460
So this actually also works.

73
00:03:12,460 --> 00:03:16,140
There is one big problem though. And for this,

74
00:03:16,140 --> 00:03:18,170
let's maybe quickly put this

75
00:03:18,170 --> 00:03:20,423
position fixed property away.

76
00:03:21,780 --> 00:03:24,910
As you see, we cannot jump back at the moment.

77
00:03:24,910 --> 00:03:27,350
We can only click the hamburger button

78
00:03:27,350 --> 00:03:29,780
to jump down and to add the ID

79
00:03:29,780 --> 00:03:33,440
to our URL but we don't find a way back.

80
00:03:33,440 --> 00:03:34,460
Now you could have cross say,

81
00:03:34,460 --> 00:03:35,850
if I put it back in,

82
00:03:35,850 --> 00:03:38,240
we could somehow make the hamburger icon

83
00:03:38,240 --> 00:03:40,620
visible here and click it to jump back.

84
00:03:40,620 --> 00:03:43,320
But this won't work because the only

85
00:03:43,320 --> 00:03:44,510
way to jump back is to

86
00:03:44,510 --> 00:03:47,460
remove this part from the URL,

87
00:03:47,460 --> 00:03:49,950
either like this,

88
00:03:49,950 --> 00:03:52,590
or we can also add a hash here,

89
00:03:52,590 --> 00:03:54,170
which would simply mean jump through the

90
00:03:54,170 --> 00:03:55,630
top of the landing page,

91
00:03:55,630 --> 00:03:57,040
which was also work here,

92
00:03:57,040 --> 00:03:59,240
but we cannot use this existing

93
00:03:59,240 --> 00:04:01,560
hamburger icon because once we click it,

94
00:04:01,560 --> 00:04:04,133
it adds well side drawer ID right here.

95
00:04:05,270 --> 00:04:07,910
Therefore, to finally finish the side drawer,

96
00:04:07,910 --> 00:04:10,920
we have to add another header, the same header

97
00:04:10,920 --> 00:04:13,010
basically as the default one,

98
00:04:13,010 --> 00:04:15,831
but this one should not refer

99
00:04:15,831 --> 00:04:18,370
to the ID side drawer,

100
00:04:18,370 --> 00:04:21,392
but it would refer to the ID hash, for example,

101
00:04:21,392 --> 00:04:24,211
to bring us back to the top of the landing page

102
00:04:24,211 --> 00:04:27,323
and to make the side drawer, therefore disappear.