1 00:00:00,110 --> 00:00:00,640 Okay. 2 00:00:00,650 --> 00:00:04,350 And when it comes to NAV bar, this is what we're shooting for. 3 00:00:04,370 --> 00:00:08,170 So there's going to be a toggle button for the sidebar. 4 00:00:08,180 --> 00:00:14,930 And again, this toggle button is going to control both sidebars, the big one and the small one. 5 00:00:15,200 --> 00:00:17,380 It's just going to depend on the screen size. 6 00:00:17,390 --> 00:00:21,020 So on the screen size, we'll display the small one and then. 7 00:00:21,770 --> 00:00:28,010 Of course, on a big screen, we'll control the big one and then we'll have some kind of text here. 8 00:00:28,400 --> 00:00:30,620 And on a small one we'll have the logo. 9 00:00:30,630 --> 00:00:33,580 Again, this is just going to depend on the screen size. 10 00:00:33,590 --> 00:00:41,240 There's also going to be a functionality to control the theme and also an option to log out. 11 00:00:41,330 --> 00:00:45,020 So those are the things we want to set up in the nav bar. 12 00:00:45,410 --> 00:00:52,670 And as far as the imports, we want to grab the wrapper, which we already have, we'll need an icon. 13 00:00:52,670 --> 00:00:54,920 So for this one I'll use the icon. 14 00:00:54,920 --> 00:00:57,020 And also we want to grab the logo. 15 00:00:57,020 --> 00:01:02,840 Remember, that was one of the first components we set up and at the very end, we also want to grab 16 00:01:02,840 --> 00:01:03,470 the context. 17 00:01:03,500 --> 00:01:04,069 Why? 18 00:01:04,099 --> 00:01:07,490 Well, because every time we'll click on this function, we'll toggle what? 19 00:01:07,520 --> 00:01:08,870 We'll toggle the sidebar. 20 00:01:08,870 --> 00:01:14,380 And if you remember, we already created a placeholder function for that. 21 00:01:14,390 --> 00:01:22,790 So instead of for home, the icon name is going to be following, we're going to go with for align left. 22 00:01:22,820 --> 00:01:24,440 It's still coming from. 23 00:01:25,030 --> 00:01:27,850 The font awesome library, so that doesn't change. 24 00:01:27,880 --> 00:01:29,830 Also, we want to grab the logo. 25 00:01:29,830 --> 00:01:30,790 But you know what? 26 00:01:31,390 --> 00:01:33,430 Think I'm just going to use the auto import. 27 00:01:33,430 --> 00:01:34,780 So let's start with the wrapper. 28 00:01:34,780 --> 00:01:37,950 Instead of the wrapper, we'll place a nav center again. 29 00:01:37,960 --> 00:01:39,360 CSS is coming up. 30 00:01:39,370 --> 00:01:44,080 Then we want to go with button type is going to be equal to a button. 31 00:01:45,240 --> 00:01:50,070 And we want to add the class name of toggle hyphen BTN. 32 00:01:50,250 --> 00:01:53,480 And on click this is where we'll toggle the sidebar. 33 00:01:53,490 --> 00:01:54,150 But you know what? 34 00:01:54,150 --> 00:01:59,640 Let's first set up the entire return and then we'll worry about it. 35 00:01:59,640 --> 00:02:04,710 So this is the first div, the nav center, and then right next to the button. 36 00:02:05,010 --> 00:02:10,050 But still within this div we'll create another one and in here we'll have the logo. 37 00:02:11,310 --> 00:02:12,630 So that's the component. 38 00:02:12,630 --> 00:02:15,540 And for some reason, again, it's not importing. 39 00:02:16,370 --> 00:02:17,390 So let's try it out. 40 00:02:17,390 --> 00:02:17,630 Okay. 41 00:02:17,660 --> 00:02:18,920 Logo from logo. 42 00:02:18,920 --> 00:02:21,770 And then right below it we'll have the text. 43 00:02:21,800 --> 00:02:25,820 So again, depending on the screen size, we will toggle those things. 44 00:02:25,820 --> 00:02:27,890 So here, let's say logo text. 45 00:02:29,220 --> 00:02:31,020 And I'm just going to go with Dashboard. 46 00:02:32,010 --> 00:02:37,340 And then right outside of this div we'll set up a div with a class of BTN container. 47 00:02:37,350 --> 00:02:41,450 So for now we're not going to worry about the toggle functionality. 48 00:02:41,460 --> 00:02:45,180 So the dark theme toggle as well as the logout one. 49 00:02:45,180 --> 00:02:47,230 Let's put them on hold for now. 50 00:02:47,250 --> 00:02:49,890 So in here, let's go with BTN Container. 51 00:02:51,680 --> 00:02:54,230 And let's just type, toggle and log out. 52 00:02:54,260 --> 00:02:56,060 So all of this is coming up. 53 00:02:56,060 --> 00:03:00,110 And if everything is correct, this is what we should see on the screen. 54 00:03:00,110 --> 00:03:07,400 And once we get to the big screen, we'll just use the CSS to change from the logo to the dashboard. 55 00:03:07,400 --> 00:03:07,690 Why? 56 00:03:07,700 --> 00:03:13,700 Well, because on a big sidebar, we'll have the logo, so there's no point to have that many logos, 57 00:03:13,700 --> 00:03:15,050 at least in my opinion. 58 00:03:15,050 --> 00:03:21,650 And once we have the general structure in place, let's also grab the use dashboard context our hook. 59 00:03:22,510 --> 00:03:26,350 And more specifically get the toggle sidebar function. 60 00:03:26,350 --> 00:03:29,000 So let's go here with use dashboard context. 61 00:03:29,020 --> 00:03:29,830 Let's invoke it. 62 00:03:29,830 --> 00:03:33,280 Let's set it equal to and then from the object. 63 00:03:33,280 --> 00:03:35,980 Remember we logged in small sidebar. 64 00:03:35,980 --> 00:03:38,050 We can grab the toggle sidebar. 65 00:03:38,050 --> 00:03:40,090 That's our placeholder function. 66 00:03:41,010 --> 00:03:42,430 And when do we want to invoke it? 67 00:03:42,450 --> 00:03:44,430 Well, when we click on a button, right. 68 00:03:44,430 --> 00:03:47,040 So we're going to go over here with on click. 69 00:03:48,120 --> 00:03:50,990 And let's set it equal to toggle sidebar. 70 00:03:51,000 --> 00:03:56,310 And if everything is correct, not only we should see these elements on the screen, but also every 71 00:03:56,310 --> 00:03:57,720 time we'll click on this button. 72 00:03:58,440 --> 00:04:00,210 The sidebar. 73 00:04:00,210 --> 00:04:04,260 State value will change now since we don't have the log over there. 74 00:04:04,440 --> 00:04:05,910 It's kind of hard to see. 75 00:04:05,910 --> 00:04:12,810 So you have few options If you want, you can navigate back over here and just log and that way you'll 76 00:04:12,810 --> 00:04:18,000 clearly see over here in the small screen or you can navigate to the big screen. 77 00:04:18,930 --> 00:04:22,860 Of course you need to go to a dashboard, one where you have the nav bar. 78 00:04:22,890 --> 00:04:30,150 Then we're looking for the components and essentially we want to find the dashboard layout. 79 00:04:30,240 --> 00:04:32,070 So this one over here. 80 00:04:32,660 --> 00:04:35,840 Notice I have to state values and check it out. 81 00:04:35,840 --> 00:04:38,810 The moment I click, the first one turns true. 82 00:04:38,840 --> 00:04:41,440 Click again and it's back to false. 83 00:04:41,450 --> 00:04:44,900 And with this in place, we can set up the CSS for the nav bar.