1 00:00:00,180 --> 00:00:06,660 Not bad, not bad ones, we've got our global product context in place, and we can clearly see that 2 00:00:06,930 --> 00:00:08,370 we can access the data. 3 00:00:08,850 --> 00:00:11,390 I guess we can start by destruction. 4 00:00:11,850 --> 00:00:14,580 And as far as the sidebar will look for two things. 5 00:00:15,120 --> 00:00:21,990 I would want to look for close sidebar function, since I would want to run it when I click on a button 6 00:00:22,410 --> 00:00:23,730 as well as the links. 7 00:00:23,730 --> 00:00:27,630 And eventually we'll also have to pass it into the card buttons. 8 00:00:27,790 --> 00:00:33,630 Because remember, my idea was following the moment we click on something inside of the sidebar, I 9 00:00:33,630 --> 00:00:39,600 would want to hide it anyway because there's no point of navigating to a different page if I still show 10 00:00:39,600 --> 00:00:42,750 the sidebar, since it will take up the whole screen. 11 00:00:43,110 --> 00:00:45,870 So in here, I'll remove these two. 12 00:00:46,320 --> 00:00:47,220 I don't need them. 13 00:00:47,220 --> 00:00:53,520 And then remember from the state, what was the proper name is sidebar open number one. 14 00:00:53,730 --> 00:01:00,110 And the second one is close and the sidebar function now I'll have to change this one first. 15 00:01:00,300 --> 00:01:02,990 So say is sidebar open. 16 00:01:03,180 --> 00:01:09,930 So now I'm checking for this global property, meaning property that is coming from my product context. 17 00:01:10,170 --> 00:01:14,580 And if everything is correct, we should still hide the sidebar. 18 00:01:14,820 --> 00:01:18,510 And if we want to double check that, let's just go to the product context. 19 00:01:18,960 --> 00:01:24,900 And so this is true just to make sure that we're getting the correct values and everything works. 20 00:01:25,650 --> 00:01:29,240 Once we save, we should see the sidebar. 21 00:01:29,760 --> 00:01:31,380 So for some reason I don't. 22 00:01:31,440 --> 00:01:33,720 So maybe I just need to refresh. 23 00:01:33,720 --> 00:01:35,040 And there is once a refresh. 24 00:01:35,040 --> 00:01:37,520 Of course I can see the sidebar. 25 00:01:37,890 --> 00:01:39,930 So now let me go back to false. 26 00:01:40,350 --> 00:01:48,300 And as a side note, as far as this refreshing, it looks like I'm going to have to do a little fix 27 00:01:48,540 --> 00:01:51,270 in my setup and I'm going to cover that in NextRadio. 28 00:01:51,510 --> 00:01:56,490 And this video, unfortunately, will have to see me refreshing each and every time we'll make some 29 00:01:56,490 --> 00:01:58,700 changes and I'll talk about it in the next days. 30 00:01:58,760 --> 00:02:01,800 Why is that happening and what is going to be a quick fix? 31 00:02:01,950 --> 00:02:05,220 So let's navigate back to the sidebar. 32 00:02:05,340 --> 00:02:11,850 So we have right now global property is somewhere open, which, of course, just checks whether it 33 00:02:11,850 --> 00:02:12,300 is true. 34 00:02:12,660 --> 00:02:14,870 And let me just make sure it is false. 35 00:02:14,890 --> 00:02:15,660 Yep, it is. 36 00:02:16,110 --> 00:02:21,260 And then once I click on a button, of course, I would want to run those sidebar. 37 00:02:21,540 --> 00:02:24,600 So so let's set up here on Click. 38 00:02:26,430 --> 00:02:29,590 This is going to be equal to close sidebar function. 39 00:02:29,940 --> 00:02:36,150 Now, I would want to do the same set up for my links, so let me copy and paste the same thing. 40 00:02:36,600 --> 00:02:41,010 So in here I have the link and I would want to set up my own click show. 41 00:02:41,370 --> 00:02:49,110 And I would also want to do it on checkout and eventually also I would want to do it where I have my 42 00:02:49,110 --> 00:02:49,630 card button. 43 00:02:50,160 --> 00:02:52,460 So let me navigate to my card buttons. 44 00:02:52,680 --> 00:03:01,860 Notice here again, I'm using the used products context, so I'm grabbing it from there and I just want 45 00:03:01,860 --> 00:03:04,100 the closed cart functionality. 46 00:03:04,500 --> 00:03:09,660 So for now, I think it's going to be easier if I just copy and paste. 47 00:03:10,180 --> 00:03:16,010 So, so in the card buttons and I don't need the value that is irrelevant to me. 48 00:03:16,020 --> 00:03:22,370 However, I have close sidebar and what I would want is to add on both of them. 49 00:03:22,590 --> 00:03:23,970 I believe it's on both of them. 50 00:03:24,390 --> 00:03:28,780 Once I click on, I would want to close it or you're not going. 51 00:03:28,800 --> 00:03:32,820 Honestly, when we are working with Log-in going to do it by default. 52 00:03:33,090 --> 00:03:34,100 So it doesn't really matter. 53 00:03:34,410 --> 00:03:39,440 We can go here where we have the link and we'll copy and paste the same thing. 54 00:03:39,450 --> 00:03:40,760 So we're going to go on click. 55 00:03:40,780 --> 00:03:47,860 Let me close the sidebar here, the text at our sidebar, and we're going to go with close and then 56 00:03:47,880 --> 00:03:48,500 sidebar. 57 00:03:48,900 --> 00:03:56,310 And the last thing that is missing in our puzzle is, of course, the number which has the button that 58 00:03:56,310 --> 00:03:58,290 controls whether we can see this. 59 00:03:59,280 --> 00:04:04,230 So let's now get there, find where is my file. 60 00:04:04,500 --> 00:04:10,020 So I have filters and for some reason I'm struggling to find my number again. 61 00:04:10,020 --> 00:04:10,950 I have the same thing. 62 00:04:10,950 --> 00:04:19,920 Use products, context, so const and in this case I'm looking for open sidebar function that is equal 63 00:04:20,220 --> 00:04:22,560 to use product context. 64 00:04:22,920 --> 00:04:24,420 Of course I invoke it. 65 00:04:25,880 --> 00:04:32,970 And then where have the button, the toggle button now, of course, I would want this on carnality, 66 00:04:33,380 --> 00:04:41,380 so on click and then open sidebar and I'm going to save them, navigate to the bigger screen. 67 00:04:42,140 --> 00:04:47,050 And in this case, I'll have to refresh just to make sure that everything works. 68 00:04:47,300 --> 00:04:50,570 I'm going to go to the small screen, notice now I have my button. 69 00:04:50,570 --> 00:04:56,870 Once I click, I can see the sidebar because now, of course, we change the global property. 70 00:04:57,170 --> 00:04:58,610 I have all my links. 71 00:04:58,610 --> 00:05:02,870 I can close it like so am I can open it up again. 72 00:05:03,200 --> 00:05:06,740 And then once I click on one of the links again, I close the sidebar. 73 00:05:07,550 --> 00:05:12,920 That was the whole point because again, otherwise I wouldn't be able to see the page and the same works. 74 00:05:12,920 --> 00:05:17,720 If we go to the card again, logging will eventually do that anyway by default. 75 00:05:18,260 --> 00:05:24,670 Since long story short, it's just going to do it by default and that's why we'll just check out. 76 00:05:24,680 --> 00:05:25,190 There it is. 77 00:05:25,190 --> 00:05:29,870 We navigate to the court page and of course, we close the sidebar. 78 00:05:29,990 --> 00:05:30,560 Beautiful. 79 00:05:30,980 --> 00:05:32,450 We have sidebar in place. 80 00:05:32,450 --> 00:05:37,640 We have no and now we can proceed to the next step in our application.