1 00:00:00,170 --> 00:00:00,770 All right. 2 00:00:00,770 --> 00:00:06,830 And once we have the CSS in place now let's set up NAV links as a separate component. 3 00:00:06,920 --> 00:00:12,410 You see, we will use the same links in the small sidebar as well as the big one. 4 00:00:12,690 --> 00:00:18,710 And even though technically we can import the same way the links in the big sidebar, it kind of makes 5 00:00:18,710 --> 00:00:21,920 sense to just set up a separate component. 6 00:00:21,950 --> 00:00:27,290 So first let's navigate to a components is going to be somewhat straightforward. 7 00:00:27,500 --> 00:00:30,150 We're basically we'll just copy and paste over here. 8 00:00:30,170 --> 00:00:35,660 It's not going to be NAV bar, it's going to be NAV links JS. 9 00:00:36,110 --> 00:00:37,640 So that's my component. 10 00:00:37,640 --> 00:00:40,430 And here I want to grab the links. 11 00:00:40,430 --> 00:00:48,110 I want to grab the nav link from React Router Dom as well as the use dashboard context. 12 00:00:48,820 --> 00:00:52,690 Since we'll also need an axis to toggle sidebar. 13 00:00:52,720 --> 00:00:55,300 So first let's create this component. 14 00:00:55,300 --> 00:00:56,320 And then. 15 00:00:57,020 --> 00:01:03,230 I guess in this case we'll have to manually import because auto imports won't work since we'll copy 16 00:01:03,230 --> 00:01:04,030 and paste. 17 00:01:04,040 --> 00:01:09,170 So first let's go with import and then use dashboard context. 18 00:01:09,170 --> 00:01:10,400 That's the first one. 19 00:01:10,520 --> 00:01:12,740 Then we want to grab the links. 20 00:01:12,950 --> 00:01:14,510 So links from utils. 21 00:01:14,510 --> 00:01:19,100 And then lastly, we also want to grab the nav link. 22 00:01:20,090 --> 00:01:23,910 So this is coming of course, from the React router dom. 23 00:01:23,930 --> 00:01:29,620 Then we want to navigate to the small sidebar and pretty much take this entire div. 24 00:01:29,630 --> 00:01:32,820 So this is where we'll import and set up the component. 25 00:01:32,840 --> 00:01:34,160 Let's cut it out. 26 00:01:34,340 --> 00:01:36,380 Then let's navigate back over here. 27 00:01:36,410 --> 00:01:37,940 This is what we're returning. 28 00:01:37,940 --> 00:01:39,440 And now let's just check. 29 00:01:40,050 --> 00:01:41,670 Whether we have everything. 30 00:01:41,670 --> 00:01:42,840 So we have the links. 31 00:01:42,840 --> 00:01:48,990 Okay, we imported that, but we don't have the toggle sidebar correct. 32 00:01:48,990 --> 00:01:52,250 And therefore we'll go with use dashboard context. 33 00:01:52,260 --> 00:01:59,240 We will invoke it and we'll set it equal to and we'll right away the structure toggle sidebar. 34 00:01:59,250 --> 00:02:05,700 Now I'll also grab the user, even though at the moment we won't use it because later, once we set 35 00:02:05,700 --> 00:02:10,259 up the admin functionality, actually we'll hide a link. 36 00:02:10,940 --> 00:02:13,520 Based on the user role. 37 00:02:13,550 --> 00:02:15,410 Again, all of that is coming up. 38 00:02:15,410 --> 00:02:16,810 Let's save it over here. 39 00:02:16,820 --> 00:02:19,370 Let's navigate to a small sidebar. 40 00:02:20,090 --> 00:02:25,580 And we want to grab over here the nav links component. 41 00:02:25,820 --> 00:02:27,410 So nav links. 42 00:02:28,170 --> 00:02:34,080 And yes, we're not setting up any kind of import export in the index since we're only going to use 43 00:02:34,080 --> 00:02:34,920 it over here. 44 00:02:34,920 --> 00:02:36,780 And if everything is correct. 45 00:02:37,500 --> 00:02:40,140 We should see the same result again. 46 00:02:40,170 --> 00:02:48,030 The bonus right now is the fact that we can use the same NAV links component in the big sidebar, which 47 00:02:48,030 --> 00:02:50,160 is actually something we're going to build next.