The next thing that we need to do is extract all of the common markup into partial views into layouts, and we need to start thinking about components. Now of course we know the basic layout is three columns, but we're also missing some things. We have a lot of assets that we don't see. And now that I think about it, of course we don't because we didn't copy those. So in Simon's work, we have the fonts and we have the images.

So in Simon's work, we have the fonts and we have the images. We need to copy those and paste those into the public folder in our Laravel application. And once that's done, then we will have those assets and yeah, there we go. So that's great. So we have three columns, the navigation on the left, the main content in the center, and then the aside or the sidebar on the right hand side.

the navigation on the left, the main content in the center, and then the aside or the sidebar on the right hand side. And I think before we extract the layout, let's extract the partials because that at least makes it a little easier to identify what needs to be part of the layout and what doesn't. So let's start with the navigation and let's collapse everything here as far as the header, because right after the header is the content. So here is our navigation, which we want to put inside

because right after the header is the content. So here is our navigation, which we want to put inside of a new partial view. So let's create that partial view and we'll just call it navigation.blade.php. Let's paste that in. And now that we have it, we can simply include that, although I think we got rid of more than what I intended to. So, uh, let's clear the, ok, there we go. So we will include partials.navigation.

So, uh, let's clear the, okay, there we go. So we will include partials navigation. Now this is going to not necessarily be tricky, but we do need to think about this because the feed view just has our navigation, the profile view has the post button, but other than that, the markup is essentially the same. So as long as we take that into account, we should be fine. So now that we have our navigation partial view and it looks like it's working, okay, let's take that out.

So now that we have our navigation partial view and it looks like it's working, okay, let's take that out of feed just to make sure that yep, that is working as we need it to. So now we need to include that post button. So let's do a search for that button. Here it is. Now as far as the markup is concerned, you know the user controls are gonna be the same between the feed and the profile. But if we take a look here, we can also see

between the feed and the profile. But if we take a look here, we can also see that there is this div element that surrounds everything. So we need to include that as well before our User controls. And we can do something like this to where if showPostButton is set, then we will display the postButton. So that's gonna work just fine. We do of course, need to include the closing div for this new div element,

We do of course, need to include the closing div for this new div element, but that's gonna be easy enough to do because we just need to add that after this div right here. So once again, we will check if this is set so that we can output the closing div tag. And that should give us the functionality that we need. We do, however, need to take out the navigation from our profile view,

We do, however, need to take out the navigation from our profile view, but that's gonna be easy enough to do because we just need to grab this header element. We'll get rid of that so that we can include that partial view. But we also need to say showPostButton is true. And it really doesn't matter what we set it to here because we are using isSet.

And it really doesn't matter what we set it to here because we are using isSet. Now, this is something that we need to remember because if we ever come back to this and need to set it to a boolean value, then we need to change this from isSet to just a normal if, but I'm not sure if we're gonna need that. And if we do, we can just come back and change it. It's not that big of a deal. It's what we do whenever we write software.

It's not that big of a deal. It's what we do whenever we write software. But now of course we need to be sure that it works. And sure enough it does. The feed doesn't show the post button the profile does. So now we can turn our focus to the aside, which is going to be a lot simpler because it is the same between both of those views. So let's collapse the main, because that makes it a lot easier to get to the aside

So let's collapse the main, because that makes it a lot easier to get to the aside and we can just collapse the aside because we just need to take that so that we can create a new partial view and we'll just call this aside.blade.php. And we're just gonna paste in the market for the aside. And we just need to reference that here. So we can once again include partials.aside and that's gonna be fine.

So we can once again include partials aside and that's gonna be fine. We need to do that both in feed and profile. So let's once again, collapse everything so that we can very easily just replace the aside and that's going to be exactly what we need. But now we need to talk about the layout. So we have two views, feed and profile that of, of course the content is gonna be different,

and profile that of, of course the content is gonna be different, but both of these views include the navigation and the aside. And we need to think, is that what we need? Because, you know, we could create a layout that includes the navigation and the aside and you know, that would be fine. But there's also an argument to leave it as is of of course, you know, extracting the layout,

But there's also an argument to leave it as is of course, you know, extracting the layout, but keeping it so that each view is responsible for outputting the navigation and outputting the aside. You know, because the profile is just a little bit different. And if we have other views that need to do the same thing, well, it kind of makes sense that the views are then responsible for displaying the partials as they need.

that the views are then responsible for displaying the partials as they need. I'm not necessarily sure how we want to go about this, but I, I do know I want a layout page. So let's do that before we make any other decisions. So let's make a component, we'll call it Layout, and we'll use a class for this. I'm not necessarily sure if we will need a class, but if we do decide to have the navigation and the partials as part of the layout, then yeah,

but if we do decide to have the navigation and the partials as part of the layout, then yeah, we might need a class there. So as far as the markup, you know, we have everything relatively ready to go. We just need to paste in everything to the opening body tag. And then finally the closing body tag and the closing HTML. But of course we do need our slot here. So let's go ahead and let's have that so that then our feed and our profile will use our layout,

So let's go ahead and let's have that so that then our feed and our profile will use our layout, which means our views for feed and profile are going to be much cleaner. And I like clean views. Really, I don't know anybody that doesn't. So we will use our Layout component here. Let's add in the closing /Layout tag. And when we sanity check in the browser, we see that it looks the same as it did before.

And when we sanity check in the browser, we see that it looks the same as it did before and I think that this is a great place to commit our changes. So let's go ahead and commit saying extracted layout, nav, and aside. So we have now extracted the primary markup. We have our layouts, we have the partial views for the navigation and the aside, but we're still not done. There's still some markup that we can extract.

for the navigation and the aside, but we're still not done. There's still some markup that we can extract to be partial views, and I also want to start creating some components like the artists to follow. And we will do that in the next episode.