1
00:00:00,230 --> 00:00:00,590
All right.

2
00:00:00,590 --> 00:00:06,080
And once we have the small sidebar in place now let's also work on the big one and let's start with

3
00:00:06,080 --> 00:00:06,890
imports.

4
00:00:06,890 --> 00:00:09,500
So we're going to be looking for NAV links.

5
00:00:10,150 --> 00:00:12,400
Something we just created.

6
00:00:12,640 --> 00:00:13,720
So let's take a look.

7
00:00:13,750 --> 00:00:14,170
Yep.

8
00:00:14,170 --> 00:00:15,000
Now links.

9
00:00:15,010 --> 00:00:17,470
Then we want to grab the logo.

10
00:00:17,500 --> 00:00:19,300
So import logo.

11
00:00:19,420 --> 00:00:26,920
And also we want to get the use dashboard context since again, we'll use the show sidebar state value

12
00:00:26,920 --> 00:00:31,540
in order to control whether we're showing or hiding the big sidebar.

13
00:00:31,750 --> 00:00:33,730
So these are going to be our imports.

14
00:00:33,730 --> 00:00:40,500
And let's start right away by grabbing the state value and we'll set it equal to show sidebar.

15
00:00:40,510 --> 00:00:43,150
And that is coming from use dashboard context.

16
00:00:43,240 --> 00:00:47,540
Now, when it comes to the wrapper, it's going to be the same idea.

17
00:00:47,560 --> 00:00:51,240
We'll have the parent and the parent is going to have two classes.

18
00:00:51,250 --> 00:00:53,230
So one will use to.

19
00:00:53,910 --> 00:00:55,680
Show and hide the big sidebar.

20
00:00:55,680 --> 00:01:00,360
And the other one is going to be in general to apply the style.

21
00:01:00,360 --> 00:01:02,100
So notice over here, same deal.

22
00:01:02,100 --> 00:01:10,250
So we're toggling the same state value and based on that value, we either hide or show the big sidebar.

23
00:01:10,260 --> 00:01:15,030
Now, in this case, it's going to be a little bit different, and I'll discuss that at the very end

24
00:01:15,030 --> 00:01:15,930
of the video.

25
00:01:16,110 --> 00:01:19,980
So for now, let's do it the same way where we'll have the div.

26
00:01:20,930 --> 00:01:25,740
And Dave was going to have some classes and I'll right away make this dynamic.

27
00:01:25,760 --> 00:01:29,980
I'll say, if show sidebar is true, pretty much the same deal.

28
00:01:29,990 --> 00:01:33,230
We'll display two classes and if not, then we'll display one.

29
00:01:33,230 --> 00:01:36,380
But again, at the end of the day, it's going to be a little bit different.

30
00:01:36,380 --> 00:01:40,900
So sidebar container here and show sidebar.

31
00:01:40,910 --> 00:01:43,640
So pretty much the same class and if.

32
00:01:44,040 --> 00:01:45,450
It's false.

33
00:01:45,750 --> 00:01:47,340
Then we'll do it over here.

34
00:01:47,580 --> 00:01:49,410
The sidebar container.

35
00:01:49,410 --> 00:01:54,090
So now let's navigate to the big screen since we won't be able to see the big one.

36
00:01:54,880 --> 00:01:56,170
On a small screen.

37
00:01:56,350 --> 00:02:00,070
Let's go with Dashboard and check it out since this value is false.

38
00:02:00,070 --> 00:02:01,230
Now, of course we cannot see it.

39
00:02:01,240 --> 00:02:07,750
Now, if I click notice, this is going to be our big sidebar now as far as the content.

40
00:02:08,520 --> 00:02:09,960
First of all, same deal.

41
00:02:09,960 --> 00:02:11,100
We'll go with content.

42
00:02:11,100 --> 00:02:15,390
And this is something that I covered before when I talked about styled components.

43
00:02:16,510 --> 00:02:21,730
Since these classes are used only in installed component, they're not global.

44
00:02:21,760 --> 00:02:27,520
I can reuse the same class name and this is one of the reasons why I prefer using styled components.

45
00:02:27,520 --> 00:02:30,430
Because I don't have to be original with my class names.

46
00:02:30,460 --> 00:02:35,500
Notice same show, sidebar, same content and no issues.

47
00:02:35,590 --> 00:02:39,580
Then inside of the header here we'll place a logo.

48
00:02:40,400 --> 00:02:46,040
Let's close the component and then since we have already a nav links component right outside of this

