Skip to content
Basic Laravel Dashboard Template as a Package.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
resources Added logout button id. Jul 12, 2019
src Apply fixes from StyleCI Jul 12, 2019
stubs Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019
tests Project Init Jul 10, 2019
.editorconfig Project Init Jul 10, 2019
.gitattributes Project Init Jul 10, 2019
.gitignore Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019
.styleci.yml Project Init Jul 10, 2019
.travis.yml
LICENSE.md Project Init Jul 10, 2019
README.md Documented logout button customisation. Jul 12, 2019
composer.json Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019
package-lock.json Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019
package.json
phpunit.xml.dist Project Init Jul 10, 2019
tailwind.config.js Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019
webpack.mix.js Implemented sidebar, topbar, profile dropdown, customizable recursive… Jul 12, 2019

README.md

Laravel Dashboard Template

💫Basic Dashboard Template as a Package.💫

Note: Not suitable for single page applications as it's built in Blade, however you can use Vue/React/etc. components on all pages.

Installation

composer require sandulat/laravel-dashboard-template
php artisan laravel-dashboard-template:install

Note: to re-publish the front-end assets when updating the package use: php artisan laravel-dashboard-template:publish

The install command will publish the front-end assets and will create a new service provider App\Providers\DashboardServiceProvider. This is basically the main config of the template, but first let's see how to display the dashboard in the next section.

Layout

Create a route and a controller that will return a view. Inside the view place the following code:

my_view.blade.php:

@extends('laravel-dashboard-template::page')

@section('ldt-content')
    Some content
@endsection

Note: ldt stands for laravel-dashboard-template.

As you can see laravel-dashboard-template::page is just a layout. Besides ldt-content the layout provides more additional slots:

  • ldt-head - Head section for CSS, meta, etc.
  • ldt-scripts - Scripts section to include JS files.
  • ldt-topbar-left - Left section of topbar.
  • ldt-topbar-right - Right section of topbar, next to profile dropdown.
  • ldt-sidebar-footer - Footer section of sidebar.

To avoid duplication of these slots, it would be better to create your own layout that will extend the package's layout.

my_layout.blade.php:

@extends('laravel-dashboard-template::page')

@section('ldt-topbar-right')
    Language Select
@endsection

So now in your views you can do:

my_view.blade.php:

@extends('my_layout')

@section('ldt-content')
    Some content
@endsection

Card

Besides layout, the package provides a card component:

@component('laravel-dashboard-template::components.card')
    @slot('title')
        Dahboard
    @endslot

    Content
@endcomponent

The result can be seen in the screenshot at the top of the documentation.

Alerts

Out of the box the package will display 2 types of alerts above the content section of the layout. They will be displayed when you redirect with success and error flash data:

return back()->with('success', 'My success message.');
return back()->with('error', 'My error message.');

Configuration

You can configure the dashboard inside the installed provider: App\Providers\DashboardServiceProvider. By default it's empty because everything is already configured so you can start building instantly, however you can add the following methods to start customizing the dashboard:

/**
 * Topbar user name resolver.
 *
 * @return string
 */
public function userName(): string
{
    return Auth::check() ? Auth::user()->name : 'Guest';
}
/**
 * Topbar user avatar resolver.
 *
 * @return string
 */
public function userAvatar(): string
{
    if (Auth::check() && Auth::user()->avatar) {
        return Auth::user()->avatar;
    }

    return URL::asset('/vendor/laravel-dashboard-template/images/avatar.svg')
}
/**
 * Sidebar links.
 *
 * @return array
 */
public function sidebarLinks(): array
{
    return [
        'Menu' => [
            [
                'label' => 'Users',
                'url' => route('users'),
                'children' => [
                    [
                        'label' => 'Active Users',
                        'url' => route('users.active'),
                    ],
                ],
            ],
        ],
    ];
}
/**
 * Profile dropdown links.
 *
 * @return array
 */
public function profileDropdownLinks(): array
{
    return [
        [
            'label' => 'Edit Profile',
            'url' => route('profile'),
        ],
    ];
}
/**
 * Logout the user.
 *
 * @param \Illuminate\Http\Request $request
 * @return void
 */
public function logout(Request $request): void
{
    Auth::guard()->logout();

    $request->session()->invalidate();
}
/**
 * Action to be performed after logout.
 *
 * @return void
 */
public function loggedOut(): void
{
    //
}
/**
 * Redirect after logout.
 *
 * @return \Illuminate\Http\RedirectResponse
 */
public function logoutRedirect(): RedirectResponse
{
    return redirect('/');
}

Note: Each method from this service provider has dependency injection available.

Customization

I've tried to split the template into as many components & partials as possible. Just create inside your project the folder: resources/views/vendor/laravel-dashboard-template and now you can copy the files from the package and customize them. Here is the list:

  • partials/alert.blade.php
  • partials/alert_error.blade.php
  • partials/alert_success.blade.php
  • partials/sidebar.blade.php
  • partials/sidebar_link.blade.php
  • partials/sidebar_logo.blade.php
  • partials/topbar_profile_dropdown.blade.php

  • components/card.blade.php
  • components/dropdown.blade.php
  • components/dropdown_item.blade.php
  • components/topbar.blade.php

Using Vue/React/etc. components

The main div that wraps the dashboard has an app id. You can load your front-end framework onto this id and start using your components on all pages.

// Vue
new Vue({
    el: '#app',
});

//React
ReactDOM.render(<App />, document.getElementById('app'));

After you'll compile your front-end assets you can include them like this:

@section('ldt-head')
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
@endsection
@section('ldt-scripts')
    <script src="{{ mix('/js/app.js') }}"></script>
@endsection

Note: If you don't have front-end assets versioning you might want to use the asset() method instead of mix().

Custom Logout Button

You can hide the default logout button by applying display: none; onto id #ldt-logout-button. The template already provides a logout system with customizable callbacks, so you can make use of it. Just submit the default "hidden" logout form with Javascript:

document.getElementById("ldt-logout-form").submit();

Credits

Created by Stratulat Alexandru.

You can’t perform that action at this time.