1
00:00:00,170 --> 00:00:00,530
All right.

2
00:00:00,530 --> 00:00:05,810
And up next, let's start working on the small sidebar at the beginning we'll just set up.

3
00:00:06,860 --> 00:00:08,390
A basic structure.

4
00:00:08,720 --> 00:00:13,460
Effectively, we want to see something on a screen and then we'll worry about the functionality.

5
00:00:13,490 --> 00:00:16,850
So first, let's navigate to components.

6
00:00:17,240 --> 00:00:19,210
We're looking for a small sidebar.

7
00:00:19,220 --> 00:00:24,770
We already have the use dashboard context, which eventually we will implement.

8
00:00:24,800 --> 00:00:30,620
For now, we just want to go with wrapper and inside of the wrapper let's set up a div.

9
00:00:30,740 --> 00:00:35,240
Now this div is going to have a following structure.

10
00:00:35,420 --> 00:00:41,870
We'll set up a class name and right away, right out of the gate, we'll set up two classes.

11
00:00:41,870 --> 00:00:48,530
One is going to be sidebar container and then show sidebar because we'll use the show sidebar to toggle

12
00:00:48,560 --> 00:00:49,800
the small sidebar.

13
00:00:49,820 --> 00:00:52,670
Effectively, if the class is present, then we'll display it.

14
00:00:52,700 --> 00:00:54,710
If not, then it's going to be hidden.

15
00:00:54,710 --> 00:00:59,180
And since I want to see something on a screen as we're building it, therefore, of course I'll add

16
00:00:59,180 --> 00:01:00,830
it and this is what I'm talking about.

17
00:01:00,830 --> 00:01:05,459
So eventually we will use the values from our context to control it.

18
00:01:05,480 --> 00:01:07,510
For now, let's just hard code.

19
00:01:07,530 --> 00:01:10,740
So we're going to go here with sidebar container and show.

20
00:01:11,410 --> 00:01:12,250
Sidebar.

21
00:01:12,250 --> 00:01:16,030
And of course, once we'll set up the CSS, you'll see the actual logic.

22
00:01:16,070 --> 00:01:18,060
And notice once we do that, it gets darker.

23
00:01:18,070 --> 00:01:19,930
Effectively, we get the overlay.

24
00:01:19,960 --> 00:01:25,930
Now inside of it we're going to go with another div and here we'll have the content and we'll start

25
00:01:25,930 --> 00:01:27,970
by setting up the close button.

26
00:01:27,970 --> 00:01:29,890
So we want to go here with button.

27
00:01:30,220 --> 00:01:34,510
The type will be button somewhat straightforward.

28
00:01:34,550 --> 00:01:36,550
Then let's add a class name.

29
00:01:36,580 --> 00:01:46,840
Close hyphen BTN and inside of this button we want to set up a icon and the icon name is for times.

30
00:01:47,640 --> 00:01:48,510
Let me see.

31
00:01:48,620 --> 00:01:50,820
Sometimes This one over here?

32
00:01:50,970 --> 00:01:51,690
Yep.

33
00:01:51,900 --> 00:01:52,560
Everything worked.

34
00:01:52,590 --> 00:01:56,100
Notice this is my small sidebar, and this is my button now.

35
00:01:56,100 --> 00:01:56,850
Eventually.

36
00:01:57,560 --> 00:01:59,720
Once we click, of course we'll close it.

37
00:01:59,720 --> 00:02:06,470
And then right after the button we have a header and we want to set up our logo, something we already

38
00:02:06,470 --> 00:02:07,310
did before.

39
00:02:07,310 --> 00:02:10,039
And for some reason it's not importing.

40
00:02:10,280 --> 00:02:12,440
So let me grab the logo from logo.

41
00:02:12,470 --> 00:02:14,240
Yep, that should do it.

42
00:02:14,240 --> 00:02:19,940
And then we want to set up a div right below it with a list of links.