49
00:02:46,040 --> 00:02:49,760
one, we'll go with NAV links and let's close it.

50
00:02:49,760 --> 00:02:51,740
And now let's navigate to the big screen.

51
00:02:51,950 --> 00:02:55,450
Let's refresh just to stay on the safe side and check it out.

52
00:02:55,460 --> 00:03:01,580
Since NAV Links contains all of the data, we nicely display a list of links.

53
00:03:01,610 --> 00:03:05,250
Now there are two things that I want to change over here.

54
00:03:05,270 --> 00:03:07,520
First of all, like I said.

55
00:03:07,990 --> 00:03:12,280
This is going to be a little bit different since by default, what do we do?

56
00:03:12,310 --> 00:03:13,990
We hide the sidebar.

57
00:03:14,080 --> 00:03:14,680
Correct.

58
00:03:14,680 --> 00:03:17,020
So once I refresh notice, it's hidden.

59
00:03:17,170 --> 00:03:24,370
But to tell you honestly, my preference is to show the big sidebar right out of the gate.

60
00:03:25,050 --> 00:03:27,750
So if you want, you can keep this kind of setup.

61
00:03:27,750 --> 00:03:31,480
But what I'm going to do is just change the logic over here.

62
00:03:31,500 --> 00:03:38,880
I'll say if the show sidebar is false, then I'll actually display it and the result is going to be

63
00:03:38,880 --> 00:03:39,240
following.

64
00:03:39,240 --> 00:03:43,720
Once I refresh notice by default, I'll always show the sidebar.

65
00:03:43,740 --> 00:03:45,840
So essentially I'm just flipping it.

66
00:03:46,450 --> 00:03:47,500
That's my preference.

67
00:03:47,500 --> 00:03:53,980
If you want to keep the big sidebar hidden, just leave the same syntax.

68
00:03:54,010 --> 00:04:00,450
Also, I don't want to close the sidebar every time I navigate to that particular page.

69
00:04:00,460 --> 00:04:04,600
So yes, I want to do it on a small sidebar, but I don't want to do it.

70
00:04:04,600 --> 00:04:10,540
When I click on a nav link which is located in the big sidebar, hopefully that is clear and in order

71
00:04:10,540 --> 00:04:11,440
to fix that.

72
00:04:12,230 --> 00:04:16,700
I'll actually pass in the prop I'll say is big sidebar.

73
00:04:16,700 --> 00:04:23,060
And as a side note, if you're setting up a Boolean prop like big sidebar, then we actually don't need

74
00:04:23,060 --> 00:04:25,030
to set up the value here.

75
00:04:25,040 --> 00:04:29,420
We can just write it and if it's present, then yes, we'll grab it.

76
00:04:29,420 --> 00:04:31,850
If not, then it's going to be false regardless.

77
00:04:31,850 --> 00:04:36,260
So you don't need to go with is big sidebar equals to true or false?

78
00:04:36,290 --> 00:04:40,400
No, just add it and if it's present then you'll have access to it.

79
00:04:40,400 --> 00:04:46,220
So only in the big sidebar, of course, we'll pass this prop and then back in the nav links.

80
00:04:46,310 --> 00:04:47,750
Let's destructure it.

81
00:04:48,230 --> 00:04:50,740
Is big sidebar.

82
00:04:50,750 --> 00:04:52,280
That's the prop I'm looking for.

83
00:04:52,280 --> 00:04:56,060
And in here, where I toggle, I'll check if this is present.

84
00:04:56,090 --> 00:04:58,100
Then I actually don't want to toggle it.

85
00:04:58,430 --> 00:05:01,250
And basically I'm going to go with Null.

86
00:05:01,790 --> 00:05:07,940
And if it's false, if essentially I'm clicking on the nav link which is located in the small one,

87
00:05:07,940 --> 00:05:10,040
then of course I want to hide it.

88
00:05:10,040 --> 00:05:11,360
And how is that going to look like?

89
00:05:11,360 --> 00:05:16,010
So notice in here we still hide the sidebar, but on a big screen.

90
00:05:16,010 --> 00:05:18,530
First of all, we show it by default.

91
00:05:19,540 --> 00:05:22,910
And if we click on a page, we don't close it again.

92
00:05:22,930 --> 00:05:24,340
This is my preference.

93
00:05:24,460 --> 00:05:31,660
If you like the previous setup, just keep the logic and you're going to be in good shape.