1
00:00:00,140 --> 00:00:00,560
Okay.

2
00:00:00,560 --> 00:00:06,350
And once we have the structure in place, now let's understand how the functionality works.

3
00:00:06,380 --> 00:00:13,970
So first of all, regardless whether we have the show, sidebar or not, with the help of CSS, once

4
00:00:13,970 --> 00:00:17,900
we get to the big screen, we hide the small sidebar.

5
00:00:17,900 --> 00:00:20,090
So we only display the big one.

6
00:00:20,090 --> 00:00:24,190
And of course, once we set up the CSS, you'll see how we do that again.

7
00:00:24,200 --> 00:00:25,490
Hopefully that is clear.

8
00:00:25,490 --> 00:00:32,750
So regardless of the status of show sidebar, we hide it once we get to the big screen, then second

9
00:00:32,780 --> 00:00:35,180
in order to show.

10
00:00:36,250 --> 00:00:37,180
The sidebar.

11
00:00:37,180 --> 00:00:39,630
We use this show sidebar class.

12
00:00:39,640 --> 00:00:41,500
If the class is not present.

13
00:00:41,530 --> 00:00:42,490
Check it out.

14
00:00:42,490 --> 00:00:44,350
We don't display it.

15
00:00:44,890 --> 00:00:52,660
So if we put two and two together, we could get the state value from our context.

16
00:00:53,320 --> 00:00:56,950
And then effectively in here set up the ternary operator.

17
00:00:57,070 --> 00:01:01,840
So if the state value is true, then we show the sidebar.

18
00:01:01,840 --> 00:01:03,290
If not, then we hide it.

19
00:01:03,310 --> 00:01:09,880
And of course, when it comes to close button and when we click on the links, we could actually hide

20
00:01:09,880 --> 00:01:10,600
the sidebar.

21
00:01:10,690 --> 00:01:12,490
So how is that going to look like?

22
00:01:12,500 --> 00:01:18,670
Well, first of all, remember, from our context, we're getting back the object and the state value

23
00:01:18,670 --> 00:01:20,620
is show sidebar.

24
00:01:20,620 --> 00:01:23,860
And in order to toggle it, we have a function.

25
00:01:23,950 --> 00:01:25,420
Toggle sidebar.

26
00:01:25,450 --> 00:01:26,050
Correct.

27
00:01:26,080 --> 00:01:28,150
So now let's navigate over here.

28
00:01:28,820 --> 00:01:34,730
Where we have the class name and let's set up that ternary operator.

29
00:01:35,310 --> 00:01:38,020
So we want to go here with the correlation.

30
00:01:38,340 --> 00:01:44,880
Then we'll go with show sidebar, and if it's true, then we'll display both of the classes.

31
00:01:45,180 --> 00:01:46,800
So let's cut it out.

32
00:01:47,550 --> 00:01:52,970
And if it's false, then of course we're going to just display one.

33
00:01:52,980 --> 00:01:58,470
We'll say here, sidebar and container, let's save it.

34
00:01:58,470 --> 00:02:02,210
And of course, once we do that, the sidebar is hidden.

35
00:02:02,220 --> 00:02:02,880
Correct.

36
00:02:02,910 --> 00:02:04,230
We cannot see the sidebar.

37
00:02:04,230 --> 00:02:04,530
Why?

38
00:02:04,530 --> 00:02:06,660
Well, because the default value is false.

39
00:02:06,660 --> 00:02:10,530
But remember, we already set in the nav bar.

40
00:02:10,770 --> 00:02:11,730
The toggle button.

41
00:02:11,730 --> 00:02:12,360
Correct.

42
00:02:12,360 --> 00:02:18,330
So every time we click on a toggle button, we actually toggle this state, value the show sidebar.

43
00:02:18,330 --> 00:02:19,590
So check it out.

44
00:02:19,620 --> 00:02:24,810
The moment I click on the toggle button, we can actually see the sidebar.

