1 00:00:00,390 --> 00:00:03,420 So let's start working in the components, I guess. 2 00:00:03,750 --> 00:00:04,860 We're going to go new file. 3 00:00:05,160 --> 00:00:10,290 I'm going to go with a knife bar and a jazz, so I create the component. 4 00:00:10,680 --> 00:00:13,680 And right from the get go, I'm going to grab my wrapper. 5 00:00:14,190 --> 00:00:16,140 So import of wrapper. 6 00:00:16,379 --> 00:00:17,640 Now that is coming from. 7 00:00:17,910 --> 00:00:20,130 And then, like I said, I need to go to the assets. 8 00:00:20,400 --> 00:00:21,720 More specifically, wrappers. 9 00:00:21,930 --> 00:00:23,730 And now let's look for number one. 10 00:00:24,300 --> 00:00:25,200 OK, good. 11 00:00:25,530 --> 00:00:27,570 Then let's right away, use it. 12 00:00:27,810 --> 00:00:33,620 So let's say you're a rapper, and as far as the return, I'm going to go with heading for another. 13 00:00:34,020 --> 00:00:35,060 Let's say it. 14 00:00:35,070 --> 00:00:38,160 I don't think I'm going to do it anything right now. 15 00:00:38,160 --> 00:00:41,190 In the next year, I'll create a rest of the components. 16 00:00:41,790 --> 00:00:47,310 So let's say here small and then side bar guys, same drill. 17 00:00:47,730 --> 00:00:51,570 Let's create the component, then let's import our wrapper. 18 00:00:52,070 --> 00:00:55,340 And I think this is going to be the case where we can simply copy and paste. 19 00:00:55,350 --> 00:00:58,170 Just make sure that you change the file here. 20 00:00:58,740 --> 00:00:59,970 So let's go here. 21 00:01:00,300 --> 00:01:04,470 Not with not but a small sidebar like. 22 00:01:05,370 --> 00:01:06,000 Same deal. 23 00:01:06,510 --> 00:01:10,500 We use the wrapper here and then we're going to go with heading for. 24 00:01:10,800 --> 00:01:12,450 And small sidebar. 25 00:01:13,140 --> 00:01:13,590 All right. 26 00:01:13,620 --> 00:01:14,190 Beautiful. 27 00:01:14,490 --> 00:01:18,990 And then lastly, let's do the same thing with big and sidebar jazz. 28 00:01:20,170 --> 00:01:25,810 Let's create the component, Van, let's import everything, I think I already have it in a clipboard, 29 00:01:25,810 --> 00:01:32,140 so it looks about right now I just need to change the file name and in this case, I'm looking for a 30 00:01:32,140 --> 00:01:32,860 big side bar. 31 00:01:33,430 --> 00:01:34,900 Let's had the wrapper here. 32 00:01:35,260 --> 00:01:41,590 And then let's go with heading for and Big Side Bar with all of these ones in place. 33 00:01:41,740 --> 00:01:48,280 Now let's navigate to the imagery in the components, and one by one, let's explore them as well. 34 00:01:48,670 --> 00:01:56,290 So and here I'm looking for an avatar, also looking for a big sidebar or big sidebar here. 35 00:01:56,650 --> 00:02:02,950 And I also want to grab what when I grab the small one so small sidebar, right? 36 00:02:03,010 --> 00:02:05,320 And let's take all of these suckers here. 37 00:02:06,130 --> 00:02:07,720 Let's add commas right away. 38 00:02:07,720 --> 00:02:09,430 So we don't have some weird bugs. 39 00:02:09,889 --> 00:02:11,490 Let's move them. 40 00:02:11,590 --> 00:02:13,070 So I'll cut it out here. 41 00:02:13,090 --> 00:02:15,820 Copy and paste and we are in good shape. 42 00:02:16,270 --> 00:02:21,520 Now let's navigate back to our what our shared layout correct. 43 00:02:21,880 --> 00:02:23,140 So I'll open this one up. 44 00:02:24,280 --> 00:02:28,660 And then one by one, I'll close the times because again, I'm somewhat OCD about that. 45 00:02:28,900 --> 00:02:31,900 And I just like that I have less time. 46 00:02:31,900 --> 00:02:33,850 So here, here and here. 47 00:02:33,940 --> 00:02:41,680 Essentially, what I want to do is import all of them from the component, and then let's set up the 48 00:02:41,690 --> 00:02:43,420 two column layout structure. 49 00:02:43,810 --> 00:02:45,740 So let's go here with import. 50 00:02:46,120 --> 00:02:47,950 And I'm looking for all of them. 51 00:02:47,960 --> 00:02:54,250 So no sidebar, small sidebar from online, we go up to components. 52 00:02:54,610 --> 00:02:56,800 Now this will be two levels up. 53 00:02:57,160 --> 00:02:58,030 Keep that in mind. 54 00:02:58,600 --> 00:03:01,240 And then I also want to remove this comma. 55 00:03:01,270 --> 00:03:02,050 So let's save it. 56 00:03:02,440 --> 00:03:03,760 I have my components. 57 00:03:04,160 --> 00:03:10,120 And as far as the layout, well, it's going to go something like this where I'm going to have the wrapper, 58 00:03:10,720 --> 00:03:13,510 which is coming from shared layout, correct? 59 00:03:13,810 --> 00:03:17,950 So if you want to take a look at the case, that's basically how I set up the two column layout. 60 00:03:18,130 --> 00:03:20,530 Please just navigate there and you'll see all the code. 61 00:03:20,950 --> 00:03:24,370 But inside of the wrapper, I have the main tag. 62 00:03:24,730 --> 00:03:28,420 And then for this one, I want to add the class name of the dashboard. 63 00:03:28,870 --> 00:03:32,230 So that's the class for this particular element. 64 00:03:32,680 --> 00:03:34,540 And then inside of this element? 65 00:03:35,550 --> 00:03:41,310 There's going to be a small sidebar, big sidebar, and then there, which is going to be that second 66 00:03:41,310 --> 00:03:41,670 column. 67 00:03:42,120 --> 00:03:47,100 So for time, being outdoors is going to stay here, but eventually, of course, will move it inside 68 00:03:47,100 --> 00:03:48,360 of this second column. 69 00:03:48,750 --> 00:03:56,220 So let's go up here and let's say small sidebar, and then the next one will be a big sidebar. 70 00:03:56,700 --> 00:04:02,640 And before I placed the outlet inside of there, first of all, I want to add a few more things in there. 71 00:04:02,970 --> 00:04:08,250 And second, let's right away talk about this because as you're looking at, you're like, Hey, man, 72 00:04:08,670 --> 00:04:10,600 what are you talking about here? 73 00:04:10,650 --> 00:04:12,180 Small sidebar, big sidebar. 74 00:04:12,390 --> 00:04:13,500 And then you have to do. 75 00:04:14,130 --> 00:04:16,200 How come this is a to call map? 76 00:04:16,740 --> 00:04:18,899 And this is something that I want to mention that. 77 00:04:19,930 --> 00:04:27,040 If I can, I actually set up the display functionality in the CSIS. 78 00:04:27,340 --> 00:04:28,580 Now what am I mean by that? 79 00:04:28,600 --> 00:04:35,140 Well, if you take a look at the wrappers more specifically small sidebar and big sidebar, which you'll 80 00:04:35,140 --> 00:04:40,270 notice is that I'm using CIUSSS to hide it. 81 00:04:40,450 --> 00:04:43,240 Let's say big sidebar is hidden by default. 82 00:04:43,630 --> 00:04:44,530 Display none. 83 00:04:44,890 --> 00:04:49,780 And only once I get to nine hundred ninety two, then I display the big sidebar. 84 00:04:50,440 --> 00:04:56,410 Now you can probably already guessed that the same is in a small sidebar only other way around. 85 00:04:57,130 --> 00:05:01,960 So now, once I get to 992, I hide the small sidebar. 86 00:05:02,350 --> 00:05:09,250 But if the screen size is smaller than this is what we display as far as small sidebar is concerned. 87 00:05:09,700 --> 00:05:14,080 And again, it's just my preference to do that using CSS. 88 00:05:14,380 --> 00:05:20,770 Now, can you set up the logic here, for example, in a shared layout using React, for example, checking 89 00:05:20,770 --> 00:05:25,540 the pixel sizes and then toggling between the small sidebar and big cyber? 90 00:05:25,810 --> 00:05:26,770 Yes, of course you can. 91 00:05:27,550 --> 00:05:34,120 But again, it's my preference to do that in a sense, because I just find it easier to set up and more 92 00:05:34,120 --> 00:05:34,750 straightforward. 93 00:05:35,050 --> 00:05:40,990 So literally one media query instead of setting up the state values here and things of that nature. 94 00:05:41,110 --> 00:05:42,280 So hopefully this is clear. 95 00:05:42,430 --> 00:05:46,900 Yes, I have a small sidebar and big sidebar and I have the deer, which is the second column. 96 00:05:47,260 --> 00:05:54,940 And the reason why this works is because inside of these components, I have access that controls which 97 00:05:54,940 --> 00:05:58,570 of them will be displayed at certain screen size. 98 00:05:58,840 --> 00:06:03,550 So at the end of the day, this is only one component which will be rendered. 99 00:06:03,940 --> 00:06:05,200 Hopefully, I make sense. 100 00:06:05,530 --> 00:06:10,150 And now inside of the deal, like I said, there's going to be two more things inside of this column 101 00:06:10,510 --> 00:06:12,790 a number which is going to be sitting on the top. 102 00:06:13,120 --> 00:06:14,680 And then I'll take the. 103 00:06:15,490 --> 00:06:23,650 I'll add the class of dashboard page because I'm using that in my CSS in the wrapper 40 shared layout. 104 00:06:23,890 --> 00:06:24,910 Very, very important. 105 00:06:25,240 --> 00:06:27,280 So it's out of the wrapper for shared layout. 106 00:06:27,310 --> 00:06:33,670 You'll notice the CAC 40 dashboard page and in there I'll place the outlet. 107 00:06:33,880 --> 00:06:39,460 And then as a result, that's where the page is always going to be sitting there, regardless of which 108 00:06:39,460 --> 00:06:40,060 prejudice. 109 00:06:40,360 --> 00:06:43,750 So these ones don't change, they stay the same. 110 00:06:43,810 --> 00:06:45,580 That's the whole point for shared layout. 111 00:06:45,940 --> 00:06:50,470 What's changing is this so we're just rendering the front page at the time. 112 00:06:50,740 --> 00:06:51,880 Hopefully, this makes sense. 113 00:06:52,120 --> 00:06:53,650 So now let's navigate back. 114 00:06:53,650 --> 00:06:58,240 And like I said, we're going to go with the now bar first, and then we're going to go with another 115 00:06:58,240 --> 00:06:58,620 div. 116 00:06:58,630 --> 00:06:59,590 Yes, another div. 117 00:06:59,890 --> 00:07:04,090 And then we'll add a class dashboard and then page. 118 00:07:04,240 --> 00:07:07,960 And then inside of this there, this is where we want to place the outlook. 119 00:07:08,440 --> 00:07:15,610 So let me move this sucker up once say and don't be surprised if some other things look funky. 120 00:07:16,240 --> 00:07:20,200 We still have a long way to go, but let just this throughout what we currently can see. 121 00:07:20,500 --> 00:07:24,230 So let me navigate to the job if anyone noticed. 122 00:07:24,280 --> 00:07:26,710 So this is going to be my big sidebar. 123 00:07:26,820 --> 00:07:28,630 OK, that looks about right. 124 00:07:29,050 --> 00:07:31,750 Then I have over here a knife bar. 125 00:07:32,080 --> 00:07:32,610 All right. 126 00:07:32,620 --> 00:07:34,120 That looks also correct. 127 00:07:34,480 --> 00:07:39,730 And that if I go to the small screen, I should see this small side bar again. 128 00:07:39,760 --> 00:07:40,960 Yes, it looks funky. 129 00:07:41,110 --> 00:07:44,230 Eventually, it's going to be positioned fixed and all that cool stuff. 130 00:07:44,500 --> 00:07:48,670 But if you see this general structure, we are moving in the right direction. 131 00:07:49,000 --> 00:07:50,410 So that's my small sidebar. 132 00:07:50,560 --> 00:07:52,550 Navarre starts page again. 133 00:07:52,570 --> 00:07:54,130 Eventually, this one will be fixed. 134 00:07:54,460 --> 00:07:59,350 So therefore it's going to look something like this or we can toggle it and all that cool stuff. 135 00:07:59,680 --> 00:08:04,810 And then once we get to the bigger screen, then we'll have a two come round. 136 00:08:05,170 --> 00:08:10,330 So big sidebar over here and then the stats page or whatever page. 137 00:08:10,600 --> 00:08:17,680 Keep in mind that if I'm going to navigate here to all jobs or our job or whatever, now this page will 138 00:08:17,680 --> 00:08:18,220 be displayed. 139 00:08:18,520 --> 00:08:26,110 And then over here on the top, I have the number, and with all of these things in place now, I can 140 00:08:26,110 --> 00:08:29,770 start slowly setting up those components one by one. 141 00:08:29,890 --> 00:08:32,770 So first, I want to work on these suckers over here. 142 00:08:33,070 --> 00:08:34,929 The mob, the sidebars and all that. 143 00:08:35,230 --> 00:08:42,760 And then we'll slowly move to pages and one by one set up to logic on a server and then implement it 144 00:08:42,760 --> 00:08:44,169 on a frontend as well.