renderbit/light-bootstrap-dashboard

Light Bootstrap Dashboard

Light Bootstrap Dashboard by Creative Tim, packaged as Blade layouts, partials and components for Laravel 5.7 to 12.

Version Matrix

Install

Via Composer:

composer require renderbit/light-bootstrap-dashboard

The service provider (RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider) is registered through Laravel package auto-discovery. The package also pulls in lavary/laravel-menu, which the sidebar, header and footer menus are built with.

Publish

The CSS, JS, fonts and images have to be published to public/vendor/lbd before the layouts render correctly:

php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=public

Optionally, publish the config files and the views:

# config/lbd.php and config/sidebar-menu.php
php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=config

# resources/views/vendor/lbd
php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=views

Published views in resources/views/vendor/lbd take precedence over the package's own, so you can edit any layout or partial there.

Re-run the --tag=public command (with --force) after upgrading the package to pick up new assets.

Configuration

config/lbd.php

The footer copyright line uses your app's app.name and app.url, and the page <title> is @yield('title') | {{ config('app.name') }}.

config/sidebar-menu.php

Its keys are lavary/laravel-menu settings per menu name, and they are layered over laravel-menu.settings when the package boots, so a published copy takes effect. By default it only sets activate_parents to false for sidebar_main_menu. See the lavary/laravel-menu configuration docs for the available settings.

Demo pages

To browse every page of the theme, set LOAD_LBD_DEMO=true in .env and visit /lbd/dashboard. The demo routes are named lbd.* (for example lbd.dashboard, lbd.components.buttons, lbd.pages.login); run php artisan route:list --name=lbd to see them all. The demo views (lbd::dashboard, lbd::charts, lbd::login, ...) are good references for the markup each component needs.

Usage

Layouts

There are two layouts:

• lbd::layout: the dashboard layout, with sidebar, top navbar and footer.
• lbd::layout-full: a full-page layout without the sidebar, used for login, register and lock screen pages.

@extends('lbd::layout')

@section('title', 'Orders')

@push('styles')
    <link href="{{ asset('css/orders.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            // jQuery, Popper and Bootstrap are loaded at this point
        });
    </script>
@endpush

Sections and stacks available in both layouts:

lbd::layout-full also yields:

@extends('lbd::layout-full')

@section('title', 'Login')
@section('background_color', 'black')
@section('background_image', asset('vendor/lbd/img/full-screen-image-2.jpg'))

@section('content')
    ...
@endsection

Use @push, not @section, for styles and scripts

inc/head and inc/scripts wrap the theme's CSS and JS in @section('styles') ... @show and @section('scripts') ... @show. If a page defines @section('scripts') (or @section('styles')) itself, it replaces that whole block, which removes jQuery, Popper, Bootstrap and the theme JS (or CSS). Use @push('scripts') / @push('styles') to add to the page instead.

If you do need to override the section, call @parent to keep the theme's assets:

@section('scripts')
    @parent
    <script src="{{ asset('js/extra.js') }}"></script>
@endsection

Theme plugins

The layouts only load jQuery, Popper, Bootstrap and light-bootstrap-dashboard.js (plus the Google Maps script when lbd.google_maps_api_key is set). Push the plugins a page uses onto the scripts stack, before the code that uses them:

@push('scripts')
    <script src="{{ asset('vendor/lbd/js/plugins/chartist.min.js') }}"></script>
    <script>
        $(function () {
            new Chartist.Line('#chart', { labels: ['Mon', 'Tue'], series: [[5, 3]] });
        });
    </script>
@endpush

