In our package, we will have quite a few Views: index/create/edit for the Roles and the same list for the Permissions. They should all have one design layout, right? So how do we incorporate the layout and how do we extend it in our Blade files?
Of course, there are a few ways to structure it, as it would be in any Laravel project, but I will go with this structure below.
The layout file would look like this:
packages/laraveldaily/laravel-permission-editor/resources/views/layouts/app.blade.php:
<!DOCTYPE html><html><head> <title>Laravel Permission Editor</title></head><body> <nav> <div> Laravel Permission Editor </div> <div> <a href="{{ route('permission-editor.roles.index') }}">Roles</a> <a href="{{ route('permission-editor.permissions.index') }}">Permissions</a> </div> </nav> <main> @yield('content') </main></div> </body></html>Notice: I intentionally skipped some HTML tags and all Tailwind classes, the goal of this tutorial is so you would understand the structure, as your packages would look differently, anyway.
Now, how do we extend that layout? Simple, just use the same prefix that we had registered in the Service Provider.
packages/laraveldaily/laravel-permission-editor/resources/views/roles/index.blade.php:
@extends('permission-editor::layouts.app') @section('content') Roles: It works with Layout!@endsectionAnd another one:
packages/laraveldaily/laravel-permission-editor/resources/views/permissions/index.blade.php:
@extends('permission-editor::layouts.app') @section('content') Permissions: It works with Layout!@endsectionNow, if we reload our browser... We have the header and the navigation bar! (unstyled, of course, we'll get to that)
Not only that, we can click the links and navigate between the Roles and Permissions pages that use the same layout!
