Build Modern Laravel Apps Using Inertia.js - Ep 8, Active Links

next up is active links so notice if i click around to the navigation here at the moment on the link itself there's no visual indication that it's currently active and of course this is something we should offer so let's see what we can do here i'm going to visit my navigation component and on the home page itself why don't we set a conditional class for example let's make the link bold and underlined if some condition happens to be true for now i'm going to force it and that'll reformat all right so not quite right but if i switch back ideally this is how we want it to look if i'm on the home page it's bold and underlined but yeah at the moment as soon as i click away it doesn't update so in inertia we have access to this page property and actually if you want to take a look at it let's open up view dev tools and you can find it here the initial page now i want to point your attention to two properties here first step is the current url and second is the current page component that we're on okay we're going to leverage both of those to set these active links so what if i said check to see if the page url is the home page only on that condition should we make it bold and underlined so now if i go to the home page it works but if i click away to users or settings it turns off this is what we want okay so yeah of course i could select all of this and duplicate it here and update the link to users and then one more to what is it settings yeah give it a reformat and this would do the trick so now if i come back and refresh we do have more visual feedback it works but now one thing to be a little careful what if for whatever reason when you click on the users link it adds some kind of query string maybe a filter or something like that well now our active links will break because we're checking to see if the url is precisely users but now it's users and then a query string so notice if we come back give it a refresh and now click on users yeah we don't get that visual styling and again that's because of the query string okay so remember we're dealing with basic javascript here so if you want we could just say all right well i don't want to do a perfect match of users but how about if it starts with slash users that's enough all right basic javascript here users okay come back and now if i give it a refresh we fixed the issue now it'll remain active no matter how much we have here refresh and that still works of course it does okay but now here's another thing to consider if i bring back view dev tools we did see it marks the current components or the current page component we're using so if you think about it there's nothing preventing us from using that instead think about it if i switch back now instead of basic string matching i could say check to see if the component is users and i bet that'll do the trick now so if i come back and try it again we click on users with a full query string but it is still bold because now we're matching not against the current uri we're matching against the currently active page component and that page component just to make sure we're clear is the users page component okay so yeah if we wanted to take that approach we would say something like if the page component is home and then down here check to see if the page component is settings and that would work as well come back refresh and we have our active links okay so that mostly does it but real quick before we wrap up what we have here i think is perfectly fine i don't personally have an issue with it but if you'd like to remove a little of this duplication again there's nothing preventing you from extracting any number of components to wrap things up so for example maybe you want to set up a nav link component that is a wrapper around the link which is a wrapper around the anchor tag you can wrap this up as many times if you want if it makes you feel better and then you could even add custom attributes like um i don't know active and that will determine whether or not we make it bold so the logic would be here so if we do things right we want this to be identical to this all right so let's see if we can make it work i'm going to add a new view component here called nav link and i'll paste in what we have there next we'll declare our props and we know one is active that'll be a boolean and then of course i also have to import my link component so i'll do that here and then register it finally i can replace this hard-coded conditional with whatever active evaluates to okay last thing the href is going to be passed through automatically because the component will inherit any attributes you send through that are not registered as props so i can end up with something like this and then i'll turn this into a slot all right i think that'll do the trick so now if we come back up the only remaining thing i need to do is set the text here so home alright so let's get rid of that and give it a reformat and then i'll do the exact same thing to these as well this will return to slash users and we'll set that all right and then finally one more for the settings page this is now settings check for settings update the text and whoops update that as well and yeah here's what we get so notice we have cleaned it up a little bit and we have removed some of that class duplication the only remaining step is to import the navlink component import nav link and then update the component reference all right and then finally this old link we don't need anymore all right let's give it a shot refresh and we get the same thing as we had before so that's just a slight refactor if and only if you think it's worth it

Channel: Laracasts

Views: 1,020

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: zewdU11rp18

Length: 6min 45sec (405 seconds)

Published: Thu Oct 14 2021