45
00:02:24,810 --> 00:02:30,990
So now, of course, our next step is going to be adding toggle sidebar to this button because we want

46
00:02:30,990 --> 00:02:31,740
to close it.

47
00:02:31,740 --> 00:02:33,180
Pretty much the same deal.

48
00:02:33,480 --> 00:02:39,900
And yes, I know that we could have technically set up two functions, one to open, the other one to

49
00:02:39,900 --> 00:02:43,800
close, but I think it's just easier if we have one toggle sidebar.

50
00:02:43,830 --> 00:02:49,240
Remember, in this case, once we click on close, there's only one option we have.

51
00:02:49,390 --> 00:02:53,380
If we can see the close button, that means that show sidebar is true.

52
00:02:53,380 --> 00:02:56,190
So this will always set it back to false.

53
00:02:56,200 --> 00:02:57,490
So let's go here.

54
00:02:58,380 --> 00:02:59,400
Want to toggle one.

55
00:03:00,170 --> 00:03:05,780
Let's go with on click and we'll just go with toggle sidebar and now check it out.

56
00:03:06,200 --> 00:03:07,430
Click hide.

57
00:03:07,430 --> 00:03:13,040
And once we click in the nav bar, we display the small sidebar.

58
00:03:13,310 --> 00:03:15,560
And also we want to do the same thing.

59
00:03:16,040 --> 00:03:21,290
When we click on a link because again, yeah, we can nicely navigate to the page.

60
00:03:21,290 --> 00:03:27,590
I can clearly see that in the URL, but unfortunately I cannot see anything because the way the sidebar

61
00:03:27,590 --> 00:03:31,640
is set up, it pretty much takes up the entire screen.

62
00:03:31,640 --> 00:03:32,890
So here's what we can do.

63
00:03:32,900 --> 00:03:34,430
Notice this nav link.

64
00:03:34,430 --> 00:03:37,790
We'll do the same thing once we click on the link.

65
00:03:37,790 --> 00:03:44,600
Not only we're going to navigate, but we'll also toggle the sidebar effectively.

66
00:03:44,600 --> 00:03:45,590
We'll just hide it.

67
00:03:45,590 --> 00:03:47,300
So notice something interesting.

68
00:03:47,870 --> 00:03:53,750
Let's say I click on stats and now I nicely navigate to the stat page.

69
00:03:53,930 --> 00:03:57,500
And at the very, very end, let's discuss three things.

70
00:03:57,500 --> 00:04:01,100
So let me first of all, open up the sidebar.

71
00:04:01,550 --> 00:04:07,700
I want to inspect the elements and here in the content we'll see the NAV links and you'll notice something

72
00:04:07,700 --> 00:04:08,540
interesting.

73
00:04:08,540 --> 00:04:09,440
Where.

74
00:04:10,000 --> 00:04:14,250
Modeling component has this active class.

75
00:04:14,260 --> 00:04:16,810
So this is set with React router.

76
00:04:17,019 --> 00:04:25,180
So essentially this active class gets added to the link, which of course represents that page.

77
00:04:26,040 --> 00:04:32,460
So, for example, if I'm on the all jobs right now, this is going to be active.

78
00:04:32,640 --> 00:04:38,220
Now, of course, we do need to add some CSS to this active class and I'll showcase that once we set

79
00:04:38,220 --> 00:04:38,870
up the CSS.

80
00:04:38,880 --> 00:04:40,830
Just keep in mind that by default.

81
00:04:41,520 --> 00:04:43,650
With the React router.

82
00:04:43,740 --> 00:04:48,630
We get this active class to the link that represents the page.

83
00:04:48,630 --> 00:04:55,740
So for example, if I go here to the profile and notice how this profile link right away gets this active

84
00:04:55,740 --> 00:04:56,220
class.

85
00:04:56,220 --> 00:05:03,540
So essentially with the CSS, as you can see, I'm just adding the primary color to the active link.

