Laravel Adminlte Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require jeroennoten/laravel-adminlte
   

   Publish the package assets and config:

   php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\AdminLteServiceProvider" --tag=config
   php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\AdminLteServiceProvider" --tag=assets
   

2. Basic Blade Integration Extend your app.blade.php (or root layout) with the AdminLTE template:

   @extends('adminlte::page')
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   @section('content')
       <p>Welcome to your AdminLTE dashboard!</p>
   @stop
   @section('css')
       <!-- Add custom CSS here -->
   @stop
   @section('js')
       <!-- Add custom JS here -->
   @stop
   

3. First Use Case: Quick Dashboard Create a dashboard.blade.php in resources/views/:

   @extends('adminlte::page')
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   @section('content')
       <div class="row">
           <div class="col-md-3 col-sm-6 col-12">
               <div class="info-box">
                   <span class="info-box-icon bg-aqua"><i class="fas fa-users"></i></span>
                   <div class="info-box-content">
                       <span class="info-box-text">Users</span>
                       <span class="info-box-number">1,324</span>
                   </div>
               </div>
           </div>
       </div>
   @stop
   

Implementation Patterns

Core Workflows

1. Layout Customization Override AdminLTE sections in your blade templates:

   @section('adminlte_css_pre', '<link rel="stylesheet" href="/custom.css">')
   @section('adminlte_js_post', '<script src="/custom.js"></script>')
   

2. Sidebar Navigation Dynamically generate the sidebar using the adminlte helper:

   // In a controller or service
   $menu = [
       ['text' => 'Dashboard', 'url' => '/dashboard', 'icon' => 'fas fa-tachometer-alt'],
       ['text' => 'Users', 'url' => '/users', 'icon' => 'fas fa-users', 'submenu' => [
           ['text' => 'List', 'url' => '/users/list'],
           ['text' => 'Create', 'url' => '/users/create'],
       ]],
   ];
   return view('dashboard', compact('menu'));
   

   Render in blade:

   @section('adminlte_sidebar')
       @include('adminlte::sidebar', ['menu' => $menu])
   @stop
   

3. Box Components Reuse AdminLTE's box components:

   @include('adminlte::box.box', [
       'title' => 'Quick Example Box',
       'body' => '<p>This is a box body.</p>',
       'type' => 'info',
       'showBorder' => true,
   ])
   

4. Authentication Integration Use the auth middleware and extend the login template:

   @extends('adminlte::auth.login')
   @section('login_title', 'Admin Panel Login')
   @section('login_username', 'admin@example.com')
   

Integration Tips

• Asset Management: Use Laravel Mix/Vite to compile custom CSS/JS alongside AdminLTE assets.
• Dynamic Themes: Toggle themes via config:

  config(['adminlte.theme' => 'blue']);
  

• Multi-Language: Leverage AdminLTE's i18n support by extending the language files in resources/lang/.

Gotchas and Tips

Common Pitfalls

1. Asset Paths

   • Ensure public_path() is correctly configured in config/adminlte.php if using custom paths.
   • Clear cached views after publishing assets:

     php artisan view:clear
     

2. Sidebar Collapse

   • The sidebar collapses by default on mobile. To disable:

     @section('adminlte_sidebar')
         @include('adminlte::sidebar', ['menu' => $menu, 'collapse' => false])
     @stop
     

3. Box Collapse

   • Boxes collapse by default. To disable:

     @include('adminlte::box.box', ['collapsible' => false])
     

4. JQuery Dependency

   • AdminLTE relies on jQuery. Ensure it’s loaded before AdminLTE JS:

     @section('adminlte_js_pre')
         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     @stop
     

Debugging

• Console Errors: Check for missing assets or JS errors in browser console. Verify paths in config/adminlte.php.
• Blade Debugging: Use @dump($menu) to inspect dynamic sidebar data.
• Cache Issues: Run php artisan config:clear and php artisan view:clear if changes aren’t reflecting.

Extension Points

1. Custom Components Extend the package by creating new blade templates in resources/views/vendor/adminlte/ (e.g., box.custom.blade.php).

2. Hooks Use sections like @section('adminlte_title_before') to inject content before/after default elements.

3. Configuration Override defaults in config/adminlte.php:

   'title' => 'MyApp Admin',
   'logo' => '<b>MyApp</b>',
   'skin' => 'skin-blue',
   'menu' => [], // Global menu items
   

4. Authentication Extend the AuthenticatesUsers trait in your LoginController to customize login logic while using AdminLTE’s auth views.

5. RTL Support Enable right-to-left layout:

   config(['adminlte.rtl' => true]);