1 00:00:00,360 --> 00:00:05,450 So let's navigate back to our people, we're looking for folder number 12. 2 00:00:05,960 --> 00:00:11,450 So let's start with their server, clear everything city back to the road. 3 00:00:11,910 --> 00:00:17,760 And then once I'm back on the road, of course, I'm looking for a set of folder in the folder number 4 00:00:17,770 --> 00:00:19,320 12 online. 5 00:00:19,320 --> 00:00:25,560 I would want NPM install and learn and start and RPM start work. 6 00:00:25,570 --> 00:00:25,830 So. 7 00:00:26,020 --> 00:00:29,280 So in the project you find, of course, the source. 8 00:00:29,280 --> 00:00:35,310 You've got objets where we have the heading to and there's going to be multiple components. 9 00:00:35,310 --> 00:00:37,290 We're going to have a home component. 10 00:00:37,530 --> 00:00:44,700 That's where we display both buttons for the sidebar and the model and also the components as well for 11 00:00:44,700 --> 00:00:47,160 the model and for the sidebar. 12 00:00:47,160 --> 00:00:50,130 I think I'm going to close the integrated terminal for now. 13 00:00:50,610 --> 00:00:56,640 Then we're going to navigate to our pages and we'll just display all three components. 14 00:00:56,640 --> 00:00:59,340 And then one by one, we'll set up the structure. 15 00:00:59,610 --> 00:01:01,010 So we're going to start with home. 16 00:01:01,830 --> 00:01:06,060 OK, so then I'm looking for the model and sidebar. 17 00:01:06,660 --> 00:01:11,600 The order is irrelevant since we're using position fixed for both of them. 18 00:01:11,910 --> 00:01:14,120 So we have a model and then the sidebar. 19 00:01:14,400 --> 00:01:16,710 So now, of course, let's start working in the home. 20 00:01:17,860 --> 00:01:26,230 And here will place two buttons, so I'm going to go with some kind of return and I'll just say, man, 21 00:01:26,230 --> 00:01:35,100 here and inside of the main will place one button for the sidebar and then the second one for the model. 22 00:01:35,440 --> 00:01:36,860 So let's just go with Button. 23 00:01:36,880 --> 00:01:41,110 I'll close the sidebar here and eventually there's going to be on Click. 24 00:01:41,560 --> 00:01:48,610 Now, we just want to add the class name and that one will be sidebar and then toggle like so and that 25 00:01:48,640 --> 00:01:49,780 inside of the button. 26 00:01:50,110 --> 00:01:54,520 I'm going to go with F.A.A. Barsh icon that we're getting from the reactor. 27 00:01:55,190 --> 00:01:55,830 Let's save it. 28 00:01:56,100 --> 00:01:57,170 Yep, there it is. 29 00:01:57,190 --> 00:02:02,740 Now, of course, we have our button and then right after the button, I'm going to go with another 30 00:02:02,740 --> 00:02:05,040 one for the model. 31 00:02:05,050 --> 00:02:07,060 So class name can be done. 32 00:02:07,360 --> 00:02:09,580 And in this case, I'm not going to place an icon. 33 00:02:09,950 --> 00:02:12,660 I'm just going to have a text of show model. 34 00:02:12,910 --> 00:02:14,440 So now we have both of these things. 35 00:02:14,800 --> 00:02:22,570 Next, I would want to work on a model or sidebar, whichever one you prefer, but I'm going to go with 36 00:02:22,570 --> 00:02:22,960 model. 37 00:02:24,150 --> 00:02:30,090 And then in here, eventually, of course, there's going to be more logic, but we'll start simply 38 00:02:30,090 --> 00:02:34,200 by returning it there and we'll add some class names. 39 00:02:34,560 --> 00:02:37,290 So eventually it is going to be dynamic. 40 00:02:37,320 --> 00:02:38,060 That's why. 41 00:02:38,070 --> 00:02:44,270 All right, away, set up my curly braces and all right away, I use my template string again. 42 00:02:44,280 --> 00:02:44,880 For now. 43 00:02:44,880 --> 00:02:49,590 We'll just add those classes, but then eventually there's going to be a ternary operator. 44 00:02:49,890 --> 00:02:54,360 So I'm going to go with modal overlay class, lower class. 45 00:02:54,600 --> 00:02:56,850 And that one for sure, always needs to be on. 46 00:02:57,270 --> 00:03:05,760 If we want to toggle, show or hide the model, we'll do that using the show model class and then inside 47 00:03:05,760 --> 00:03:13,920 of the model, I'm going to go with Dave with a class of model container model hyphen container. 48 00:03:14,190 --> 00:03:20,400 And then in here we're going to have a heading three with model content like so. 49 00:03:20,670 --> 00:03:27,540 And if I say if you have the model, then you'll be able to say, if not, then of course the model 50 00:03:27,540 --> 00:03:28,130 will be hidden. 51 00:03:28,560 --> 00:03:33,810 Just keep that in mind, since I would want to see right now what I'm actually adding to the model. 52 00:03:34,080 --> 00:03:40,830 I'm going to go with show model class and then let's just add a button that eventually will close the 53 00:03:40,830 --> 00:03:41,190 model. 54 00:03:41,490 --> 00:03:42,600 So we go with button. 55 00:03:42,840 --> 00:03:51,270 We need to add a class name on the class that we're looking for is close, close hyphen model and then 56 00:03:51,270 --> 00:03:54,000 hyphen between online and sort of the button. 57 00:03:54,390 --> 00:04:02,490 We have five times icon from reactance, so we just go with F.A.A. and times and then of course we need 58 00:04:02,490 --> 00:04:03,360 to close out. 59 00:04:03,360 --> 00:04:06,180 Our component is now we have the button. 60 00:04:06,330 --> 00:04:08,940 Of course no functionality is working right now. 61 00:04:09,180 --> 00:04:10,050 Don't worry about it. 62 00:04:10,340 --> 00:04:12,450 Eventually, of course, we will hook it up. 63 00:04:12,810 --> 00:04:19,290 And of course, now, since I would want to see my sidebar, I will remove this show model class. 64 00:04:20,490 --> 00:04:26,520 And I cannot see the model that's beautiful and the last component that I would want to set up in my 65 00:04:26,520 --> 00:04:29,600 structure is of the sidebar. 66 00:04:29,650 --> 00:04:37,300 So it is right here and in the sidebar will right away iterate over our data. 67 00:04:37,620 --> 00:04:42,150 So if you remember the last project, we were setting up data separately. 68 00:04:42,570 --> 00:04:49,380 And if you check out the data, yes, you'll notice something familiar where we have links. 69 00:04:49,770 --> 00:04:52,500 So long story and then also social. 70 00:04:52,920 --> 00:04:57,870 So if you didn't watch the previous project, please do so because I'm not going to repeat myself. 71 00:04:58,110 --> 00:05:04,290 But I would want in a sidebar is to iterate over the links and social and then, of course, display 72 00:05:04,290 --> 00:05:04,490 them. 73 00:05:04,740 --> 00:05:09,450 So we go to our sidebar, which, by the way, lost in the process. 74 00:05:09,810 --> 00:05:11,910 And I would want to go with a side. 75 00:05:12,180 --> 00:05:17,460 So in the sidebar, we're going to go with a side and then let's add class names again. 76 00:05:17,720 --> 00:05:19,410 There's going to be toggle functionality. 77 00:05:19,620 --> 00:05:25,260 So we might as well right away set up a template string and one class that I would always want on my 78 00:05:25,260 --> 00:05:30,160 sidebar in the sidebar class and then also show sidebar class. 79 00:05:30,420 --> 00:05:36,420 So that's the one that is responsible for displaying or highlighting the sidebar. 80 00:05:36,600 --> 00:05:41,670 So if the class is on and of course you'll be able to see the sidebar, if not, then of course it is 81 00:05:41,670 --> 00:05:42,360 going to be hidden. 82 00:05:42,720 --> 00:05:48,060 Then inside of the sidebar, we're going to go with sidebar at her. 83 00:05:48,500 --> 00:05:52,320 And in here, I would want to place my logo, which of course, I already imported. 84 00:05:52,560 --> 00:05:56,580 So I go with the logo, then source on this logo as well. 85 00:05:57,090 --> 00:05:58,970 Last name also would be awesome. 86 00:05:59,490 --> 00:06:06,270 So we're going to go with Logo here as far as the alternative would go with coding addict like. 87 00:06:06,270 --> 00:06:11,580 So I'm not I would want to have a button which eventually will close the sidebar. 88 00:06:11,880 --> 00:06:19,830 So we go with button, we add a class name, class name here is Close Hyphen BGN and then instead of 89 00:06:19,830 --> 00:06:25,350 the button we go with F.A.A. and times like so so we save it. 90 00:06:25,650 --> 00:06:27,870 That should be our sidebar. 91 00:06:28,230 --> 00:06:32,550 Beautiful at least the header and lan right next to the header. 92 00:06:32,790 --> 00:06:34,620 We're going to go with our links. 93 00:06:34,950 --> 00:06:40,590 So on here I go with on our list our class name of links. 94 00:06:41,070 --> 00:06:48,660 So we go here with links and then in the links on our list, I would want to iterate over my array of 95 00:06:48,660 --> 00:06:53,910 links that is coming from my data and line for every item that I have there. 96 00:06:54,240 --> 00:06:56,460 I'm just going to access it as a link. 97 00:06:57,670 --> 00:07:06,010 All the structured right away in your text and the icon as well, because if you'll notice in this project, 98 00:07:06,010 --> 00:07:07,590 we also have the icon. 99 00:07:07,930 --> 00:07:10,970 So I just added more bells and whistles to our data. 100 00:07:11,290 --> 00:07:18,420 That's why not only we have the URL text, but we also have the icon and forever link. 101 00:07:18,430 --> 00:07:22,050 I would want to return a list item, then I'll use my key. 102 00:07:22,480 --> 00:07:26,650 I'll set it equal to the 80 and then of course I have my link. 103 00:07:26,890 --> 00:07:30,310 I'll pass in the URL and the inside of the link. 104 00:07:30,320 --> 00:07:34,990 There's going to be two things the icon and then the text as well. 105 00:07:35,440 --> 00:07:36,760 So I can save it. 106 00:07:37,030 --> 00:07:39,300 I should see my links. 107 00:07:39,310 --> 00:07:39,870 Beautiful. 108 00:07:40,210 --> 00:07:46,390 And then lastly in the sidebar, right next to the first on our list, there's going to be another one 109 00:07:46,900 --> 00:07:53,620 and a class name here of social icons, social icons. 110 00:07:53,830 --> 00:07:57,810 And then in here, let's iterate over social. 111 00:07:57,820 --> 00:07:58,210 All right. 112 00:07:58,210 --> 00:08:00,340 That is coming from data. 113 00:08:01,120 --> 00:08:03,070 And then I'll name each item a link. 114 00:08:03,430 --> 00:08:09,280 And again, we'll structure it from that item, the euro and the icon. 115 00:08:09,580 --> 00:08:13,330 And that one is equal to my link primeur. 116 00:08:13,810 --> 00:08:15,460 And then, of course, what are we returning? 117 00:08:15,460 --> 00:08:17,260 We go with list item again. 118 00:08:17,260 --> 00:08:19,220 The same spiel will go with idee. 119 00:08:19,510 --> 00:08:22,480 And then instead of the list item, we go with a link. 120 00:08:22,900 --> 00:08:28,090 Then I will be equal to my YORO property that is coming from my object. 121 00:08:28,300 --> 00:08:31,690 And then I also want to place my on our separate. 122 00:08:31,810 --> 00:08:33,340 And now I have everything. 123 00:08:33,760 --> 00:08:41,590 I have the links and I have social media now in order to toggle or we would use this sidebar. 124 00:08:41,860 --> 00:08:44,380 So once the class is ready I cannot see it. 125 00:08:44,560 --> 00:08:48,340 And then once the class is added, I can see the sidebar. 126 00:08:48,610 --> 00:08:54,820 So our remote and then of course in the next video will start setting up the functionality where once 127 00:08:54,820 --> 00:09:01,390 we click on the buttons, then of course we can either show and hide the model or same thing for the 128 00:09:01,390 --> 00:09:01,810 sidebar.