43
00:02:19,940 --> 00:02:28,190
So I'll add a nav links class and then we'll iterate over the links array we just set up in the utils.

44
00:02:28,190 --> 00:02:29,710
So let me try.

45
00:02:29,720 --> 00:02:36,800
I'm going to go with the links and fortunately it's not getting here, so let me go with import links

46
00:02:36,800 --> 00:02:38,900
and let me double check that I export.

47
00:02:39,170 --> 00:02:39,890
Of course not.

48
00:02:39,890 --> 00:02:43,670
So I'm going to go here with export default and links.

49
00:02:44,030 --> 00:02:44,780
Let me save it.

50
00:02:44,780 --> 00:02:49,360
And then back in the small sidebar, we want to go here with links from the utils.

51
00:02:49,370 --> 00:02:50,330
Okay, beautiful.

52
00:02:50,330 --> 00:02:57,360
And then we want to iterate over so I'll have my links array and then pretty much for every item I want

53
00:02:57,360 --> 00:03:03,000
to return a nav link and effectively nav link component is very similar to a link.

54
00:03:03,000 --> 00:03:05,760
It's going to navigate to that specific page.

55
00:03:05,760 --> 00:03:11,310
However, there are some advantages which we're going to use and I'll talk about them a little bit later.

56
00:03:11,310 --> 00:03:14,880
So basically I want to iterate over those links now, remember.

57
00:03:15,860 --> 00:03:19,340
In the callback function in a map we can pass in the parameter.

58
00:03:19,520 --> 00:03:25,250
And effectively I'm just referencing right now that object we created in the previous video.

59
00:03:25,250 --> 00:03:34,700
And I know that the object has three properties the text path and icon and let's set it equal to a link.

60
00:03:34,790 --> 00:03:36,710
And now what do we want to return?

61
00:03:37,460 --> 00:03:40,910
In each iteration we want to go with nav link.

62
00:03:40,910 --> 00:03:47,990
So that's the component again coming from React router Dom and nav link has the same to prop and essentially

63
00:03:47,990 --> 00:03:49,940
in here we want to pass in the path.

64
00:03:49,940 --> 00:03:52,340
Then key is going to be equal to text.

65
00:03:52,340 --> 00:03:59,870
Since we didn't set up the IDs, we do want to add a class name of nav link again eventually.

66
00:04:00,580 --> 00:04:05,400
We will also set up the on click, but that is coming up.

67
00:04:05,410 --> 00:04:12,340
And then in here inside of this one, we want to go span and we'll add a class name.

68
00:04:12,980 --> 00:04:14,630
Classname of icon.

69
00:04:14,630 --> 00:04:23,300
And remember, there's also a property we can access, which is icon and then right outside of the span.

70
00:04:23,300 --> 00:04:24,680
So this is a little bit tricky.

71
00:04:24,680 --> 00:04:26,690
We want to pass here the text.

72
00:04:26,930 --> 00:04:28,100
Let's save it.

73
00:04:28,130 --> 00:04:31,730
If everything is correct, this is what we should see on the screen.

74
00:04:31,730 --> 00:04:34,970
So notice these are our links.

75
00:04:34,970 --> 00:04:37,970
And in this case, we're using the nav link component.

76
00:04:38,060 --> 00:04:44,420
Now here's the gotcha notice we navigate to the correct page, but nothing changes.

77
00:04:44,510 --> 00:04:45,320
Why is that?

78
00:04:45,320 --> 00:04:51,740
Well, because we're not closing the sidebar so we can nicely see in the URL bar that actually our path

79
00:04:51,740 --> 00:04:52,580
is changing.

80
00:04:52,580 --> 00:04:58,250
So notice we go to all jobs, then back to Dashboard Profile and all of them.

81
00:04:58,250 --> 00:04:59,660
So everything works.

82
00:05:00,020 --> 00:05:05,990
We just need to make sure that we close the sidebar and this is something that we're going to do in

83
00:05:05,990 --> 00:05:06,920
the next video.