1 00:00:00,660 --> 00:00:08,580 Beautiful job, and now it set up our car buttons component, so I'm going to navigate back, of course, 2 00:00:08,580 --> 00:00:10,040 to unlock. 3 00:00:10,080 --> 00:00:16,710 So let's say let's say we have car buttons, ajaz and here, of course, I have my component again. 4 00:00:16,800 --> 00:00:19,380 I have quite a few imports. 5 00:00:19,830 --> 00:00:22,430 So here I'm looking for three icons. 6 00:00:22,710 --> 00:00:24,450 I have a shopping cart. 7 00:00:24,450 --> 00:00:30,720 I have user Myners and User Plus, because remember, when we log in, of course, we'll change these 8 00:00:30,720 --> 00:00:31,110 values. 9 00:00:31,120 --> 00:00:32,460 So let me quickly do it. 10 00:00:32,460 --> 00:00:38,400 So you don't think that I'm just making this up so I'm going to go inside with Google. 11 00:00:38,400 --> 00:00:39,870 I think that's going to be the quickest one. 12 00:00:40,080 --> 00:00:42,960 And there is the moment I logged in. 13 00:00:43,530 --> 00:00:46,860 I have logged out as far as the value, different icon. 14 00:00:47,100 --> 00:00:52,050 And like I previously mentioned, also the check out right now is displayed. 15 00:00:52,440 --> 00:00:59,570 So that should it for the icons, then I have the link because this cart one is actually ailing. 16 00:00:59,970 --> 00:01:06,160 So this one will be eventually set up as a button that will communicate to zero. 17 00:01:06,450 --> 00:01:11,370 Now, this is just going to be a link, but navigate to the court page. 18 00:01:11,370 --> 00:01:16,050 But of course, I'll also want to display how many items I have in here. 19 00:01:16,170 --> 00:01:21,240 Now I have the card icon and then I have this little value which at the moment will heart code. 20 00:01:21,510 --> 00:01:26,280 But that's why I have imported from the card context over here. 21 00:01:26,450 --> 00:01:33,450 OK, so that's why I import this card context, because I'll use a that value and I think we can start 22 00:01:33,450 --> 00:01:34,130 working on it. 23 00:01:34,650 --> 00:01:38,720 One more thing that I would want to mention about the style components notice. 24 00:01:38,940 --> 00:01:46,100 Of course, we have the wrapper, but this is going to be the case where I'll also add a class on this 25 00:01:46,140 --> 00:01:50,210 differentially on this wrapper, and I'll show you in a second one. 26 00:01:50,220 --> 00:01:54,350 So I'm going to go to Class nine and class time is very important. 27 00:01:54,360 --> 00:01:58,110 So we're going to go to Cart BTN and wrapper. 28 00:01:58,410 --> 00:02:04,170 And if you take a look at the cows over here, there's no place where I'm utilizing. 29 00:02:04,590 --> 00:02:07,440 So you might be wondering, well, why we're adding that. 30 00:02:07,890 --> 00:02:09,620 And there's two use cases. 31 00:02:09,990 --> 00:02:13,530 First of all, there's a huge case for the global classes. 32 00:02:13,740 --> 00:02:16,740 There's going to be some global classes that you would want to add. 33 00:02:17,070 --> 00:02:20,040 And the second use case notice here in Navar. 34 00:02:20,460 --> 00:02:26,910 So it's not like I said, once we get to the big screen, I would want to showcase the links as well 35 00:02:26,910 --> 00:02:27,720 as the current ones. 36 00:02:27,720 --> 00:02:30,650 But the moment we serve, notice how we don't see these carbons. 37 00:02:30,690 --> 00:02:31,040 Why? 38 00:02:31,380 --> 00:02:36,090 Well, if we come here to the CFS, keep on scrolling, keep on scrolling and then check it out. 39 00:02:36,390 --> 00:02:39,420 Card, button, wrapper, display grid. 40 00:02:39,750 --> 00:02:45,900 So once we get to that nine hundred ninety two, only then I would want to display them and before that 41 00:02:45,900 --> 00:02:47,400 I hide them by default. 42 00:02:47,640 --> 00:02:49,350 So they're hidden the same as links. 43 00:02:49,590 --> 00:02:54,660 And not to do that, I had to add that class over here. 44 00:02:55,170 --> 00:03:01,050 So technically this class I'm not using in this year, but in the previous one I am going to use cases. 45 00:03:01,320 --> 00:03:08,160 Either you have some kind of parent that you would want to use to select the component you're creating 46 00:03:08,370 --> 00:03:11,100 or there's going to be some kind of global class. 47 00:03:11,250 --> 00:03:17,510 So as far as the return inside of the wrapper, well, I'm going to go with the link first for my card, 48 00:03:17,520 --> 00:03:21,510 remember, because the link was to the card page. 49 00:03:21,750 --> 00:03:27,900 So I'm going to go with CART and I do need to add a class name and I'm looking for a hyphen by the end. 50 00:03:28,350 --> 00:03:33,930 And eventually, once I click it, I will close the sidebar. 51 00:03:34,110 --> 00:03:35,460 So why we're setting this up? 52 00:03:35,460 --> 00:03:39,540 Well, because we take a look at the final project. 53 00:03:40,140 --> 00:03:46,290 And if I make the smaller, what I would want is the moment I click on any of these links, I would 54 00:03:46,290 --> 00:03:47,340 want to close the sidebar. 55 00:03:47,340 --> 00:03:47,700 Correct. 56 00:03:48,150 --> 00:03:49,050 That would make sense. 57 00:03:49,050 --> 00:03:53,970 Otherwise, if I click this and if I don't close it, well, technically, I'm going to navigate that 58 00:03:53,970 --> 00:03:54,630 separate page. 59 00:03:55,080 --> 00:04:02,540 But I mean, it's not going to make any sense since sidebar is going to take up my whole view anyway. 60 00:04:03,090 --> 00:04:04,350 OK, hopefully that is clear. 61 00:04:04,350 --> 00:04:07,630 That's why once we click, we will close the sidebar. 62 00:04:07,730 --> 00:04:12,210 Now, of course, the moment we don't have that functionality, so we'll just leave it the way it is. 63 00:04:12,210 --> 00:04:15,930 But eventually I'm telling you, that will close the sidebar as well. 64 00:04:16,260 --> 00:04:22,650 So I'm going to go with my cart and then this is going to be somewhat more complicated because I do 65 00:04:22,650 --> 00:04:30,630 want to display my little car text as well as the icon and then the thoros not set it up. 66 00:04:30,630 --> 00:04:39,690 As far as the assess, I went with Spaan then for the spine, we added a cart container class and inside 67 00:04:39,690 --> 00:04:42,390 of it we went with a Arcon first. 68 00:04:42,690 --> 00:04:46,110 So F and then shopping cart like so. 69 00:04:46,380 --> 00:04:54,450 And inside of the spine we went with another spine and this one was class name of Cart Halfan Non-value. 70 00:04:54,750 --> 00:04:56,940 And again, eventually this will be dynamic. 71 00:04:57,240 --> 00:04:59,550 This will be coming from cart context by. 72 00:05:00,120 --> 00:05:08,160 Phrenologists, Cutco, Disvalue as well, let's save it and as far as the button, eventually there's 73 00:05:08,160 --> 00:05:11,350 going to be and by the way, let me check it out on a big screen. 74 00:05:12,060 --> 00:05:17,670 This is something we should see and back to the button for the log. 75 00:05:17,670 --> 00:05:24,420 And eventually there's going to be a tannery operator where I'm going to check if we have logged in. 76 00:05:24,720 --> 00:05:30,180 I'm going to display one button with one text and then another, that icon of minus or plus. 77 00:05:30,570 --> 00:05:35,820 But for now, again, we don't have the user, so we might as well just go with the button and I'll 78 00:05:35,820 --> 00:05:38,880 place it right after the link. 79 00:05:39,300 --> 00:05:40,860 And we're going to go type. 80 00:05:40,870 --> 00:05:43,590 And by the way, for some reason this didn't work. 81 00:05:43,590 --> 00:05:51,210 So button of then type it is going to be button, of course, button here and let's add a class name 82 00:05:51,210 --> 00:05:54,420 of all and then hyphen Beatty. 83 00:05:54,420 --> 00:05:57,960 And again, there's going to be on click functionality later. 84 00:05:58,320 --> 00:06:04,980 But instead of this button, let's just say logging on some kind of icon in this case, I think I'm 85 00:06:04,980 --> 00:06:05,820 going to go with +. 86 00:06:06,150 --> 00:06:13,440 So let's type logging on an FAA user and I'm not minus Orsay plus. 87 00:06:13,950 --> 00:06:16,290 That was also something that I was struggling. 88 00:06:16,290 --> 00:06:20,130 I couldn't come up with whether I should place a minus or plus. 89 00:06:20,130 --> 00:06:21,790 I was going back and forth, back and forth. 90 00:06:21,800 --> 00:06:23,220 Then I just went with this. 91 00:06:23,520 --> 00:06:27,580 If you don't like it, if you want to switch it around, that is totally up to you. 92 00:06:28,050 --> 00:06:32,280 So we have the card buttons, at least the initial setup. 93 00:06:32,940 --> 00:06:37,560 So I think we can go with footer because it's going to be somewhat easier. 94 00:06:37,830 --> 00:06:40,790 And then we'll swing back to the sidebar. 95 00:06:40,800 --> 00:06:46,470 And then once we set up the sidebar, then eventually we'll have to set up the functionality where once 96 00:06:46,470 --> 00:06:49,500 we click on the button, then, of course we can see the sidebar. 97 00:06:49,800 --> 00:06:54,180 And once we close it, of course, the sidebar will be hidden.