1 00:00:01,100 --> 00:00:02,760 Our header is coming along nicely. 2 00:00:02,770 --> 00:00:09,080 So now all we need to do is replace that little kind of not so great expression right there with a variety 3 00:00:09,080 --> 00:00:13,760 of different light elements each these allies is going to try to display a different link. 4 00:00:13,760 --> 00:00:17,050 So in total we're going to eventually have kind of three allies right there. 5 00:00:17,060 --> 00:00:20,900 One will be to sign out and then one for sign in and one for sign up. 6 00:00:20,900 --> 00:00:25,550 Now we could definitely write out these allies right here and try to figure out how to kind of conditionally 7 00:00:25,550 --> 00:00:30,890 toggle the visibility of each them based on current user rather than writing that all out right here 8 00:00:30,910 --> 00:00:33,180 and ending up with a lot of really messy ASX. 9 00:00:33,230 --> 00:00:37,850 I want to show you a little trick that I have for whenever we want to render a collection or cut of 10 00:00:37,850 --> 00:00:40,910 a list of elements and then conditionally show or hide some of them. 11 00:00:41,330 --> 00:00:44,910 So here's my little trick up at the very top of this function. 12 00:00:45,050 --> 00:00:48,240 I'm going to define a new variable called Lynx. 13 00:00:48,350 --> 00:00:54,380 This is going to be an array and in each of these so each index inside of here I'm going to define an 14 00:00:54,440 --> 00:00:57,620 object that has a label. 15 00:00:57,820 --> 00:01:00,900 The first one I'll give sign up and then in a trough. 16 00:01:00,910 --> 00:01:07,540 So this is going to be a location I want to navigate to or sign up are a trap would be off slash. 17 00:01:07,570 --> 00:01:13,890 Sign up I'm going to do find two more objects very similar to this for sign in and sign out. 18 00:01:14,060 --> 00:01:22,990 So I'll do one for sign in art flash sign in and then finally one for 19 00:01:25,820 --> 00:01:31,220 SIGN OUT SO slash off slash sign out. 20 00:01:31,520 --> 00:01:33,950 We have not put together a sign out page just yet. 21 00:01:34,010 --> 00:01:39,170 So this link will probably not work just yet but definitely the first you really should sign that we've 22 00:01:39,170 --> 00:01:40,490 got this array of links. 23 00:01:40,550 --> 00:01:45,180 Here's the real trick I want to conditionally toggle whether or not these things are visible. 24 00:01:45,260 --> 00:01:50,840 So to do so I'm going to put the expression to decide whether to show each of these right before each 25 00:01:50,840 --> 00:01:51,760 of these objects. 26 00:01:51,770 --> 00:01:53,090 Let me show you what I mean. 27 00:01:53,240 --> 00:01:54,680 I only want to show sign up. 28 00:01:54,680 --> 00:01:59,330 If the current user is equal to no because remember if these are just not signed in current user will 29 00:01:59,330 --> 00:02:00,560 be equal to null. 30 00:02:00,560 --> 00:02:11,120 So I got to say if not for print user and then the object so if current user is equal to null we're 31 00:02:11,120 --> 00:02:12,350 going to take the opposite of that. 32 00:02:12,380 --> 00:02:13,510 That gives us true. 33 00:02:13,520 --> 00:02:17,340 And so this first array entry is going to end up with that object right there. 34 00:02:17,630 --> 00:02:21,350 Well then do the same thing for the next one. 35 00:02:21,570 --> 00:02:26,730 And then finally for the last one right here I only want to show this link or show something related 36 00:02:26,730 --> 00:02:27,470 to sign out. 37 00:02:27,600 --> 00:02:36,030 If the current user is signed in so if the current user is truly so say or user and then put that object. 38 00:02:36,030 --> 00:02:44,860 Now the result of this is going to be either false false and that object right there would be the case 39 00:02:44,860 --> 00:02:53,250 in which I am signed in and then the only other scenario that we could have would be these first two 40 00:02:53,250 --> 00:02:56,730 objects for the first indices and then false as the last one. 41 00:02:56,760 --> 00:03:00,620 So it would look something like that right there. 42 00:03:00,630 --> 00:03:02,090 So now we've got that array put together. 43 00:03:02,100 --> 00:03:09,120 We're going to map over it or see we were going to first filter so for each of these indices we're only 44 00:03:09,120 --> 00:03:16,800 going to keep these indices that are not falsely so I'm going to say link config and I'll just return 45 00:03:17,160 --> 00:03:23,190 link config that's going to figure out or filter out any entries in there that are false and then for 46 00:03:23,190 --> 00:03:25,560 all the remaining entries I'm going to map over each one 47 00:03:28,810 --> 00:03:35,420 so for this mapping function the argument to it is going to be these objects all d structure out label 48 00:03:35,510 --> 00:03:37,900 and a trough and then sight of here. 49 00:03:37,980 --> 00:03:42,620 I will build up and return my ally. 50 00:03:42,680 --> 00:03:47,600 I'm going to assign a key the key property I'll use the trip of each link and then right now rather 51 00:03:47,600 --> 00:03:51,800 than worrying about getting any actual links inside of you or some like that let's just print out the 52 00:03:51,800 --> 00:03:55,340 labels so that you can see how this links thing actually works. 53 00:03:55,340 --> 00:04:01,080 So inside if you're going to put in link may not link but label. 54 00:04:01,200 --> 00:04:05,520 And then finally I'm going to show links inside you all down here. 55 00:04:05,790 --> 00:04:08,640 There's the well I'll show links right there. 56 00:04:09,470 --> 00:04:16,010 OK let's see this put back over and see how we're doing so can refresh and I'll see that I've got signed 57 00:04:16,010 --> 00:04:24,030 up and sign invisible when I'm not signed in if I attempt to go to all sign up and sign up for new account 58 00:04:26,140 --> 00:04:29,040 now that will change to just be sign out. 59 00:04:29,040 --> 00:04:35,650 So again just a little trick to conditionally show content based upon a kind of single filtering criteria 60 00:04:35,680 --> 00:04:37,090 of sorts. 61 00:04:37,090 --> 00:04:38,500 All right let's continue working on this thing. 62 00:04:38,530 --> 00:04:42,310 So we're gonna put a little bit more detail into this ally on ally itself. 63 00:04:42,310 --> 00:04:49,530 I'm gonna put it in a class name of NAV dash item I'm gonna give myself a little bit of space inside 64 00:04:51,130 --> 00:04:55,270 I want to have an actual link inside of yours so remember how we create links with Next j yes we have 65 00:04:55,270 --> 00:04:58,410 to use that link thing and an anchor element inside. 66 00:04:58,440 --> 00:05:02,610 Around the label I'm going to place a link with an H graph of a trip 67 00:05:05,520 --> 00:05:12,820 and then around the label itself I will place an anchor tag but the class name of NAV dash link and 68 00:05:12,860 --> 00:05:15,500 close off the anchor tag. 69 00:05:15,740 --> 00:05:19,110 Let's say this look back over all right. 70 00:05:19,110 --> 00:05:23,100 So there's our link when I hover over it you can see the correct link at the bottom left to your browser 71 00:05:24,670 --> 00:05:30,050 and if I manually sign out once again by clearing my cookie and refresh I'll now see sign up and sign 72 00:05:30,050 --> 00:05:34,540 in so I can click to go to sign up I can click to go to sign in. 73 00:05:34,550 --> 00:05:34,860 All right. 74 00:05:34,880 --> 00:05:37,430 As that's working pretty well OK. 75 00:05:37,490 --> 00:05:43,550 Well our header is looking good with the exception of we can't really sign out just yet. 76 00:05:43,550 --> 00:05:44,780 I can sign up 77 00:05:48,230 --> 00:05:52,700 but now I should be able to click on sign out and have that actually do something right now I just get 78 00:05:52,700 --> 00:05:53,950 a four a four. 79 00:05:54,110 --> 00:05:57,890 So we're almost there but just little bit more pause right here and continue in just a moment.