Our header is coming along nicely.
So now all we need to do is replace that little kind of not so great expression right there with a variety
of different light elements each these allies is going to try to display a different link.
So in total we're going to eventually have kind of three allies right there.
One will be to sign out and then one for sign in and one for sign up.
Now we could definitely write out these allies right here and try to figure out how to kind of conditionally
toggle the visibility of each them based on current user rather than writing that all out right here
and ending up with a lot of really messy ASX.
I want to show you a little trick that I have for whenever we want to render a collection or cut of
a list of elements and then conditionally show or hide some of them.
So here's my little trick up at the very top of this function.
I'm going to define a new variable called Lynx.
This is going to be an array and in each of these so each index inside of here I'm going to define an
object that has a label.
The first one I'll give sign up and then in a trough.
So this is going to be a location I want to navigate to or sign up are a trap would be off slash.
Sign up I'm going to do find two more objects very similar to this for sign in and sign out.
So I'll do one for sign in art flash sign in and then finally one for
SIGN OUT SO slash off slash sign out.
We have not put together a sign out page just yet.
So this link will probably not work just yet but definitely the first you really should sign that we've
got this array of links.
Here's the real trick I want to conditionally toggle whether or not these things are visible.
So to do so I'm going to put the expression to decide whether to show each of these right before each
of these objects.
Let me show you what I mean.
I only want to show sign up.
If the current user is equal to no because remember if these are just not signed in current user will
be equal to null.
So I got to say if not for print user and then the object so if current user is equal to null we're
going to take the opposite of that.
That gives us true.
And so this first array entry is going to end up with that object right there.
Well then do the same thing for the next one.
And then finally for the last one right here I only want to show this link or show something related
to sign out.
If the current user is signed in so if the current user is truly so say or user and then put that object.
Now the result of this is going to be either false false and that object right there would be the case
in which I am signed in and then the only other scenario that we could have would be these first two
objects for the first indices and then false as the last one.
So it would look something like that right there.
So now we've got that array put together.
We're going to map over it or see we were going to first filter so for each of these indices we're only
going to keep these indices that are not falsely so I'm going to say link config and I'll just return
link config that's going to figure out or filter out any entries in there that are false and then for
all the remaining entries I'm going to map over each one
so for this mapping function the argument to it is going to be these objects all d structure out label
and a trough and then sight of here.
I will build up and return my ally.
I'm going to assign a key the key property I'll use the trip of each link and then right now rather
than worrying about getting any actual links inside of you or some like that let's just print out the
labels so that you can see how this links thing actually works.
So inside if you're going to put in link may not link but label.
And then finally I'm going to show links inside you all down here.
There's the well I'll show links right there.
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
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
now that will change to just be sign out.
So again just a little trick to conditionally show content based upon a kind of single filtering criteria
of sorts.
All right let's continue working on this thing.
So we're gonna put a little bit more detail into this ally on ally itself.
I'm gonna put it in a class name of NAV dash item I'm gonna give myself a little bit of space inside
I want to have an actual link inside of yours so remember how we create links with Next j yes we have
to use that link thing and an anchor element inside.
Around the label I'm going to place a link with an H graph of a trip
and then around the label itself I will place an anchor tag but the class name of NAV dash link and
close off the anchor tag.
Let's say this look back over all right.
So there's our link when I hover over it you can see the correct link at the bottom left to your browser
and if I manually sign out once again by clearing my cookie and refresh I'll now see sign up and sign
in so I can click to go to sign up I can click to go to sign in.
All right.
As that's working pretty well OK.
Well our header is looking good with the exception of we can't really sign out just yet.
I can sign up
but now I should be able to click on sign out and have that actually do something right now I just get
a four a four.
So we're almost there but just little bit more pause right here and continue in just a moment.