1 00:00:00,050 --> 00:00:00,590 All right. 2 00:00:00,710 --> 00:00:05,100 And once we have the nav bar in place now let's set up the links data. 3 00:00:05,120 --> 00:00:06,470 So what am I talking about? 4 00:00:06,500 --> 00:00:10,640 Well, we'll have the big sidebar as well as the small sidebar. 5 00:00:10,640 --> 00:00:13,730 And in both of them, we'll have list of links. 6 00:00:14,350 --> 00:00:17,500 Which of course are going to represent our pages. 7 00:00:17,710 --> 00:00:21,280 And for each link I want to have three things. 8 00:00:21,430 --> 00:00:22,890 I want to set up the path. 9 00:00:22,900 --> 00:00:30,910 So whether it's going to be all jobs, stats or any of the other pages, then we want to set up a text. 10 00:00:30,940 --> 00:00:36,250 Basically what we're going to show to the user as well as the icon. 11 00:00:37,070 --> 00:00:45,110 And since I'm going to use it in multiple places, it only makes sense to set it up as a data somewhere 12 00:00:45,110 --> 00:00:45,800 separately. 13 00:00:45,800 --> 00:00:52,790 And then I can import, I can iterate over and I can display those links again in multiple places. 14 00:00:52,910 --> 00:00:54,560 And in order to do that. 15 00:00:55,260 --> 00:00:59,310 We want to create the utils folder and a links. 16 00:00:59,340 --> 00:01:06,660 JS And this is the case where I will copy and paste the imports from the Readme. 17 00:01:06,690 --> 00:01:13,110 There's really no point for you to watch how I pretty much import these particular icons. 18 00:01:13,140 --> 00:01:16,710 Also, please keep in mind that you can change the icons if you want. 19 00:01:16,800 --> 00:01:19,250 Essentially we want to set up import from react. 20 00:01:19,260 --> 00:01:23,520 This is a must since these are react components. 21 00:01:23,610 --> 00:01:26,030 Then we want to come up with an array. 22 00:01:26,040 --> 00:01:31,800 In my case, I'm going to call this links and like I said, text path and I'll discuss this dot a little 23 00:01:31,800 --> 00:01:32,580 bit later. 24 00:01:32,580 --> 00:01:35,810 But rest of them should be very straightforward. 25 00:01:35,820 --> 00:01:39,600 Notice I have text all jobs path, all jobs. 26 00:01:39,720 --> 00:01:48,780 Essentially it points to my page and remember we already set up the pages in the app.js and then whichever 27 00:01:48,780 --> 00:01:50,900 icon I want to display. 28 00:01:50,910 --> 00:01:54,450 So first let me again copy these ones. 29 00:01:54,450 --> 00:01:57,880 Like I said, there's no point to type them together. 30 00:01:58,090 --> 00:02:00,670 Let me collapse everything in the source. 31 00:02:00,670 --> 00:02:03,430 I want to create a new folder utils one. 32 00:02:04,320 --> 00:02:10,770 And instead of the utils, we're going to create a file and we're going to call this links j. 33 00:02:10,770 --> 00:02:11,850 S x. 34 00:02:12,390 --> 00:02:15,450 Let's paste our import. 35 00:02:15,600 --> 00:02:18,600 And then also let me grab the react. 36 00:02:18,600 --> 00:02:20,880 So import react from. 37 00:02:21,800 --> 00:02:22,670 And react. 38 00:02:22,670 --> 00:02:23,870 Okay, Awesome. 39 00:02:23,870 --> 00:02:25,780 And now let me set up that array. 40 00:02:25,790 --> 00:02:27,410 I'll collapse the sidebar. 41 00:02:27,530 --> 00:02:29,030 Const links. 42 00:02:30,100 --> 00:02:32,110 And then it's going to be an array. 43 00:02:32,140 --> 00:02:34,300 Each and every item is going to be an object. 44 00:02:34,300 --> 00:02:36,280 And in there I'll have three properties. 45 00:02:36,280 --> 00:02:37,690 First one is going to be text. 46 00:02:37,690 --> 00:02:39,430 So add job. 47 00:02:39,460 --> 00:02:40,390 Then path. 48 00:02:40,390 --> 00:02:45,520 Like I said, I'm going to discuss this dot in following videos. 49 00:02:45,520 --> 00:02:50,800 For now, let's just type it and I'll explain why we need to do that a little bit later. 50 00:02:50,800 --> 00:02:53,770 And then as far as the icon, I'm going to go with this one right now. 51 00:02:54,610 --> 00:02:56,680 So let me close this component. 52 00:02:58,060 --> 00:03:02,380 That is going to be my first page and I need four more. 53 00:03:02,380 --> 00:03:04,990 So one, two, three, four. 54 00:03:05,770 --> 00:03:06,460 Like so. 55 00:03:06,700 --> 00:03:09,610 So the next one is going to be the all jobs. 56 00:03:09,790 --> 00:03:11,740 Or maybe I copied one too many. 57 00:03:11,740 --> 00:03:12,670 That's okay. 58 00:03:12,760 --> 00:03:13,690 All jobs. 59 00:03:13,690 --> 00:03:16,150 That's going to be the text as far as the path. 60 00:03:17,840 --> 00:03:19,280 I'll set it as all jobs. 61 00:03:19,280 --> 00:03:27,230 And as a quick side note, the reason why I have those paths is following notice stats, all jobs and 62 00:03:27,230 --> 00:03:27,820 rest of them. 63 00:03:27,830 --> 00:03:29,120 Hopefully that is clear. 64 00:03:29,270 --> 00:03:32,120 So the last thing we want to do is change the icon. 65 00:03:32,120 --> 00:03:36,860 Instead of this one, we're going to go with the MD one. 66 00:03:37,940 --> 00:03:39,470 Yep, that's the one. 67 00:03:39,890 --> 00:03:44,060 Then we want to set up the stats one. 68 00:03:45,060 --> 00:03:47,310 So text is going to be stats. 69 00:03:47,820 --> 00:03:51,150 Path is going to be also stats. 70 00:03:51,600 --> 00:03:55,050 And then as far as the icon I'm going to go with i o. 71 00:03:56,220 --> 00:03:57,090 The bar chart. 72 00:03:57,140 --> 00:04:00,270 One After that, we have the profile. 73 00:04:01,990 --> 00:04:03,610 Same deal over here. 74 00:04:05,360 --> 00:04:07,940 So the path is also going to be profile. 75 00:04:09,420 --> 00:04:12,360 And then let's set up the Im. 76 00:04:12,900 --> 00:04:13,530 Okay. 77 00:04:13,620 --> 00:04:15,810 And then the last one is the admin one. 78 00:04:16,350 --> 00:04:18,000 So admin here. 79 00:04:19,760 --> 00:04:20,600 I'd been here. 80 00:04:22,310 --> 00:04:25,130 And lastly, let's change this to again MD. 81 00:04:26,860 --> 00:04:30,400 And the panel settings one and with this in place. 82 00:04:31,160 --> 00:04:34,280 We are ready to set up the small sidebar.