Integrating a layout

- [Instructor] In this video, we'll start to add the Nadia's Garden Restaurant branding to our Laravel project. In the Web Routes file, let's change this closure for slash to just return the home view, instead of that Laravel welcome view, which we don't need anymore. You can find the Nadia's Garden HTML assets in the exercise files for this video, so I'm going to add that folder to the workspace now, nadias_html. So now, down here, in index.html, first, let's take a look at the head element here. For the title, let's just copy the restaurant name for now, and then, if I go over to our layout file, app.blade.php in layouts, let's change the default from Laravel to that, and of course, we're going to need to change these to double quotes, since we have that apostrophe there. But, it's going to get this app.name config value from the name key in app.php in the config directory, which uses that environment helper method to get the app.name value we set in the last chapter. Then, over here, we can yield to a title section in the content pages that use this layout, in case we want to add a page specific part of the title, like a dash with the page name, or in the case of the homepage, this slogan here. We can also remove these font elements in the Laravel layout, and we'll add our favicon. And, in index.html, let's copy just the URL for this font, and then, we can paste it right into our Sass file, in resources, sass. And we'll just replace this font that we're not going to use for the Nadia site. While we're in here, let's remove Bootstrap, which we're not going to use in this course, and this Laravel rule. You might want to leave Variables around, 'cause it could come in handy, even though we might not get around to using it in this course. And then, in the nadias_html assets, let's just copy everything in this stylesheet right into our Sass file. So, now we can use Sass features with this CSS, and, for example, anything that begins with the top-bar class, I can nest under that first top-bar selector, and then, remove the top-bar part, like that. Let's also remember to copy the images folder from the assets, into the public Laravel folder, and that will make those images accessible with the source attributes that they already have. Next, I'm going to remove everything from the Laravel layout file that we don't need, but I'll leave a few things behind, like for instance, this div with id="app" because we need that for our view instance to be mounted on. And, I'm also going to leave these authentication links here, like login, register, and logout, but I'm just going to remove these classes that are no longer available. So, we have Login and Register, which will appear for guests. Otherwise, I'm not going to deal with displaying the account name for now, I just want the logout link. And you can see, that in Laravel, a logout is performed using a POST request, that's why this forum element is down here, so when someone clicks the logout link, it actually submits that form. And I'm also going to leave this yield('content') here, because that's what's going to allow our content pages to extend this layout. Now I'm going to paste in this root div, from index.html. Not everything belongs in the layout, but we'll move it there for now. And then we'll start piecing everything together. I don't actually need this div, I just wanted to remember to put id="app" on the root div here, which also has class="container". So now, let's grab those authentication links, and see if we can integrate them into the existing Nadia's navbar. So this should be fine like that, I just want to add another separator after Contact. Login and Register will appear together, since we do have a register route, so let's put a separator between those. Otherwise, the Logout link will appear, and that all looks fine now. Now, everything between the two main tags, actually belongs in our home view, so that other pages can also use this layout. So I'm going to replace everything in the content section of our home.blade.php view, and then, back in the layout, between the main tags is where I want to yield to those content pages. And also, in our home view, let's add that title section that I mentioned before, and instead of ending the section, I can just put the content right in there, like that. So, let's grab that slogan from index.html, and we'll put that in there. Now, if we check the browser, we see our branded homepage, and we can start adding some dynamic behavior to it, over the next few videos.