今回は、管理画面のデザインを簡単に作るために管理画面用のデザインテンプレートライブラリを導入する方法を紹介します。
AdminLTEの導入
① composerを用いてadminlteパッケージを追加する。
$sail composer require jeroennoten/laravel-adminlte②adminlteをインストールする。
$sail php artisan adminlte:installAdminLTEの設定
①config/adminlte.php が追加されるので、ファイルを開いて下記の設定箇所を変更する。
config/adminlte.php
- 'title' => 'AdminLTE 3',
+ 'title' => '簡易予約アプリ',
'title_prefix' => '',
- 'title_postfix' => '',
+ 'title_postfix' => '/簡易予約アプリ',
/*
中略
*/
- 'logo' => '<b>Admin</b>LTE',
- 'logo_img' => 'vendor/adminlte/dist/img/AdminLTELogo.png',
- 'logo_img_class' => 'brand-image img-circle elevation-3',
+ 'logo' => '<b>簡易予約アプリ</b>',
+ 'logo_img' => null,
+ 'logo_img_class' => null,
'logo_img_xl' => null,
- 'logo_img_xl_class' => 'brand-image-xs',
- 'logo_img_alt' => 'Admin Logo',
+ 'logo_img_xl_class' => null,
+ 'logo_img_alt' => null,
/*
中略
*/
'preloader' => [
- 'enabled' => true,
+ 'enabled' => false,
'img' => [
'path' => 'vendor/adminlte/dist/img/AdminLTELogo.png',
'alt' => 'AdminLTE Preloader Image',
/*
中略
*/
'use_route_url' => false,
- 'dashboard_url' => 'home',
- 'logout_url' => 'logout',
- 'login_url' => 'login',
- 'register_url' => 'register',
- 'password_reset_url' => 'password/reset',
- 'password_email_url' => 'password/email',
- 'profile_url' => false,
+ 'dashboard_url' => 'admin/dashboard',
+ 'logout_url' => 'admin/logout',
+ 'login_url' => 'admin/login',
+ 'register_url' => 'admin/register',
+ 'password_reset_url' => 'admin/password/reset',
+ 'password_email_url' => 'admin/password/email',
+ 'profile_url' => 'admin/profile',
/*
中略
*/
'menu' => [
// Navbar items:
- [
- 'type' => 'navbar-search',
- 'text' => 'search',
- 'topnav_right' => true,
- ],
+ // [
+ // 'type' => 'navbar-search',
+ // 'text' => 'search',
+ // 'topnav_right' => true,
+ // ],
[
'type' => 'fullscreen-widget',
'topnav_right' => true,
],
// Sidebar items:
+ ['header' => '管理'],
[
- 'type' => 'sidebar-menu-search',
- 'text' => 'search',
- ],
- [
- 'text' => 'blog',
- 'url' => 'admin/blog',
- 'can' => 'manage-blog',
+ 'text' => 'スケジュール',
+ 'route' => 'admin.schedule.index',
+ 'icon' => 'fas fa-fw fa-calendar',
+ 'active' => ['admin/schedule/*'],
],
[
- 'text' => 'pages',
- 'url' => 'admin/pages',
- 'icon' => 'far fa-fw fa-file',
- 'label' => 4,
- 'label_color' => 'success',
+ 'text' => '予約',
+ //'route' => 'admin.reserve.index',
+ 'url' => 'admin/reserve',
+ 'icon' => 'fas fa-fw fa-clock',
+ 'active' => ['admin/reserve/*'],
],
- ['header' => 'account_settings'],
[
- 'text' => 'profile',
- 'url' => 'admin/settings',
+ 'text' => 'ユーザー',
+ 'route' => 'admin.user.index',
'icon' => 'fas fa-fw fa-user',
- ],
- [
- 'text' => 'change_password',
- 'url' => 'admin/settings',
- 'icon' => 'fas fa-fw fa-lock',
- ],
- [
- 'text' => 'multilevel',
- 'icon' => 'fas fa-fw fa-share',
- 'submenu' => [
- [
- 'text' => 'level_one',
- 'url' => '#',
- ],
- [
- 'text' => 'level_one',
- 'url' => '#',
- 'submenu' => [
- [
- 'text' => 'level_two',
- 'url' => '#',
- ],
- [
- 'text' => 'level_two',
- 'url' => '#',
- 'submenu' => [
- [
- 'text' => 'level_three',
- 'url' => '#',
- ],
- [
- 'text' => 'level_three',
- 'url' => '#',
- ],
- ],
- ],
- ],
- ],
- [
- 'text' => 'level_one',
- 'url' => '#',
- ],
- ],
- ],
- ['header' => 'labels'],
- [
- 'text' => 'important',
- 'icon_color' => 'red',
- 'url' => '#',
- ],
- [
- 'text' => 'warning',
- 'icon_color' => 'yellow',
- 'url' => '#',
- ],
- [
- 'text' => 'information',
- 'icon_color' => 'cyan',
- 'url' => '#',
+ 'active' => ['admin/user/*'],
],
],