sandulat / laravel-dashboard-template
Basic Laravel Dashboard Template
Requires
- php: ^7.1
- illuminate/support: 5.8.*
- laravel/framework: ~5.8.0|~5.9.0
Requires (Dev)
- orchestra/testbench: 3.8.*
- phpunit/phpunit: ^7.0
- dev-master
- v0.1
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/qs-and-express-6.11.0
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-and-webpack-cli-1.4.2
- dev-dependabot/npm_and_yarn/eventsource-1.1.1
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/ajv-6.12.6
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/browserslist-4.16.6
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/ssri-6.0.2
- dev-dependabot/npm_and_yarn/y18n-4.0.1
- dev-dependabot/npm_and_yarn/elliptic-6.5.4
- dev-dependabot/npm_and_yarn/ini-1.3.7
- dev-dependabot/npm_and_yarn/http-proxy-1.18.1
- dev-dependabot/npm_and_yarn/websocket-extensions-0.1.4
- dev-dependabot/npm_and_yarn/acorn-6.4.1
- dev-analysis-XZVdD6
This package is auto-updated.
Last update: 2024-04-04 07:20:28 UTC
README
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 forlaravel-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 ofmix()
.
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.