1 00:00:00,180 --> 00:00:07,550 All right, and with our number and with our hero in place now, let's work on this sucker, the sidebar 2 00:00:07,860 --> 00:00:11,820 now, it's only going to be displayed on a small screen. 3 00:00:12,270 --> 00:00:19,560 So once we get to the bigger screen, notice how hard that by default, using the access button on a 4 00:00:19,560 --> 00:00:23,220 small screen, we should see something like this where, of course, we have to close button. 5 00:00:23,440 --> 00:00:30,870 And then, of course, once we click on a button in number, we open up the sidebar, OK, something 6 00:00:30,870 --> 00:00:34,940 that we have done quite a few times already in the project. 7 00:00:35,290 --> 00:00:36,960 That's why we all speed this up. 8 00:00:37,350 --> 00:00:40,950 When I say, all right, I would want to grab my sidebar component. 9 00:00:41,280 --> 00:00:46,150 Now, here, though, it's going to be interesting because we are going to iterate over siblings and 10 00:00:46,150 --> 00:00:48,960 then there's going to be multiple iterations. 11 00:00:49,200 --> 00:00:52,650 And also, of course, we would need a vast global context. 12 00:00:53,160 --> 00:00:56,010 So let's look for a global context first. 13 00:00:56,430 --> 00:00:57,780 So where is the sidebar? 14 00:00:58,780 --> 00:01:06,270 Copy and paste and learn, as far as the values, I would want to get close sidebar sense in the sidebar, 15 00:01:06,280 --> 00:01:07,900 there is going to be button that closes it. 16 00:01:08,170 --> 00:01:10,420 And also, I need that state value. 17 00:01:10,720 --> 00:01:16,360 I need is a sidebar sidebar open that is important. 18 00:01:16,540 --> 00:01:19,450 And then of course, the closed sidebar function as well. 19 00:01:20,020 --> 00:01:22,900 I'm getting them from use global context. 20 00:01:23,270 --> 00:01:25,120 Now, of course, let's work on our return. 21 00:01:25,360 --> 00:01:31,210 And in this case I can right away set up everything using the template string. 22 00:01:31,420 --> 00:01:35,050 So I'm going to go with class name and then I'm going back to the JavaScript. 23 00:01:35,350 --> 00:01:39,700 I will set up my templates and there it is. 24 00:01:39,700 --> 00:01:47,290 And then we'll set up the interpolation where if is sidebar is true, then of course we would want to 25 00:01:47,290 --> 00:01:50,860 add two classes and if not, then there's just going to be one. 26 00:01:51,190 --> 00:01:58,750 So I'm going to say here, if it is true, then we go sidebar wrapper and then class of show. 27 00:01:59,020 --> 00:02:07,720 If it is not true, then we just go with sidebar and then rapper Weichsel and then once we save, since 28 00:02:07,720 --> 00:02:12,360 it is true, remember in the global context, we set it up as true. 29 00:02:12,700 --> 00:02:19,210 Not right now how our screenwriter, where it got darker because we have the overlay and then inside 30 00:02:19,210 --> 00:02:22,840 of it I'm going to go with a dev with a class of sidebar. 31 00:02:23,410 --> 00:02:27,580 So sidebar, Dev, and let's just say it. 32 00:02:27,910 --> 00:02:30,360 And there now, of course, we have our sidebar. 33 00:02:30,580 --> 00:02:32,830 And first, I would want to place a button. 34 00:02:33,040 --> 00:02:36,190 So I'm going to go here with a button. 35 00:02:36,550 --> 00:02:43,480 And as far as the class is going to have a class of closed, closed hyphen between. 36 00:02:43,960 --> 00:02:47,830 And then once we click on a button, I would want to close the sidebar. 37 00:02:48,190 --> 00:02:53,170 So when I say unclick, we already have our function closed sidebar. 38 00:02:53,170 --> 00:02:53,590 Correct. 39 00:02:53,890 --> 00:02:55,840 And we have the icon as well. 40 00:02:56,170 --> 00:03:00,490 So inside of the button, I'm going to go with F.A.A. and nine times. 41 00:03:00,910 --> 00:03:03,310 So that allows me to close the sidebar. 42 00:03:03,640 --> 00:03:09,510 Now, once I click on this, of course, we close the sidebar and then sends in a number. 43 00:03:09,580 --> 00:03:14,200 We have toggle button that does the opposite, that opens the course. 44 00:03:14,200 --> 00:03:17,950 We can clearly toggle it now by default in a state. 45 00:03:17,950 --> 00:03:23,680 It is true because as we're working on a sidebar, of course, I would want to display all the time. 46 00:03:23,930 --> 00:03:24,340 All right. 47 00:03:24,940 --> 00:03:30,490 Now comes the interesting part where right next to the button, I would want to display the links. 48 00:03:30,880 --> 00:03:36,160 But this is going to be the interesting thing where we'll have to do double iteration. 49 00:03:36,430 --> 00:03:36,880 Why? 50 00:03:37,400 --> 00:03:39,910 Because our data is nested. 51 00:03:40,330 --> 00:03:43,270 If we check out the data, we have one. 52 00:03:43,300 --> 00:03:49,960 All right, siblings, where we have the object and line inside of the object, of course, it displays 53 00:03:49,960 --> 00:03:54,840 the page, but then each page has the subjects, which is another way. 54 00:03:55,180 --> 00:03:58,810 So that is going to be something interesting that we haven't done before. 55 00:03:59,200 --> 00:04:07,840 So I'm going to go there with a class of sidebar links and then in here I'm already importing sublingual 56 00:04:08,440 --> 00:04:09,190 from there. 57 00:04:09,700 --> 00:04:11,290 So let's iterate over. 58 00:04:11,440 --> 00:04:13,810 So some blanks then map. 59 00:04:14,680 --> 00:04:22,060 And then I just went with item and index, so index is because we have a list, an item represents of 60 00:04:22,060 --> 00:04:22,750 this object. 61 00:04:23,080 --> 00:04:25,960 So now I'm talking about the whole big object. 62 00:04:26,320 --> 00:04:31,570 And instead of the object out one of the structure, two things, the links and page. 63 00:04:31,930 --> 00:04:38,530 So Links is, of course, al-Nouri and Page just says, well, where these sub links belong to. 64 00:04:38,860 --> 00:04:43,950 So if the page name is developers, that means that those siblings belong there. 65 00:04:44,380 --> 00:04:52,120 And now as far as the return, I'm going to go here with an article and then it will are a key and I 66 00:04:52,120 --> 00:05:01,960 will be equal to an index and I won't add anything as far as access, but we do want heading for and 67 00:05:01,960 --> 00:05:06,940 then let's just display the page or just see whether everything works under it. 68 00:05:07,240 --> 00:05:09,030 So these are my pages. 69 00:05:09,490 --> 00:05:15,790 Now, the gotcher here is that inside of this article, I would also want to have a date with a class 70 00:05:15,790 --> 00:05:19,420 of sidebar and then sub lunch. 71 00:05:19,750 --> 00:05:25,660 And inside of this div, I would want to write one more time over that length. 72 00:05:25,690 --> 00:05:26,060 All right. 73 00:05:26,320 --> 00:05:27,670 So we go let's map. 74 00:05:27,970 --> 00:05:33,850 And then again, we need to come up with our callback function and then inside I'm going to say a link 75 00:05:34,000 --> 00:05:37,550 that will represent each item in that array. 76 00:05:37,900 --> 00:05:39,550 So that's another object. 77 00:05:39,790 --> 00:05:40,210 Correct. 78 00:05:40,540 --> 00:05:43,860 And then the second thing, again, we need to have the index. 79 00:05:44,080 --> 00:05:45,270 So we go with index. 80 00:05:45,550 --> 00:05:46,750 I will the structured. 81 00:05:47,150 --> 00:05:53,520 I'm looking for your URL icon and then label coming from the link, of course. 82 00:05:53,950 --> 00:06:00,610 And as far as the return, well, let's go with links since we haven't covered react router link yet. 83 00:06:00,970 --> 00:06:05,860 And I'll set up the key, of course, since it is a let's say index. 84 00:06:06,190 --> 00:06:13,120 And then as far as the atrip, I'll be pointing to the URL, the one that is coming from my object, 85 00:06:13,120 --> 00:06:16,900 of course, and that inside of this link, we're going to have two things. 86 00:06:17,170 --> 00:06:19,800 We're going to have Icon and the label. 87 00:06:20,380 --> 00:06:22,240 So let's at least two things. 88 00:06:22,510 --> 00:06:27,310 And what we should see for every page, we have these siblings. 89 00:06:27,670 --> 00:06:34,810 So Product Page has the siblings, developers, page other siblings, and of course, also goes the 90 00:06:34,810 --> 00:06:36,430 same for the company. 91 00:06:36,760 --> 00:06:42,850 And of course, once I click, I can close and once I open up, I can show the sidebar. 92 00:06:43,120 --> 00:06:49,150 So the only thing that is missing is in my global context, I want to hide it by default. 93 00:06:49,330 --> 00:06:49,740 Correct. 94 00:06:50,020 --> 00:06:51,380 That would make sense. 95 00:06:51,670 --> 00:06:59,080 So where I have to use state for the sidebar, I set it equal to false and also navigate to the bigger 96 00:06:59,080 --> 00:07:00,190 screen, let's say. 97 00:07:00,200 --> 00:07:01,690 Yep, there it is. 98 00:07:01,700 --> 00:07:03,070 That should be our look. 99 00:07:03,070 --> 00:07:08,100 Like I said, we won't be able to see the sidebar on a bigger screen, only on a smaller one. 100 00:07:08,380 --> 00:07:13,970 So we're open up and then once we reach certain screen size, which is highlighted by the default. 101 00:07:14,200 --> 00:07:15,190 OK, good. 102 00:07:15,550 --> 00:07:17,710 We've got the easiest part of the way. 103 00:07:17,950 --> 00:07:24,760 Now, of course, we'll tackle the big beast, the submenu essentially as we're hovering over those 104 00:07:24,760 --> 00:07:29,770 buttons, then we would want to display that submenu component.