Adminlte Laravel Package

Getting Started

Minimal Setup

1. Install via Composer

   composer require almasaeed2010/adminlte
   

   • The package provides a Laravel service provider (AdminLTEServiceProvider) and facades (AdminLTE) for easy integration.

2. Publish Assets (Optional but Recommended)

   php artisan vendor:publish --provider="Almasaeed2010\AdminLte\AdminLTEServiceProvider" --tag=public
   php artisan vendor:publish --provider="Almasaeed2010\AdminLte\AdminLTEServiceProvider" --tag=views
   

   • Publishes Bootstrap 5 + AdminLTE CSS/JS to public/vendor/adminlte/ and Blade templates to resources/views/vendor/adminlte/.

3. Basic Blade Integration

   @extends('adminlte::page')
   
   @section('title', 'Dashboard')
   @section('content_header')
       <h1>Dashboard</h1>
   @stop
   
   @section('content')
       <p>Welcome to AdminLTE!</p>
   @stop
   

   • Extends the default AdminLTE layout with sections for title, content_header, content, etc.

4. Load AdminLTE in Your Layout In resources/views/layouts/app.blade.php:

   @include('adminlte::partials.head-top')
   @include('adminlte::partials.head')
   @include('adminlte::partials.navbar')
   @include('adminlte::partials.sidebar')
   @include('adminlte::partials.content-wrapper')
   @include('adminlte::partials.footer')
   @include('adminlte::partials.control-sidebar')
   @include('adminlte::partials.footer-scripts')
   

Implementation Patterns

1. Dynamic Layout Customization

• Override Default Sections

  @section('adminlte_css')
      <link rel="stylesheet" href="/custom.css">
  @stop
  
  @section('adminlte_js')
      <script src="/custom.js"></script>
  @stop
  

• Conditional Sidebars

  @section('adminlte-sidebar')
      @include('adminlte::partials.sidebar', ['active' => 'dashboard'])
  @stop
  

2. Widgets & Boxes

• Predefined Boxes

  @include('adminlte::widgets.box', [
      'title' => 'Quick Stats',
      'body' => '<p>Box content here.</p>',
      'type' => 'info', // primary, success, warning, danger, etc.
  ])
  

• Custom Widgets Extend AdminLTE\Widgets\Box or use raw Bootstrap 5 components.

3. Navigation & Menus

• Dynamic Sidebar Menu

  @include('adminlte::partials.sidebar', [
      'items' => [
          ['url' => '/dashboard', 'text' => 'Dashboard', 'icon' => 'fas fa-tachometer-alt'],
          ['url' => '/users', 'text' => 'Users', 'icon' => 'fas fa-users'],
      ],
  ])
  

• Dropdown Menus

  @include('adminlte::partials.sidebar-item-dropdown', [
      'text' => 'Reports',
      'items' => [
          ['url' => '/reports/sales', 'text' => 'Sales'],
          ['url' => '/reports/analytics', 'text' => 'Analytics'],
      ],
  ])
  

4. Modals & Alerts

• Bootstrap 5 Modals

  @include('adminlte::modal', [
      'id' => 'exampleModal',
      'title' => 'Modal Title',
      'body' => '<p>Modal content here.</p>',
      'footer' => '<button class="btn btn-primary">OK</button>',
  ])
  

• Alerts

  @include('adminlte::alert', [
      'type' => 'success',
      'message' => 'Operation completed!',
  ])
  

5. Integration with Laravel Auth

• Extend Auth Views Modify resources/views/auth/login.blade.php to use AdminLTE’s login template:

  @extends('adminlte::auth.login')
  
  @section('login_title', 'Admin Login')
  

6. Theming & Skins

• Change AdminLTE Skin

  @include('adminlte::partials.head-top', ['skin' => 'blue'])
  

  • Available skins: blue, black, purple, yellow, green, red, gray.

Gotchas and Tips

Common Pitfalls

1. Asset Paths

   • If publishing fails, manually copy assets from vendor/almasaeed2010/adminlte/dist/ to public/vendor/adminlte/.
   • Ensure public/ is writable.

2. Blade Section Conflicts

   • Avoid naming custom sections the same as AdminLTE’s reserved sections (e.g., title, content).

3. JQuery Dependency

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

     <script src="https://code.jquery.com/jquery-3.6.min.js"></script>
     @include('adminlte::partials.head-scripts')
     

4. Sidebar Collapse Issues

   • If the sidebar doesn’t collapse, check for conflicting JS or missing data-widget="push" in the sidebar.

Debugging Tips

• Inspect Network Requests Use browser dev tools to verify AdminLTE CSS/JS loads correctly.
• Clear Cache

  php artisan view:clear
  php artisan cache:clear
  

• Check for Overrides If styles break, search for !important in custom CSS or conflicting Bootstrap versions.

Extension Points

1. Custom Templates Override any published Blade file (e.g., resources/views/vendor/adminlte/partials/sidebar.blade.php).

2. Dynamic Configuration Use the AdminLTE facade to modify settings:

   AdminLTE::setSkin('purple');
   AdminLTE::setLayout('topnav'); // Alternative layouts: 'sidebar-mini', 'layout-boxed'
   

3. Plugin Integration AdminLTE supports DataTables, Chart.js, etc. Load plugins via:

   @section('adminlte_js')
       <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
   @stop
   

4. Dark Mode Enable via:

   @include('adminlte::partials.head-top', ['dark_mode' => true])
   

Performance Optimizations

• Lazy-Load Non-Critical JS Defer AdminLTE JS if not needed immediately:

  <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}" defer></script>
  

• Combine Assets Use Laravel Mix to bundle AdminLTE with your app’s JS/CSS.

Advanced: Custom AdminLTE Build

• Sass Integration Compile AdminLTE’s SCSS from vendor/almasaeed2010/adminlte/scss/ into your project’s assets.

• Webpack Aliases For local development, alias AdminLTE paths in webpack.mix.js:

  mix.webpackConfig({
      resolve: {
          alias: {
              'adminlte': path.resolve(__dirname, 'vendor/almasaeed2010/adminlte'),
          },
      },
  });