Navigation | Laravel Livewire 3 from Scratch

welcome to episode 9 of the tutorial series Live Wire 3 from scratch my name is William Juma in this episode we are going to look at navigation in Live Wire 3. we will be creating a navigation menu that will help us navigate through some of the full page components that we have created so far we will create a navigation bar component by running the command so in our terminal we will run the command PHP artisan Mac Live Wire and then the name of our component we're going to call it nav hit enter our component has been created I would like us to open the view the Live Wire view so in this case navba and this is what we have the inside here I would like us to just copy some bootstrap navigation bar and be able to place it in there so let us go ahead and do that so here I've already opened the navigation bar in both get bootstrap.com you can be able to find it out then I'm going to paste it here as long as we have a single root element in this case nav it will just work fine for us so I'm going to save it then obviously for us to be able to include this component we will include it somewhere so let us go ahead and include it in our layout so views components approach plate this is a layout file that we created in a previous tutorial and before we have the container this is where I would like us to include our Live Wire component so we can just do it by having Live Wire now let me just yeah it's it's one way in which you can be able to do it but I wanted to do it I like this kind of syntax Live Wire full colon nav hyphen like that and then actually I like that sort of syntax and so when we go to our application and we sort of refresh you can see we are having everything that we had being displayed here so I would like us to go ahead and give it some functionality so let us go back to our navbar.plate and inside here I want us to do several things I am going to leave the initial the the navbar brand I will leave it just like that the way it is but for this first one we are going to work with it but as you can see we are having this one that has been set to nav link active when we look at our nav Link in this case you can see home is a little bit different from the others so let us see how we can be able to give it some Live Wire functionality so the first thing I want us to do is wire navigate and whenever you have this on a link then whatever is that you happen is that this link that we're talking about will be you have some sort of SPF feel when it is clicked on and then of course there are several components that you have created one of them is called counter the one that is already loaded and this one here I want to change it to counter like that so when we refresh any refresh and then we click on counter we click on counter now you can see it is loading nicely here there is a loader there you can see somewhere yes it's loading and then our counter page is uh loaded so I would like to do the same for the others but also be able to take care of this nav link active so I'm going to render this class dynamically so what I'm going to do is um remove these and modify so we are going to modify this nav link active such that it will be rendered dynamically and actually what you're going to have is um we are going to just give it a class and we just check the request so request in this case we are checking the URL of the current request so request is like that and then after that we can be able to spit out whatever request it is that we are looking at so what I want us to do if the link that we are visiting is called counter so here I'm going to type in counter then we want this to have the nav link that is I active so in this case I can put a question mark and then I'm going to put the value nav link active the one that we had here so nav link active and then if that is not the case then what we are going to have is just nav hyphen link like that so in this case we are dynamically showing two classes depending on whether the URL that we are visiting in other words the route that we are visiting matches the route that we have set here so if it matches then we are going to link to to have nav link active if it does not match then we are going to have a class that is just nav link so let me just extend research that you can be able to see it I'm going to save it and then now because whatever it is that we have here is what we are going to do for every of the other links I'm just going to copy this and then I'll be just changing some few things so I will copy then also this one maybe I can be able to remove this one for current page it's not necessary and then for this link also we can be able to give it the same thing so you replace the class and of course we have wire navigate and then now the request should be now the next link that we are going to to work on and inside our components we also created a component that is called um drop down so if the link is a drop down then also here we are visiting drop down and then I will change this to drop down like that and remember these are components that we actually worked on on previous tutorials so if you find that um you do not have an idea of where they're coming from you can be able to just check the link in the description you will get um progress of sort of what you have been able to work with sofa and it should be useful it will help you to enable it to assist you to work on some of these things so what we have here is a drop down I don't need it I can remove it the link that we have here is when I don't need it and then we can do maybe the last one so even this one for nav link disabled I'm going to just replace it with what we have and then of course we had a component that we called register is a component that we called register so here we have href forward slash register like that and then here you can just call it register and then I think [Music] um that is it I think it's good enough we have been able to have some of the things that we are actually working on so when I refresh as you can see for register it's active because it's something that I have not done I will change this to register like that so we are saying if request is register and then we can be able to set it as an active link and of course the link that we are visiting is actually register so basically that is that so when I refresh not everything seems to be working fine when I click on counter you can see it's a bit bold I also click on drop down Now counter becomes a little bit dim and drop down becomes a little bit bigger and then register the same so our navigation bar is working perfectly basically that is what we can be able to do uh when we are working with navigation of course there's something else that I'd like to mention in our previous episode where we were looking at um the upload and download file there is something else that we did inside our Live Wire class I do not need to do that again we just mention whatever is that happened in there and then once we mentioned that I think you'll be able to have comfortably covered some of um the things that we actually are required to cover in this episode so here as you can see we were having we were having the we were we were uploading the file we were uploading the file and then after uploading the file we were also doing a redirects and so this redirect is similar to what we have there because it will not be a full page redirect so what you do you say return whenever you are in a class where you want to redirect maybe another page return this redirect the name of the route that you are directing to and then you must add navigate through when you do that then it will not reload and we can be able to see that clearly when we go to um our upload I think we have not included it here let me just include it then we just try it once you're able to see what happens then I think the tutorial will be successful so let us go ahead and um inside our navbar in our views I want to just copy whatever is that we have here one more time so I'm going to copy this and just paste it here and inside here I would like to change to upload I think that is the name of the route of the component that we had so upload then finally here we can have upload like that I'm going to save it when I refresh now we also have upload when I click on it we have not found so let us check our routes file and see what we actually called it we called it file upload not what I have typed in there so we go back to our to our navbar and we are going to change everything now to file upload here and also for the nav link active we also have it as file upload so once we have that if we refresh let me go back and then yes we can go to register then now when we click upload now it's working perfectly when I when I give a name can have file 4. and choose a file from my machine whatever file we are going to find so I remember we did put um conditions on what files we uploading so basically let me just scroll down and get maybe our ad document yes this one is okay going to open you know why it's not behaving yes I'm going yes it's opening it's opening yes now it's here when I click submit when I click submit now you can see there's a Reload that is happening and then the file is uploaded thank you very much for following this tutorial episode up until this point if you like the tutorial video please subscribe to my channel and hit the notification Bell by doing this you'll be notified when I upload another awesome video if you like the video you can give it a thumbs up and share you're welcome to engage in the comment section thank you

Channel: LaraPhant

Views: 1,498

Keywords: livewire components, livewire 3, laravel, livewire forms, validation, livewire 3 validation, form objects livewire 3, file upload, file download, navigation livewire 3

Id: fJD7OPO4AW4

Length: 14min 14sec (854 seconds)

Published: Sun Sep 10 2023