86
00:05:03,570 --> 00:05:04,020
Okay.

87
00:05:04,020 --> 00:05:05,280
Hopefully that is clear.

88
00:05:05,280 --> 00:05:11,880
So every time we navigate to the page, the nav link is going to get that active class.

89
00:05:12,090 --> 00:05:13,500
However, there's one.

90
00:05:13,500 --> 00:05:14,280
Gotcha.

91
00:05:14,280 --> 00:05:20,040
Since we have a nested structure and the dashboard is the parent, notice how?

92
00:05:21,020 --> 00:05:25,980
Every time we navigate to a page, ajob always stays active.

93
00:05:26,000 --> 00:05:28,700
So it always has this active class.

94
00:05:28,700 --> 00:05:31,940
And again, the reason for that is because we have this nested structure.

95
00:05:31,940 --> 00:05:38,510
So basically the dashboard always matches the route since it's a parent and therefore it's always active.

96
00:05:38,510 --> 00:05:44,890
And in order to avoid that, we just need to add the end prop to the nav link save.

97
00:05:44,900 --> 00:05:54,020
And once we do that, notice ajob doesn't get the active class unless we actually navigate to that page.

98
00:05:54,020 --> 00:05:58,580
So once we navigate to the page, then of course it's going to get that active link.

99
00:05:58,580 --> 00:06:03,920
And at the very end, let's talk about why we use Dot over here in the path.

100
00:06:04,070 --> 00:06:07,750
You see all of these links again are going to be relative.

101
00:06:07,760 --> 00:06:13,430
So let's say if we're going to write forward slash here, what's going to happen?

102
00:06:13,430 --> 00:06:15,980
We're actually going to navigate to the home page.

103
00:06:16,030 --> 00:06:23,510
So notice I click on Add Job and we navigate to the landing page because effectively that's our home

104
00:06:23,510 --> 00:06:24,020
page.

105
00:06:24,020 --> 00:06:32,090
So let me get back right now to my dashboard and showcase where we navigate if, let's say we're going

106
00:06:32,090 --> 00:06:33,500
to right here Dashboard.

107
00:06:34,190 --> 00:06:35,290
Let's save that.

108
00:06:35,300 --> 00:06:37,430
Let's open up the sidebar and check it out.

109
00:06:37,430 --> 00:06:42,860
The moment I click on Add Job, I navigate to Dashboard Forward slash Dashboard.

110
00:06:43,040 --> 00:06:46,010
Like I said, these links are going to be relative.

111
00:06:46,010 --> 00:06:48,770
So technically if we want to fix this.

112
00:06:49,480 --> 00:06:51,460
First, let me navigate back home.

113
00:06:51,730 --> 00:06:53,680
Let me add here a forward slash.

114
00:06:53,680 --> 00:06:56,590
We could go with forward slash dashboard.

115
00:06:56,740 --> 00:07:00,940
Then, of course, we'll navigate to the dashboard page, which is our parent.

116
00:07:00,940 --> 00:07:03,220
And of course, we'll display the Add job.

117
00:07:03,400 --> 00:07:09,580
Or we can simply add here a dot and that is going to right away navigate to the parent.

118
00:07:09,580 --> 00:07:11,380
So this is totally up to you.

119
00:07:11,410 --> 00:07:16,210
Just please keep in mind the gotcha that of course the links are going to be relative and therefore

120
00:07:16,210 --> 00:07:18,970
we need to be careful with our index one.

121
00:07:18,970 --> 00:07:20,560
So now notice everything is correct.

122
00:07:20,560 --> 00:07:27,370
We go to all jobs and then if we want to navigate back to add job, we nicely navigate back to this

123
00:07:27,370 --> 00:07:28,660
particular page.

124
00:07:28,660 --> 00:07:34,690
And with this in place, we're done with small sidebar and we can move on to the next topic.