1 00:00:00,050 --> 00:00:00,470 All right. 2 00:00:00,710 --> 00:00:07,400 Up next, let's work on the layout for our dashboard page, which is going to be somewhat complex because 3 00:00:07,400 --> 00:00:10,040 there are a lot of moving pieces. 4 00:00:10,340 --> 00:00:13,100 And let's start with our main goal. 5 00:00:13,130 --> 00:00:19,400 So effectively, this is the look we'll have on a small screen where we have a nav bar on top and then 6 00:00:19,400 --> 00:00:21,450 the page content below it. 7 00:00:21,470 --> 00:00:25,130 And then once I click, I display the small sidebar. 8 00:00:25,160 --> 00:00:29,540 So notice how the small sidebar is only going to be. 9 00:00:30,410 --> 00:00:36,440 Visible on a small screen and we'll do that using the CSS. 10 00:00:36,440 --> 00:00:40,160 And once we get to the big screen, we'll actually have a two column layout. 11 00:00:40,250 --> 00:00:46,400 So this is going to be the big sidebar, which only is rendered on a big screen. 12 00:00:46,550 --> 00:00:52,750 And right next to it we'll have the same nav bar and right below it we'll have the page content. 13 00:00:52,760 --> 00:00:54,340 So let's start working on that. 14 00:00:54,350 --> 00:00:56,510 We're going to go to components. 15 00:00:56,900 --> 00:01:05,510 We'll start with big sidebar, and since we have some CSS that already controls when the actual element 16 00:01:05,510 --> 00:01:12,260 is displayed, let's also right away import the wrapper for the big sidebar. 17 00:01:12,260 --> 00:01:15,920 And yes, of course we'll work on that CSS, so I'll show you how we can do that. 18 00:01:15,920 --> 00:01:16,430 But. 19 00:01:17,230 --> 00:01:20,680 Definitely import it because it's going to be easier to see what's happening. 20 00:01:20,680 --> 00:01:24,460 So we're looking for the wrapper and not the landing page. 21 00:01:25,250 --> 00:01:30,710 We actually want to go over here and we're looking for the big sidebar and then it doesn't really matter 22 00:01:30,710 --> 00:01:31,670 what you return. 23 00:01:32,380 --> 00:01:40,030 Make sure that you set up the wrapper because again, there is some CSS which right away hides it on 24 00:01:40,030 --> 00:01:40,960 the small screen. 25 00:01:41,640 --> 00:01:45,420 And after that we want to go to components. 26 00:01:45,420 --> 00:01:47,790 So let me open this one up as well. 27 00:01:47,970 --> 00:01:52,230 And we're looking for small sidebar, JSX again. 28 00:01:52,500 --> 00:01:59,940 Let's set up some kind of div and let's repeat where we want to grab the wrapper and we'll do I think 29 00:01:59,940 --> 00:02:01,440 the same thing for NAV bar as well. 30 00:02:01,440 --> 00:02:02,610 So copy and paste. 31 00:02:03,450 --> 00:02:05,070 Not the big sidebar. 32 00:02:05,460 --> 00:02:06,300 Let's remove. 33 00:02:06,300 --> 00:02:08,340 And we're looking for the small one. 34 00:02:08,490 --> 00:02:11,190 And again, we just want to place the wrapper. 35 00:02:11,490 --> 00:02:11,850 Okay. 36 00:02:11,850 --> 00:02:12,540 Awesome. 37 00:02:12,990 --> 00:02:15,630 At the very end, let's also create a nav bar. 38 00:02:16,430 --> 00:02:17,630 Same deal. 39 00:02:17,960 --> 00:02:19,430 Let's create the component. 40 00:02:19,460 --> 00:02:24,500 Now, this one is probably not that important since there's always going to be a nav bar displayed on 41 00:02:24,500 --> 00:02:24,860 a page. 42 00:02:24,860 --> 00:02:26,320 But still, you know what? 43 00:02:26,330 --> 00:02:27,330 Let's stay consistent. 44 00:02:27,360 --> 00:02:28,730 Let's also grab. 45 00:02:29,930 --> 00:02:31,010 The rapper. 46 00:02:31,600 --> 00:02:33,700 For our nav bar as well. 47 00:02:34,600 --> 00:02:35,330 So let's see. 48 00:02:35,330 --> 00:02:35,880 Yep. 49 00:02:36,010 --> 00:02:36,640 So we're here. 50 00:02:36,640 --> 00:02:38,130 So let me add it. 51 00:02:39,010 --> 00:02:40,810 In return, and we're good to go. 52 00:02:40,810 --> 00:02:42,880 Now we just want to go to the index. 53 00:02:43,680 --> 00:02:45,120 And essentially copy and paste. 54 00:02:45,120 --> 00:02:48,330 So one, two, three, and let's change these values around. 55 00:02:48,480 --> 00:02:51,090 So we're looking for a big sidebar first. 56 00:02:52,020 --> 00:02:54,540 Then we also want to set up the small sidebar. 57 00:02:55,790 --> 00:02:56,920 At the very end. 58 00:02:56,920 --> 00:03:00,810 We want to go here and we want to add the nav bar. 59 00:03:00,820 --> 00:03:02,350 We have all of these in place. 60 00:03:02,350 --> 00:03:05,200 So now let's navigate to a dashboard layout. 61 00:03:05,260 --> 00:03:07,840 And again, let's grab the wrapper. 62 00:03:09,020 --> 00:03:11,960 And in this case, we're looking for the dashboard one. 63 00:03:13,200 --> 00:03:16,350 So let's remove not the dashboard form page. 64 00:03:16,350 --> 00:03:17,700 This is going to be a little bit different. 65 00:03:17,700 --> 00:03:19,650 We're looking for the dashboard one. 66 00:03:20,190 --> 00:03:22,050 We'll start with a wrapper. 67 00:03:22,050 --> 00:03:23,940 So we are returning that one. 68 00:03:23,940 --> 00:03:28,770 And as far as the structure we want to go with Main and the class will be Dashboard. 69 00:03:30,690 --> 00:03:34,470 Then inside of the main, we'll set up the small sidebar. 70 00:03:35,130 --> 00:03:36,600 As well as the big one. 71 00:03:37,140 --> 00:03:40,440 And notice how nicely the auto imports work. 72 00:03:41,570 --> 00:03:44,870 And then right below them we'll have Div in there. 73 00:03:44,870 --> 00:03:46,460 We'll have the nav bar. 74 00:03:47,790 --> 00:03:49,410 And another div. 75 00:03:50,870 --> 00:03:53,180 With a class of dashboard page. 76 00:03:56,460 --> 00:04:00,180 And inside of this div, this is where finally we'll have the outlet. 77 00:04:00,210 --> 00:04:02,160 So let me just save this. 78 00:04:03,370 --> 00:04:04,630 And notice the look. 79 00:04:04,750 --> 00:04:08,920 So effectively we have the main with the class of dashboard. 80 00:04:10,090 --> 00:04:11,110 Inside of it. 81 00:04:11,140 --> 00:04:13,750 We'll have the small sidebar and big sidebar. 82 00:04:13,750 --> 00:04:21,910 And using the CSS, I only display one of those components based on the screen size. 83 00:04:22,089 --> 00:04:27,130 So big sidebar is hidden by default on the big screen. 84 00:04:27,490 --> 00:04:31,930 We can only see it on the small screen and it's probably going to be easier to see over here. 85 00:04:31,930 --> 00:04:34,480 So notice this is my big sidebar. 86 00:04:34,480 --> 00:04:39,070 Once we get to the big screen and this is going to be the small sidebar. 87 00:04:39,070 --> 00:04:44,200 So we're toggling that using CSS and yes, of course, I'll cover the entire setup. 88 00:04:44,230 --> 00:04:45,490 Then we have the div. 89 00:04:45,490 --> 00:04:52,420 So this is the second column and the nav bar is always going to be there regardless of the screen size. 90 00:04:52,420 --> 00:04:59,050 And then right below it we have the dashboard page and this is where we have the entire content. 91 00:04:59,290 --> 00:05:06,310 And up next I want to set up the CSS, so if you're interested, don't skip that video and you'll see 92 00:05:06,310 --> 00:05:11,390 how we set up the column layout for our dashboard page.