00:00 Let's start by making the epic notes in the header and footer link to the home page So we're going to change this div to a link and that's going to come from remix run react and that's going to go to Slash that's the home page and we'll do the same thing down here. And that's a link right here and

00:21 Now if I click on that boom I go home awesome And then we're going to need to have a link on the user profile page. That'll take us to the notes So here's our user profile page. Let's add a link to notes link to and

00:37 We'll say notes as a relative route. So no slash we could say users Cody slash notes But it would be much better to just say notes here as kind of a relative path. We could also do a dot slash But for me personally, I don't like doing the dot slash so We can do a relative link here and one of the nice benefits of that is

00:58 If we change the file names or move some things around we typically don't have to update our links. They'll all just be relative They'll continue to be relative which is kind of nice so here we can say notes and We'll get rid of that. We'll import this from remix run react and now we've got our notes link So I click on that and here I am on the notes page now on this page

01:18 I need to have two links one to take us back and one to take us to a specific note so we're going to start here with a link and we'll say back to Cody or you can call that whatever you want and we'll say two and

01:36 Here we could say users Cody and here. Let's actually make sure that is going to work So let's bring that in and back to Cody. Boom. There we go. And then we can go back to notes But again, we are like relative routes And so what I would prefer is to just say go up one directory right up one path in the URL segment

01:56 So here we have notes. We just want to go here So we go back up kind of like in your directory structure The problem here is if I would save this one if I do this Then that actually takes me to home and it might be a little confusing at first

02:13 Why that is until you look at the NPX remix routes for what we have so this is the route that we're working with right now, so it's the users Cody notes and by default the way that the relative routing works is the these links is Their relative as far as the the routing is concerned. So we have

02:34 This we're saying from here. I want to go to the parent Well, the parent is the root because this is not nested inside of the parent as far as the URL is concerned But we want to go back as far as the URL is concerned as far as the path is concerned and so we're going to opt into that behavior by saying relative and

02:53 Path and with that now if I click here, I'm going to go up one Relative to the path so that takes care of that one We could of course make this look a little bit nicer and perhaps we will in the future but let's just move on to the next bit which is to

03:12 Go to the specific note. So this is actually going to be pretty similar to what we've done already So I'm going to grab that we're going to say some note ID and this is going to say Not relative to the path this it would work either way. Actually, it's the same for this one and we'll just say some note right here and

03:32 Then we save that and here we go. We click on some note and we're on that particular notes page So that works now, of course We can also do this thing called or use this component called a nav link. So let's bring that in nav link and

03:51 Bring that in from remix run react and the cool thing about the nav link is that it has a special class name prop So you can of course provide whatever class name that you want to It's just like a regular class name, but you can also provide a function that returns a class name

04:08 And so here we'll we'll just say underline as our default class name So there we get that one, but if it's currently active I want to style it so that it looks like where we have that one selected And so what we're going to do is destructure and is active

04:26 Parameter or prop that is passed to this class name and we'll say Just template literal here for is Active and if it is active then we say BG accent for the accent color Otherwise just empty string and you can format that however you like and now you see it is currently

04:47 Highlighted now, of course, you can restructure this to make it look nice Just like Marty the money bag said we probably should but hopefully the idea comes across That we can do relative links that are relative to the path to get us back here We can do a relative link that's relative to the route. That is what we had here and then

05:06 Another relative to the route link, but this one is a nav link so when it's active we can style it especially so that you can tell that this is the one that we have active and That is all of the links that we've added to our app. We've got the these Links are not relative. These are absolute links. They start with with the slash

05:27 Relative links here and then relative to the path and then a nav link