1 00:00:00,710 --> 00:00:04,640 Now that we know how to make sure that a component is always visible on the screen regardless of what 2 00:00:04,640 --> 00:00:08,990 page the user is looking at we're going to start actually working on our head or component if we take 3 00:00:08,990 --> 00:00:12,270 a look at our mockups for this thing when we pull those up really quickly. 4 00:00:12,350 --> 00:00:17,190 Remember the headers are supposed to have a link back to the central streamlets page. 5 00:00:17,210 --> 00:00:21,200 It's supposed to have another link back to the stringless page over here and then eventually it should 6 00:00:21,200 --> 00:00:22,910 also have a log in button. 7 00:00:22,940 --> 00:00:24,230 Now to actually create the header. 8 00:00:24,260 --> 00:00:26,130 We're going to make a separate component. 9 00:00:26,270 --> 00:00:31,100 We also need to make sure that we wire up semantic UI to our project as well because we're going to 10 00:00:31,100 --> 00:00:35,360 rely upon some styling inside that library to get the header to show up really nicely with some pretty 11 00:00:35,360 --> 00:00:36,140 good styling. 12 00:00:36,380 --> 00:00:40,380 I think that we should first begin by wiring up semantic UI to our project. 13 00:00:40,430 --> 00:00:50,220 So as usual I will do a search for semantic UI CVN pull up the link and search for semantic dot dot 14 00:00:50,260 --> 00:00:51,080 CSX. 15 00:00:51,080 --> 00:00:52,140 Here it is right here. 16 00:00:52,300 --> 00:00:54,280 So I'm going to copy that link. 17 00:00:54,280 --> 00:01:00,260 I will pull it back over to my public index HTL directory and right underneath the existing link tag 18 00:01:00,680 --> 00:01:03,400 I'll put in a rail style sheet. 19 00:01:05,070 --> 00:01:09,020 And then I'll paste the trough in and close the tag off. 20 00:01:09,020 --> 00:01:09,440 All right. 21 00:01:09,590 --> 00:01:10,900 Let's save that really quickly. 22 00:01:10,910 --> 00:01:13,040 Now if I flip back over to my application 23 00:01:15,750 --> 00:01:20,460 I see the different font on the screen which is a indication that yeah the semantic UI is loaded up 24 00:01:20,460 --> 00:01:21,460 correctly. 25 00:01:21,480 --> 00:01:21,780 All right. 26 00:01:21,780 --> 00:01:25,260 So let's now flip back over to our code editor inside of our components directory. 27 00:01:25,260 --> 00:01:29,970 We're going to create a new header component and we're going to make this inside of components as opposed 28 00:01:29,970 --> 00:01:35,080 to streams because this is not a component that has anything to do with our streams. 29 00:01:35,370 --> 00:01:40,790 So the components directory on make a new file called Hetter. 30 00:01:40,910 --> 00:01:41,740 Yes. 31 00:01:41,830 --> 00:01:45,550 And then at the top we'll put together some boilerplate for a functional component. 32 00:01:45,660 --> 00:01:52,380 So I will say import re-act from react and Konst header. 33 00:01:52,600 --> 00:01:56,400 And inside there I will return a div 34 00:01:59,510 --> 00:02:02,720 with about I don't think we need any other divs right now. 35 00:02:02,720 --> 00:02:07,400 We'll come back and do the styling in just a second so I'll just put in the text header like so and 36 00:02:07,400 --> 00:02:11,100 then we'll say export default header at the bottom. 37 00:02:11,140 --> 00:02:15,910 I'll save this then we'll flip back over to our output file get yours. 38 00:02:15,970 --> 00:02:23,580 Update us on make sure that I import the header from header and then I'm going to show the header right 39 00:02:23,640 --> 00:02:25,420 above my browser router right here. 40 00:02:25,470 --> 00:02:26,760 So I'll say Hetter 41 00:02:30,800 --> 00:02:34,240 all right really quickly will flip back over and make sure we just see the text header. 42 00:02:34,250 --> 00:02:35,450 Yup it's right there. 43 00:02:35,450 --> 00:02:39,650 So now we're going to add in a couple of different class names to get the header to show up nicely. 44 00:02:39,860 --> 00:02:42,870 All these class names are coming from the semantic documentation. 45 00:02:42,920 --> 00:02:48,410 So if you want to pull up the documentation and take a look at the menus subsection you'll see where 46 00:02:48,410 --> 00:02:50,790 in pulling is class names from. 47 00:02:50,960 --> 00:02:56,350 All right so back inside my app component will first begin by putting on a class name of UI container 48 00:02:56,350 --> 00:02:57,780 to our div right here. 49 00:02:57,920 --> 00:03:03,270 That is right above our head or we'll then flip back over to our head or component and it's like if 50 00:03:03,270 --> 00:03:06,200 you're going to put together a couple of different class names. 51 00:03:06,420 --> 00:03:14,190 So I'm going to turn this into a multi-line GSX expression like so allowed in a div with a class name 52 00:03:14,220 --> 00:03:18,030 of UI secondary pointing menu 53 00:03:20,820 --> 00:03:21,780 and then inside there. 54 00:03:21,790 --> 00:03:26,510 I'll put another day of the class name of right menu 55 00:03:29,610 --> 00:03:33,600 and then we're going to put a link tag both inside of this div right here at the parent div and I'll 56 00:03:33,600 --> 00:03:37,980 put another link tag inside of the right menu div as well. 57 00:03:37,980 --> 00:03:42,960 Now when I say link tag on talking about that link element or the link component from the re-act Rotterdam 58 00:03:42,960 --> 00:03:44,130 library member. 59 00:03:44,160 --> 00:03:49,680 The entire idea behind our Hetter up here is that these are going to be links that the user can click 60 00:03:49,680 --> 00:03:51,600 to navigate around her application. 61 00:03:51,600 --> 00:03:56,100 So I want to at least make sure right now that this streamer kind of logo on the left hand side and 62 00:03:56,100 --> 00:04:01,860 the streams link right here are both link elements that a user can click to navigate around our application. 63 00:04:01,860 --> 00:04:09,110 So at the top I'm going to import link from re-act router dom. 64 00:04:09,340 --> 00:04:15,820 And then inside of the top level div I'll put a link to a route route of just forward slash like so 65 00:04:16,600 --> 00:04:24,240 I'm going to give this a class name of item and I'll close that link tag off and I'll give it some title 66 00:04:24,240 --> 00:04:26,020 like say streamer. 67 00:04:26,070 --> 00:04:28,050 This is going to be the name of our application. 68 00:04:28,050 --> 00:04:32,850 Again it doesn't really matter what we call it you can call it streamer or stream me whatever you want 69 00:04:32,850 --> 00:04:35,370 it to be it's totally up to you on how you name it. 70 00:04:35,470 --> 00:04:40,000 And inside of our div with right menu we'll put another link tag. 71 00:04:40,200 --> 00:04:45,140 This is also going to go back to our route route that has our list of all of our different streams. 72 00:04:45,300 --> 00:04:48,420 So I'm going to give this a class name of item as well. 73 00:04:52,890 --> 00:04:54,380 Oops I closed it off at the div. 74 00:04:54,400 --> 00:04:55,000 My mistake. 75 00:04:55,000 --> 00:04:58,560 So I'll put the link tag in there instead and then I'll give it the text something like. 76 00:04:58,570 --> 00:05:02,820 All streams because it's going to be a link back to our entire big list of streams. 77 00:05:02,820 --> 00:05:06,300 Now you'll notice we have two links inside the header that's going to take the user back to the root 78 00:05:06,300 --> 00:05:08,020 route that is totally normal. 79 00:05:08,020 --> 00:05:10,420 Nothing out the ordinary about that. 80 00:05:10,420 --> 00:05:15,550 Entirely likely that you would want to have a user able to click a header or the logo on the top left 81 00:05:15,560 --> 00:05:19,270 down side and then also have a very clear link on the right hand side as well. 82 00:05:20,150 --> 00:05:21,710 All right so let's save this. 83 00:05:21,890 --> 00:05:27,890 Now if we flip back over to our application Oh I got a little typo inside of my import up here make 84 00:05:27,890 --> 00:05:31,240 sure I have re-act Rotterdam so I'll save that. 85 00:05:31,580 --> 00:05:35,520 And now we are run into an interesting little issue right here. 86 00:05:35,560 --> 00:05:38,780 The air says you should not use a link outside of a router. 87 00:05:38,930 --> 00:05:42,280 So I bet you might be able to guess why we are seeing this error message. 88 00:05:42,290 --> 00:05:43,630 But let's take a quick pause right here. 89 00:05:43,640 --> 00:05:47,360 We'll come back the next section will talk about exactly why we are seeing this and how we're going 90 00:05:47,360 --> 00:05:48,140 to fix it. 91 00:05:48,170 --> 00:05:49,970 So quick break and I'll see you in just a minute.