1
00:00:00,760 --> 00:00:07,320
But once we have the Mavericks in place now, let's knock out the big sidebar as well, essentially

2
00:00:07,680 --> 00:00:14,100
pretty much the same setup we have here, the logo as well as knowledge and everything else is already

3
00:00:14,100 --> 00:00:15,270
set up in the US.

4
00:00:15,720 --> 00:00:19,650
And essentially, the way we'll do that will go to a big sidebar component.

5
00:00:19,830 --> 00:00:24,720
We want to import the use app context central years show sidebar here as well.

6
00:00:25,080 --> 00:00:28,080
We want to grab the Mavericks logo as well as the rapper.

7
00:00:28,290 --> 00:00:31,260
And if I remember correctly, the rapper is already there.

8
00:00:31,680 --> 00:00:37,830
And then when it comes to the big sidebar, yes, we're grabbing the show sidebar from the global context.

9
00:00:38,840 --> 00:00:46,280
Then the same deal, we have the wrapper and then inside of we have this device that is using sensors

10
00:00:46,550 --> 00:00:48,470
based on the shoreside bar.

11
00:00:48,830 --> 00:00:52,970
So if it is true, then we display one of them.

12
00:00:53,690 --> 00:00:58,910
Side sidebar container and then the other one is sidebar container and shoreside bar.

13
00:00:59,150 --> 00:01:06,410
So essentially, this is opposite, and I'll kind of go over once we set everything up and then we have

14
00:01:06,410 --> 00:01:07,490
the content here.

15
00:01:07,760 --> 00:01:11,060
So there was a class of content on the site or another matter.

16
00:01:11,300 --> 00:01:11,840
And then the.

17
00:01:12,710 --> 00:01:18,500
So let's set everything up and then I'll discuss why this one is opposite.

18
00:01:18,710 --> 00:01:26,210
First, I want to say my read me and I'm looking for a big sidebar, I guess in this case, so big sidebar

19
00:01:26,210 --> 00:01:26,540
here.

20
00:01:26,960 --> 00:01:31,070
And like I said, I don't see the point of retyping them.

21
00:01:32,810 --> 00:01:33,890
Just import everything.

22
00:01:34,870 --> 00:01:40,870
And then once I have all the imports in place, as far as the return, yes, I'm going to go with rapper

23
00:01:41,200 --> 00:01:42,430
part, but inside of it.

24
00:01:42,760 --> 00:01:44,440
We're going to go with our live.

25
00:01:44,980 --> 00:01:50,910
And you know, since there's going to be conditional rendering, let's go with concert and then Cheryl

26
00:01:51,100 --> 00:01:52,870
and then sidebar.

27
00:01:53,170 --> 00:01:55,210
Now that is equal to my use of context.

28
00:01:55,210 --> 00:02:01,060
Let's invoke it and then let's add the classes here, but let's add them dynamically.

29
00:02:01,540 --> 00:02:07,030
So let's go here with class name, and for time being, I'll showcase how everything is going to look

30
00:02:07,510 --> 00:02:10,990
if we're going to do the same setup as the small sidebar.

31
00:02:11,260 --> 00:02:17,830
Basically, if the show sidebar is true, then we render both classes and then I'll discuss why I prefer

32
00:02:17,830 --> 00:02:18,940
the other setup instead.

33
00:02:19,270 --> 00:02:23,650
So let's go here, show sidebar, and let's set up our conditions.

34
00:02:24,070 --> 00:02:34,210
So if it is true or just such sidebar container and then show sidebar and then the sidebar container.

35
00:02:35,360 --> 00:02:39,730
So it's taking this class and copy and paste now inside of this there.

36
00:02:40,170 --> 00:02:46,550
Let's go with another day for the class of content and then in here, let's set up that header with

37
00:02:46,550 --> 00:02:47,240
a logo.

38
00:02:48,240 --> 00:02:52,410
And then right next to it, let's go with our knowledge.

39
00:02:52,650 --> 00:02:58,100
Now when I say right next to it, I want to place it right outside the head or so it's setting Alex

40
00:02:58,350 --> 00:03:01,650
for time being, I'm not going to pass in the toggle sidebar.

41
00:03:01,860 --> 00:03:05,400
And then once we set everything up, I'll to set out how it's going to look like.

42
00:03:05,730 --> 00:03:07,770
So first, let's navigate it to the big screen.

43
00:03:08,760 --> 00:03:10,710
And let's take a look what we have right now.

44
00:03:11,280 --> 00:03:19,170
So notice the moment we are refresh the page, you don't see the sidebar and only once you click, then

45
00:03:19,170 --> 00:03:21,810
you can see in the sidebar this showcases which jobs we have.

46
00:03:22,050 --> 00:03:24,990
And then once we click, we can nicely navigate around.

47
00:03:25,470 --> 00:03:33,180
Now, the reason why we set up over here the class is the opposite way because it's my preference to

48
00:03:33,450 --> 00:03:37,560
show the sidebar meaning the big sidebar right out of the gate.

49
00:03:38,160 --> 00:03:40,260
So that's why I went the other way.

50
00:03:40,620 --> 00:03:48,000
Since I know the show sidebar by default, will be false when the user logs in instead of displaying

51
00:03:48,000 --> 00:03:49,770
these glasses when it is true.

52
00:03:50,340 --> 00:03:53,240
I just wish around and just said, you know what?

53
00:03:53,280 --> 00:03:56,130
If it is false, then display both classes.

54
00:03:56,490 --> 00:04:00,750
Keep in mind, this is bullying doesn't really matter which value it is.

55
00:04:01,050 --> 00:04:03,840
It really depends on how we're setting up the logic.

56
00:04:04,200 --> 00:04:09,810
So that's why when you go here right now and then once you refresh since this is false, actually it

57
00:04:09,810 --> 00:04:10,470
is displayed.

58
00:04:10,950 --> 00:04:11,970
Hopefully, that makes sense.

59
00:04:11,970 --> 00:04:14,100
And again, this was just my preference.

60
00:04:14,430 --> 00:04:19,769
Now, at the moment, also what you'll notice that we naturally navigate from page to page, but we're

61
00:04:19,769 --> 00:04:20,910
not closing the sidebar.

62
00:04:21,089 --> 00:04:28,920
So if you want to, you can go here and then you can go with really, what was the toggle sidebar really

63
00:04:28,920 --> 00:04:31,020
bad on remembering my own function?

64
00:04:31,020 --> 00:04:32,640
So hopefully this was correct.

65
00:04:33,060 --> 00:04:38,850
And then remember, for now, links we want to pass it in subtitle sidebar is equal to a toggle sidebar.

66
00:04:39,150 --> 00:04:44,100
And now what you'll notice is the fact that once we click, we also nicely close it.

67
00:04:44,490 --> 00:04:46,200
Now this is really up to you.

68
00:04:46,440 --> 00:04:52,740
I think in my case, I'm not going to use it, but it's definitely a case if you think otherwise.

69
00:04:53,100 --> 00:04:58,740
So let me remove it here, and I think I'll also remove here if I'll ever change my mind.

70
00:04:58,770 --> 00:04:59,460
I'll let you know.

71
00:05:00,380 --> 00:05:02,510
Basically, you'll have to watch me.

72
00:05:02,610 --> 00:05:05,270
I want to set it up from the scratch one more time.

73
00:05:05,600 --> 00:05:08,360
And with this in place, we're done with all three of them.

74
00:05:08,690 --> 00:05:12,440
The no small side bar as well as the big sidebar.