The bundled plugins are in public/vendor/lbd/js/plugins after publishing: bootstrap-datetimepicker.js, bootstrap-notify.js, bootstrap-selectpicker.js, bootstrap-switch.js, bootstrap-table.js, chartist.min.js, fullcalendar.min.js, jquery-jvectormap.js, jquery.bootstrap-wizard.js, jquery.dataTables.min.js, jquery.validate.min.js, moment.min.js, nouislider.js, sweetalert2.min.js and tom-select.complete.min.js (Tom Select also needs vendor/lbd/css/tom-select.bootstrap4.min.css, pushed onto styles). The demo views (src/resources/views/*.blade.php) show which files each page needs.

Layout chrome

The sidebar user block and the navbar menus are empty by default. Fill them from your own views:

@extends('lbd::layout')

@section('sidebar-user')
<div class="user">
    <div class="info">
        <a href="{{ route('profile') }}"><span>{{ auth()->user()->name }}</span></a>
    </div>
</div>
@endsection

@push('navbar-right')
<li class="nav-item">
    <a class="nav-link" href="{{ route('logout') }}">Log out</a>
</li>
@endpush

• sidebar-user (section): the user block below the sidebar logo (lbd::layout).
• navbar-left / navbar-right (stacks): <li> items rendered in the left and right navbar lists (lbd::layout).
• navbar-full (stack): <li> items rendered in the navbar of lbd::layout-full (used by the login, register and lock screen pages).
• lbd.sidebar_color and lbd.sidebar_image config keys set the sidebar colour and background image.
• lbd.home_url config key (LBD_HOME_URL) sets where the sidebar logo and navbar brand link; it defaults to the demo dashboard when demo content is enabled and to url('/') otherwise.

The template's placeholder user, search form, dropdowns and notifications are only shown when lbd.load_demo_content is enabled.

Components

lbd::inc.box

A card with an optional header and footer.

@component('lbd::inc.box')
    @slot('title', 'Email Statistics')
    @slot('subtitle', 'Last Campaign Performance')

    @slot('body')
        <div id="chartEmail" class="ct-chart"></div>
    @endslot

    @slot('footer')
        <div class="stats"><i class="fa fa-clock-o"></i> Campaign sent 2 days ago</div>
    @endslot
@endcomponent

lbd::inc.card

A stats card with an icon, a number and a footer line.

@component('lbd::inc.card')
    @slot('title', '$ 1,345')
    @slot('category', 'Revenue')
    @slot('icon', 'nc-icon nc-light-3 text-success')
    @slot('footer_icon', 'fa fa-calendar-o')
    @slot('footer', 'Last day')
@endcomponent

Menus

The layouts render menus built with lavary/laravel-menu. Each menu is only rendered if it exists, so define the ones you need:

Define them before the view renders, for example in a middleware applied to your dashboard routes:

<?php

namespace App\Http\Middleware;

use Closure;
use Lavary\Menu\Facade as Menu;

class BuildDashboardMenus
{
    public function handle($request, Closure $next)
    {
        Menu::make('sidebar_main_menu', function ($menu) {
            $menu->add('Dashboard', ['route' => 'dashboard'])
                ->before('<i class="nc-icon nc-chart-pie-35"></i>');

            // A parent item needs an "#id" href: it is used as the id of the collapsible group.
            $orders = $menu->add('Orders')->before('<i class="nc-icon nc-cart-simple"></i>');
            $orders->link->href('#ordersMenu');

            $orders->add('<span class="sidebar-normal">All orders</span>', ['route' => 'orders.index'])
                ->before('<span class="sidebar-mini">AO</span>');
            $orders->add('<span class="sidebar-normal">New order</span>', ['route' => 'orders.create'])
                ->before('<span class="sidebar-mini">NO</span>');
        });

        Menu::make('sidebar_user_menu', function ($menu) {
            $menu->add('')
                ->prepend('<span class="sidebar-mini">MP</span>')
                ->append('<span class="sidebar-normal">My Profile</span>')
                ->link->href(route('profile'));
        });

        return $next($request);
    }
}

Outside demo mode the layout doesn't render sidebar_user_menu for you. Output it from your sidebar-user section:

@section('sidebar-user')
<div class="user">
    <div class="info">
        <a data-toggle="collapse" href="#userMenu" class="collapsed">
            <span>{{ auth()->user()->name }} <b class="caret"></b></span>
        </a>
        <div class="collapse" id="userMenu">
            {!! Menu::get('sidebar_user_menu')->asUl(['class' => 'nav']) !!}
        </div>
    </div>
</div>
@endsection

The demo menus in src/Controllers/LightBootstrapDashboardController.php (setupMenus()) show more complete examples.

Change log

Please see CHANGELOG for more information on what has changed recently.

Testing

The test suite runs against the package with Orchestra Testbench.

composer test         # run the PHPUnit suite
composer check-style  # check the sources against PSR-2
composer fix-style    # fix what can be fixed automatically

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Security

If you discover any security related issues, please email contact@renderbit.com instead of using the issue tracker.

Credits

• Creative Tim for the Light Bootstrap Dashboard theme
• Renderbit Technologies
• All Contributors

License

The MIT License (MIT). Please see License File for more information.