11. Navbar and Link Components - Laravel 11 tutorial for beginners.

Hello friends T here welcome so in the previous video we created this now bar and I told you we I want to create a separate component for the nav bar and also we need to fix the highlighted link so we are in the home and the home is highlighted but if I navigate the post now we are in the SL post here again the home is highlighted so we need to fix that and let's start and also let's position the data here in the same position we have the n so I'm going to open the layout page and here we have navb bar and I'm going to cut this and inside the components let's create a new component and I'm going to name it a NB bar. blade. PHP hit enter paste the na bar here save and now in the layout let's render that now bar using the x dash and the name of the component which is Navar in my case save come here and refresh we have the same result post on okay now because we are not going to add something here as we have done on the with the X layout as you can see we have add something but inside the now bar we don't need the HS something thing what we can do is just C close that and it's going to work again okay now let's fix this position right here in the same as the na bar and what I can do is in the welcome here we can cut and move inside the div with a Class B Max with 6 XL and MX out with the see and inside P that in so the max WID is going to be Max with 72 RAM and also MX Auto is margin left Auto and margin right Auto now if I save that come here as you can see we have the same result but if we navigate the post yeah we need to do the same thing also in the post index and also in the other files and if you want to have the same in all the pages to be rendered in the same line what we can do is instead of applying some classes in every page we can navigate the layout and put the dollar sign slot in that diff so diff WID class max WID uh 6xl MX AO put the slot ah hand let's close a diff let's say come here the same result as you can see if I go to post now yeah we have the same now let's fix the link here and I have over here a blade template so in the documentation you can go and read more and we have here also blad directives and what I want is to navigate the conditional classes here as you can see here we have conditional classes and we can apply some classes conditionally so if that is active we can this is going to be applied if it not active it's going to be applied this one so let's copy this and let's open now the nav bar and let's apply here first okay so default classes is going to be this one and also we need that is active so that is active I'm going to pass all right here I don't need the has error just is active and now let's move let's cut all the classes and I'll going to move it right here now the active is active what I want is to be text white BG blue somewh to cut that and paste it here then mdbg transparent and text blue also cut that one and paste it here and next in the dark mode the same thing we need to gra that and paste it here if that is not active I want to copy what we have here to this one so text gr 9 100 cut paste it here on Hover MD hover cut it past that one also on MD hover text blue next is on dark mode we need to say text white empty dark hover and I think yeah we need I cut all of them and paste it I don't need the b in the has error here and let's save now that is active by default is false here we have hardcoded that and if I come here and refresh here we have now the home and as you can see it's not highlighted if I go to home yeah have the same thing here we have the P but we don't see because I removed all the classes there now let's uh change this to be true and as you can see the home is highlighted if I go back the false again save now is white now we need to check if we are inside the home URL so just for slash we need to make the is active true only for this link and if we are in the SL post we need to make active the links in in the post link and if we have more than just this two links is we need to replace the code over and over and this is not a good idea so we can create a separate component for the link so inside the components let's create a seate component for let's name it a Navar link do blade. PHP okay and now let's move the LI completely in here and also let's cut this for now and paste it right here inside the N bar now I'm to remove also this one and juster that component so x dash and the name of the component which is nowar link and in here I want to say home let's duplicate this and for example for this one I want to say post now if I save come here we have home and home but we say here PST and that's it because in the naar link we have hardcoded the home and inside here we need to say that the dollar sign slot the default slot now if I say that we have home and pause okay but here we are in pause now if I go to home yeah we are in home if I click to pause again we are inside the all because we have hardcoded in the Nar link the sh and how we can fix that let's remove the SHP from here save and in the N bar I want say shf the pass the shf right here and say for this one is going to be slash and for this one is going to be uh SL B and if I do that and come here nothing is going to change so this is not not any more link as you can see if you got the documentation of LEL and here we have play directives also we have components so passing data to component I click so you may pass data Tod components using HML attributes and hardcoded Prim values may be passed to the component using simple HTML attribute string so like this type xaler type passing the error or PHP expressions and variables should be passed to the components via attribute that use the colon character as a prefix now if we have a dollar sign message or an expression here we need to say specify colon here so which mean this is a dynamic okay but in this case in this example we have a class component and we don't have a class component we have an anonymous component so here we have components we have Anonymous components and let's go down there Anonymous index components and scroll down we have the data properties and attributes so Anonymous components do do not have any Associated class so we can pass the data there you may specify which attributes should be considered data variables using the props directive at the top of your components blade all other attributes on the component will be available via the components ATT rute back and here we have an example okay so this is we add the type error and the message and also we can add some classes if we want and then on the propes we have here a props directory we pass an array and for example the type what we have here is going to be a variable and also message is going to be a variable but as you can see here the class is not applied here which mean as you can see all other attributes on the component will be available via the component attribute back so you say attribute merge and pass in the class so it's going to merge this class also in here now let's open the nowbar link and at the top I'm going to say oops pass an array and what we want here is just if that is active and by default let's make this false and remove now this one okay so now if this is active this active is going to come from here but also now we need to pass attributes let's copy that and paste it here don't want to add the merge glass just pass in the attributes because we need to H the sh here okay so this SH now is going to be inside here because we added the attributes so let's see if I come here and refresh first as we can see is a link and if I go to post now we navigate the SL Po and all next thing is to add the active prop so on the nav bar we can say for example to this one I want to add the active and here I add column because this is going to be dynamic the active is going to be for example for this one true if I save and come here as you can see now the home is true or if I want to add the true here we can say happy to be true here and false here save come here now the post is true but we want that to be dynamic when we are in the home URL the home to be true and when we are in the post SL post the post to be true and how we can do that that we can do with the helper method from larav which is the request request Helper and we have chain we need to change the is and if the request is slash this mean that is true and the home is going to be true if the request if that is post is going to be the post true okay let's see now let's come here as you can see we in the post and the post is true if go to home now home is true po so very good so now we have this clean link We specify the sh here and the active if the request is this link okay friends that's it what I told you what I want to do in this video and well that what we have fixed so now if you like such a videos don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best thank you very much

Channel: Code With Tony

Views: 1,259

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 10, laravel filament, laravel components, laravel layout, laravel 11, laravel 11 for brginners, laravel tutorial 2024, best, 2024, tutorial, laravel 2024, laravel herd, laravel reverb

Id: WLM309aBEtk

Length: 14min 34sec (874 seconds)

Published: Sat Mar 30 2024