Sign up to access "Build a Friend System in Laravel" right now.

we can just start to iterate through when we get those friends roll in. And the first thing that we're going to do is go ahead and create a controller for this. So let's go ahead and make a controller and we're just going to call this friend index controller. Once we've done that let's go over to our web routes and register this out. So let's do this down here under the

dashboard. So root get and we just want this to be slash friends. We're going to reference that friend index controller like so and we don't really need to give that a name. Let's head over to our friend index controller. First thing to do is just make sure that we have some middleware applied to this. So we have to be signed in so we're just going to say auth and then we're going

to go ahead and use invoke here to return a view. We don't have one at the moment. Let's go ahead and make one up and we'll just call that friends index. So let's create that view out in here. So of course under resources and views let's create a friends folder and in there let's create index dot blade dot php and we'll just put friends in there for now just so we know that it's working.

Okay so as part of Laravel Breeze we get under our routes under our views here we get the layout section and app. This also includes the navigation which is pulled in just here. Now what I'm actually going to do is wrap this in an auth directive. The reason being is we're going to copy this entire template over to non-auth pages like the profile page and this navigation within

Breeze is not set up at least at the time of recording to work with guests. So it's a little bit of a kind of hacky workaround but you can go ahead and modify the navigation if you want to. So if we look at the navigation in here we've got this logout link. Let's go ahead and search for that and you can see that's just here we've got this x drop down link blade component. Now we can

put this just at the top here of course go ahead and get rid of this on click which works for the logout and just re-indent this and we can just write friends in here and we can go through to that friends route. So it might be a good idea actually to give this a name so let's go ahead and say name and friends. Okay if we come back over now we should just be able to click on friends

and go through to that friends page. Great now of course we don't want this looking like this so we're going to head over to the dashboard template which we've already seen and we're going to copy that over to the friends index page just so we don't have to spend too much time on this and you can see we see something like this. So we want this looking like we saw in the introduction so

we kind of want one section on the left and one section on the right. So we're going to keep this bit here this is the bit with the background the white background so is this actually so we might just need to fiddle around with this a little bit. So I'm going to create a div out here this is going to represent the left section so let's just write left in here I'm actually going to comment this

out as well and let's go ahead and create out a right section as well just so we can see what we're doing. Now for this kind of overall wrapper what we can do is make this a grid and we could say grid cols 6 with tailwind and I think that should be all we need. What we can then do is assign these different grid sizes and that will nicely match up. So let's say that we want this

to be colspan of 4 and we want the right hand side slightly shorter in width so let's say colspan 2 which of course adds up to 6. If we give that a refresh there we go this is our kind of larger left side and this is our smaller right side. So we want these things here inside of each of these so we want this in the left hand side and this is going to be our kind of friend section

and then this side if we just paste that in is going to be our kind of request section. Now this doesn't quite look right at the moment we just need a gap in here so what we can actually do is give this a gap maybe of 6 and there we go. So that of course looks a lot better and let's go ahead and just style out the kind of lists that we want to see here. So for our friends let's go

ahead and create a div in here and I'm actually going to go ahead and add a space y of 3 to separate out each of the elements we create in here. That's going to be the h2 which is going to say friends and then down here is going to be each of the friends and once again that will be spaced out by say 3. So we'll have a div in here with one friend and a div in here with another friend.

So at the moment it's not going to look a hundred percent but we all we need to really do here is just style this header up. So let's go ahead and say text large and font semi-bold. Let's go over give that a refresh there we go. So for each of our friends we want the friend name here and then we want an action on the very right hand side. Same with the request section as well. Let's finish

this bit off and then we can just copy and paste that over. So for each of the friends let's just pull this down here we want this to maybe have a class of flex so we'll say item center and we'll go ahead and justify this between. That means that if we have the friend's name just here and then some kind of action next to it that's going to separate them two like this and that's

exactly what we saw before a friend's name and then the action on the very right hand side. So for the friend's name this is actually going to be an anchor so let's change this over to an anchor tag and just for now we'll set an href of hash because we're not quite sure where that's going to go through to yet and with the action we probably want this kind of set up for multiple

actions so why don't we go ahead and set this to a space x of two. What that means is if we have multiple buttons here within our forms so for example to accept a friend request or to reject a friend request it's going to look like that we get that little bit of spacing between each of these. So I think that's pretty much everything that we need. We'll leave this

as it is and pretty much just copy this entire structure down so let's go ahead and grab this here pull this down to this request section and let's fill this in. So let's indent that this is going to be our friend requests and then we're going to be able to accept or reject a friend request for this one actually let's change this over now this is going to be unfriend someone

so that's what we're going to end up with and if we come down and just duplicate this down that's going to be our pending friend request so people that we are trying to add so we will be able to cancel that so let's change that action over to cancel and there we go now we've got a little bit of a spacing issue between these two but that's no problem what we can do is come to

this outer wrapper and we can set a space y maybe of six and that's going to separate them out nicely so that's pretty much our friends page scaffolded out we've got a link here for the friend's name that we can click through to headers for each of the sections and we've pretty much scaffolded out the button labels that we're going to have