Laravel-adminlte: QUESTION: Split page layout into differents blade components?

[Shidersz]

Hi, on my local project I was working on splitting the page layout into different components (_top navbar, left sidebar, right sidebar, footer, etc..._), creating multiples blade templates for each one of these and then include they on the page layout in order to clean and make it easy to maintain. As an example, this is how the page.blade.php file looks now:

@extends('adminlte::master')

@section('adminlte_css')
    @stack('css')
    @yield('css')
@stop

@section('classes_body', $adminlte->getBodyClasses())

@section('body_data', $adminlte->getBodyData())

@php( $logout_url = View::getSection('logout_url') ?? config('adminlte.logout_url', 'logout') )
@php( $profile_url = View::getSection('profile_url') ?? config('adminlte.profile_url', 'logout') )
@php( $dashboard_url = View::getSection('dashboard_url') ?? config('adminlte.dashboard_url', 'home') )

@if (config('adminlte.use_route_url', false))
    @php( $logout_url = $logout_url ? route($logout_url) : '' )
    @php( $profile_url = $profile_url ? route($profile_url) : '' )
    @php( $dashboard_url = $dashboard_url ? route($dashboard_url) : '' )
@else
    @php( $logout_url = $logout_url ? url($logout_url) : '' )
    @php( $profile_url = $profile_url ? url($profile_url) : '' )
    @php( $dashboard_url = $dashboard_url ? url($dashboard_url) : '' )
@endif

@section('body')
    <div class="wrapper">

        {{-- Top Navbar --}}
        @if(config('adminlte.layout_topnav') || View::getSection('layout_topnav'))
            @include('adminlte::partials.navbar.navbar-layout-topnav')
        @else
            @include('adminlte::partials.navbar.navbar')
        @endif

        {{-- Left Main Sidebar --}}
        @if(!config('adminlte.layout_topnav') && !View::getSection('layout_topnav'))
            @include('adminlte::partials.sidebar.left-sidebar')
        @endif

        {{-- Content Wrapper --}}
        <div class="content-wrapper">
            @if(config('adminlte.layout_topnav') || View::getSection('layout_topnav'))
                <div class="container">
            @endif

            {{-- Content Header --}}
            <div class="content-header">
                <div class="{{config('adminlte.classes_content_header', 'container-fluid')}}">
                    @yield('content_header')
                </div>
            </div>

            {{-- Main Content --}}
            <div class="content">
                <div class="{{config('adminlte.classes_content', 'container-fluid')}}">
                    @yield('content')
                </div>
            </div>

            @if(config('adminlte.layout_topnav') || View::getSection('layout_topnav'))
                </div>
            @endif
        </div>

        {{-- Footer --}}
        @hasSection('footer')
            @include('adminlte::partials.footer.footer')
        @endif

        {{-- Right Control Sidebar --}}
        @if(config('adminlte.right_sidebar'))
            @include('adminlte::partials.sidebar.right-sidebar')
        @endif

    </div>
@stop

@section('adminlte_js')
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
    @stack('js')
    @yield('js')
@stop

And this is the how adminlte::partials.navbar.navbar looks like:

<nav class="main-header navbar
    {{ config('adminlte.classes_topnav_nav', 'navbar-expand-md') }}
    {{ config('adminlte.classes_topnav', 'navbar-white navbar-light') }}">

    {{-- Navbar left links --}}
    <ul class="navbar-nav">
        {{-- Left sidebar toggler link --}}
        @include('adminlte::partials.navbar.left-sidebar-link')

        @each('adminlte::partials.menu-item-top-nav-left', $adminlte->menu(), 'item')
        @yield('content_top_nav_left')
    </ul>

    {{-- Navbar right links --}}
    <ul class="navbar-nav ml-auto">
        @yield('content_top_nav_right')
        @each('adminlte::partials.menu-item-top-nav-right', $adminlte->menu(), 'item')

        {{-- User menu links --}}
        @if(Auth::user())
            @if(config('adminlte.usermenu_enabled'))
                @include('adminlte::partials.navbar.dropdown-user-menu')
            @else
                @include('adminlte::partials.navbar.logout-link')
            @endif
        @endif

        {{-- Right sidebar toggler link --}}
        @if(config('adminlte.right_sidebar'))
            @include('adminlte::partials.navbar.right-sidebar-link')
        @endif
    </ul>

</nav>

Also, this is the current structure of the resources/views folder:

├── login.blade.php
├── master.blade.php
├── page.blade.php
├── partials
│   ├── common
│   │   ├── brand-logo-xl.blade.php
│   │   └── brand-logo-xs.blade.php
│   ├── footer
│   │   └── footer.blade.php
│   ├── menu-item.blade.php
│   ├── menu-item-sub-top-nav.blade.php
│   ├── menu-item-top-nav.blade.php
│   ├── menu-item-top-nav-left.blade.php
│   ├── menu-item-top-nav-right.blade.php
│   ├── menu-item-top-nav-user.blade.php
│   ├── navbar
│   │   ├── dropdown-user-menu.blade.php
│   │   ├── left-sidebar-link.blade.php
│   │   ├── logout-link.blade.php
│   │   ├── navbar.blade.php
│   │   ├── navbar-layout-topnav.blade.php
│   │   └── right-sidebar-link.blade.php
│   └── sidebar
│       ├── left-sidebar.blade.php
│       └── right-sidebar.blade.php
├── passwords
│   ├── confirm.blade.php
│   ├── email.blade.php
│   └── reset.blade.php
├── plugins.blade.php
├── register.blade.php
└── verify.blade.php

So, the question is if you are interested on these changes. In the case you are interested, I can open a pull request for it. Thanks!

[machadoug]

+1
More views are easier to override in case other developers need to customize it.

[andcarpi]

Think its a good thing and in my perspective, its easier to maintain.

[REJack]

I would say the same like @andcarpi, it's a good idea and easier to maintain for further changes/adds.

[Shidersz]

Thanks for the feedback, I'm going to submit a PR for this changes later.