1 00:00:00,730 --> 00:00:08,200 Amazing work, and the last component of that is going to be displayed on all pages is going to be the 2 00:00:08,200 --> 00:00:16,870 sidebar, so I think we might as well just complete our work as far as the global components and work 3 00:00:16,870 --> 00:00:18,290 on our sidebar. 4 00:00:18,610 --> 00:00:25,270 Now, one thing about the footer, if you would want to have space in between the year and the name 5 00:00:25,270 --> 00:00:31,630 of the company and just the space over here and you should see the name eventually there or I'm sorry, 6 00:00:31,730 --> 00:00:39,430 space, I guess I'm going to close the footer and the moment I'll close the car buttons and I might 7 00:00:39,430 --> 00:00:46,870 as well, even though we'll have to go back here and I'm going to go to the side bar where it is buried. 8 00:00:47,260 --> 00:00:48,670 So now I have my sidebar. 9 00:00:49,060 --> 00:00:51,340 As you can see, again, we have a bunch of imports. 10 00:00:51,340 --> 00:00:53,530 We have the logo since will display it. 11 00:00:53,530 --> 00:00:59,050 And by the way, we're going to make of the screen test more just so you can see what we've got in the 12 00:00:59,050 --> 00:00:59,520 sidebar. 13 00:00:59,860 --> 00:01:01,630 So there is we have the logo. 14 00:01:01,840 --> 00:01:03,210 We have different icon. 15 00:01:03,370 --> 00:01:04,790 So this is going to be the clothes icon. 16 00:01:04,790 --> 00:01:07,780 And again, we're using the same library icons. 17 00:01:08,140 --> 00:01:09,970 Then we have all our links. 18 00:01:09,970 --> 00:01:12,880 And in this case, we do display the checkout. 19 00:01:13,240 --> 00:01:15,740 But again, we'll use the same links initially. 20 00:01:16,090 --> 00:01:18,280 So these are going to be coming from the constants. 21 00:01:18,280 --> 00:01:22,390 The first three and this one will be displayed conditionally. 22 00:01:22,660 --> 00:01:24,880 If we have logged in, we'll display. 23 00:01:25,180 --> 00:01:27,310 If we haven't, then it's going to be hidden. 24 00:01:27,590 --> 00:01:34,530 And of course, like I said, the card buttons as well, one for the card page and the second one for 25 00:01:34,600 --> 00:01:36,650 the login and log functionality. 26 00:01:36,970 --> 00:01:41,170 So logo coming from the same assets and I'm not going to cover that again. 27 00:01:41,290 --> 00:01:46,150 I talk about no link because of course, we are setting up links. 28 00:01:47,230 --> 00:01:53,560 Use broader context, because eventually I'll set up the toggle functional globally, even though at 29 00:01:53,560 --> 00:01:59,350 the moment we'll just do it manually over here inside of the sidebar five times, that's the close icon 30 00:01:59,350 --> 00:02:03,950 links, course links coming from the constant then styled components. 31 00:02:04,240 --> 00:02:06,670 So this is my style component. 32 00:02:06,940 --> 00:02:13,960 So all my styling car buttons, like I said, I also would want them in sidebar and then use user contacts 33 00:02:13,960 --> 00:02:20,080 eventually will get me the value whether the user has logged in or hasn't locked them. 34 00:02:20,110 --> 00:02:25,690 So if the user has logged in and of course I would want to display the check up, if not, then I'm 35 00:02:25,690 --> 00:02:26,230 going to hide it. 36 00:02:26,650 --> 00:02:32,130 And as far as the return will simply start with sidebar container. 37 00:02:32,170 --> 00:02:34,600 Just go with the name, whatever is the name or here. 38 00:02:35,140 --> 00:02:38,450 And then inside of it, I'm going to have my inside. 39 00:02:38,950 --> 00:02:44,680 Now, remember, whenever we talked about the toggling, what did we do? 40 00:02:45,220 --> 00:02:51,820 We added one class and then depending on the value, we added the other class or we didn't. 41 00:02:52,210 --> 00:02:56,740 And the reason why is that happening, because by default, I will hide the sidebar. 42 00:02:56,740 --> 00:03:05,740 Notice here I have scene of negative one and also I translate by one hundred percent and then only if 43 00:03:05,740 --> 00:03:09,200 there is a class of show sidebar, then I display. 44 00:03:09,730 --> 00:03:13,960 So this is going to be the class that is going to be responsible for the toggling. 45 00:03:14,140 --> 00:03:15,130 So let me scroll up. 46 00:03:16,630 --> 00:03:25,120 Inside of this sidebar container, we're going to go with a side element and in order to speed this 47 00:03:25,120 --> 00:03:32,800 up all right away, set up of the operator deterring operator, and I'll just use the local volume, 48 00:03:33,220 --> 00:03:39,190 like I said, eventually, meaning in the next video, we'll set up the functionality globally in one 49 00:03:39,190 --> 00:03:39,960 of the context. 50 00:03:40,270 --> 00:03:46,890 But for now, I'm just going to go is open and by default also true because I would want to show it. 51 00:03:47,110 --> 00:03:49,990 And then in that aside, I'll check. 52 00:03:50,130 --> 00:03:51,520 I'll say, yeah, class name. 53 00:03:51,820 --> 00:03:57,460 And of course it's going to be sidebar class and the other class, the sidebar. 54 00:03:57,460 --> 00:04:00,780 But the show sidebar is going to be displayed conditionally. 55 00:04:01,090 --> 00:04:02,950 That's why I will set up our expression. 56 00:04:02,950 --> 00:04:04,600 We need to go with them for literals. 57 00:04:04,870 --> 00:04:09,570 And in here I'll say is open if it is true, which should be true. 58 00:04:09,610 --> 00:04:10,060 Correct. 59 00:04:10,330 --> 00:04:16,030 Because we have it as the default value, then I'm going to go with two classes over here. 60 00:04:16,480 --> 00:04:23,240 Then I'll say my question mark and then I would want to get the sidebar class and show sidebar class. 61 00:04:23,530 --> 00:04:29,620 However, if it is false, which at the moment of course we can control only manually, then I'm just 62 00:04:29,620 --> 00:04:32,650 going to display show sidebar class. 63 00:04:32,920 --> 00:04:35,920 And in this aside, there's going to be a header. 64 00:04:36,280 --> 00:04:43,000 So Sidebar and Manhatta and inside of it we're going to go with image. 65 00:04:43,030 --> 00:04:46,890 Now, this is not going to be a link, so I'm just going to go with IMG as as the source. 66 00:04:47,110 --> 00:04:48,370 The name again is logo. 67 00:04:50,220 --> 00:04:57,780 The class name, since there's a little bit of styling, so class name is Logo here and text and I'm 68 00:04:57,780 --> 00:05:04,560 going to say comfy and then sloth and there's going to be a button that closes the sidebar. 69 00:05:04,800 --> 00:05:07,350 But the moment, of course, there's no functionality yet. 70 00:05:07,360 --> 00:05:15,060 So we're just going to go with button one class name and we're going to say close hyphen Beatty. 71 00:05:15,060 --> 00:05:23,580 And and you know what's add also type type will be button and that button will just go with our icon, 72 00:05:23,970 --> 00:05:29,700 F.A.A. and then times, let's say that we should see the sidebar. 73 00:05:29,710 --> 00:05:30,690 And of course we do. 74 00:05:30,990 --> 00:05:31,740 There it is. 75 00:05:32,040 --> 00:05:34,020 Of course, now it is displayed. 76 00:05:34,020 --> 00:05:34,410 Why? 77 00:05:34,800 --> 00:05:35,850 Because this one is true. 78 00:05:35,970 --> 00:05:38,520 Again, something we have already done quite a few times. 79 00:05:38,520 --> 00:05:42,360 So hopefully we are on the same page if I changes this. 80 00:05:43,110 --> 00:05:45,710 Of course, I cannot see it now. 81 00:05:45,780 --> 00:05:49,440 There are some issues over here, so I can technically still see it. 82 00:05:49,440 --> 00:05:54,060 But don't worry, once we're done with our component, it's not going to be the case. 83 00:05:54,450 --> 00:06:01,620 So I'm going to go back to troll over here and once we've got everything in place. 84 00:06:02,560 --> 00:06:08,770 Now, I want to go with my links and the way we do that again, we have our there. 85 00:06:08,950 --> 00:06:11,500 And right next to this day, I'm going to go with on our list. 86 00:06:11,500 --> 00:06:14,650 And again, we have a class of links. 87 00:06:15,190 --> 00:06:19,920 And in here I'm going to go with links, some iterating over those links. 88 00:06:20,230 --> 00:06:25,190 So I'm using the map, of course, and then I'm going to go with the structure. 89 00:06:25,210 --> 00:06:33,200 And remember, each link was an object and I can either have it as a name here or I can also the structure 90 00:06:33,450 --> 00:06:34,080 right here. 91 00:06:34,090 --> 00:06:38,470 So I'm going to go, Heidi, text and Yahel, same three properties. 92 00:06:38,710 --> 00:06:42,450 And as far as the return, we're going to go with Elai. 93 00:06:42,700 --> 00:06:48,640 So this item online Akie so this is going to be that idea, of course. 94 00:06:49,030 --> 00:06:56,020 And inside of this last item, let's go with a link and then two and then of course we're having the 95 00:06:56,020 --> 00:07:01,900 same URL and eventually there's going to be unclick since I would want to close the sidebar once I click 96 00:07:01,900 --> 00:07:07,900 on links, something that I showed you a little bit earlier, but for now, just place a text. 97 00:07:08,260 --> 00:07:11,290 So that should be our links. 98 00:07:11,410 --> 00:07:12,430 OK, awesome. 99 00:07:12,770 --> 00:07:17,850 Then I also want to display the check on one by default. 100 00:07:17,860 --> 00:07:20,860 Eventually, of course, we will check whether the user is there. 101 00:07:20,860 --> 00:07:23,830 But for the time being, let me just grab this one. 102 00:07:24,220 --> 00:07:25,990 And I don't need to have a key here. 103 00:07:26,900 --> 00:07:35,090 And as far as the values, I'll set them up manually where this is going to point to a checkout and 104 00:07:35,090 --> 00:07:36,710 of course, text will also be checked. 105 00:07:36,890 --> 00:07:46,070 So we're going to go here with a check on it and then text, let's say that we should see the checkout. 106 00:07:46,340 --> 00:07:50,890 And last thing that I would want to place here is the card buttons. 107 00:07:51,020 --> 00:07:53,660 Remember the component we set up in the last video? 108 00:07:54,050 --> 00:07:58,370 We save it here and we should see the card buttons. 109 00:07:58,730 --> 00:08:04,490 That should do it for the sidebar component and just check the why we have those issues. 110 00:08:04,850 --> 00:08:09,140 So I'll change this manual value to false. 111 00:08:09,500 --> 00:08:11,990 And it should be hidden, but it's not. 112 00:08:12,290 --> 00:08:14,900 And I actually can see my notice here. 113 00:08:15,200 --> 00:08:23,440 I'm saying if is open is true, then I would want to have classes of sidebar and then show sidebar. 114 00:08:23,450 --> 00:08:27,730 However, if it is false, then I would just want to show sidebar. 115 00:08:27,980 --> 00:08:29,230 So that is not correct. 116 00:08:29,720 --> 00:08:37,640 If the is open are false, then I would just want to add the sidebar class and if it is open only then 117 00:08:37,960 --> 00:08:40,000 I'll show sidebar. 118 00:08:40,220 --> 00:08:43,070 So once we save, we're not going to see the sidebar. 119 00:08:43,190 --> 00:08:51,410 So we only see the sidebar if the is open is true, which of course eventually meaning in the next video 120 00:08:51,620 --> 00:08:54,710 we will set it up in one of our contacts. 121 00:08:55,010 --> 00:08:58,460 And then of course there's also going to be a toggle functionality. 122 00:08:58,790 --> 00:09:01,760 So let's set this up still as false. 123 00:09:01,880 --> 00:09:02,730 So it's harder. 124 00:09:03,080 --> 00:09:09,470 And I guess let's start setting up the context where we will toggle the sidebar.