最近Laravelはじめました。
Laravelにはデフォでユーザ管理機能が存在しますが、そのログイン後の画面はコンテンツエリアのみのレイアウトとなってます。これをよくある固定左メニュー+コンテンツエリアのレイアウトにしてみます。
0. 管理機能の有効化
ver5系ではphp artisan make:auth
コマンドでユーザ管理機能がセットアップできたのですが、6系の場合は以下のリンク等を参考にセットアップしてください。
Laravel 6系でmake:authを使う方法
Laravel6 備忘録 −ユーザー認証(Auth)−
うまくセットアップできれば、/resources/views
下に以下のファイルが生成されているはずです。
home.blade.php
今回は認証後の最初のビューであるこれを元に話をすすめます。
1. home.blade.phpから左メニューの元ネタをコピー
<div class="col-md-12">から閉じの</div>までをコピーします。
/resources/views/home.blade.php
<divclass="container"><divclass="row justify-content-center"><divclass="col-md-12"><divclass="card">
// 略
2. menu.blade.phpを新規作成
1でコピッたソースを貼り付けて、col-md-12
をcol-md-2
に変更してお好みに応じてカスタマイズします。
/resources/views/menu.blade.php
<divclass="col-md-2"><divclass="card"><divclass="card-header"><iclass="fas fa-th-list"></i></i> MENU</div><divclass="card-body"><divclass="panel panel-default"><ulclass="nav nav-pills nav-stacked"style="display:block;"><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li></ul></div></div></div></div>
3. home.blade.phpを修正
col-md-12
をcol-md-10
に変更して、その直前の行に@include('menu')
を。
menu.blade.php
<divclass="container"><divclass="row justify-content-center"><!-- left menu -->
@include('menu')
<divclass="col-md-10"><divclass="card">
// 略
ちなみに今回はこんなCSSをあててみました。
.col-md-2.card-body{padding:0;}.col-md-2ul{padding:0;position:relative;}.col-md-2ulli{line-height:1.8;padding:0.5em0.5em0.5em0.7em;list-style-type:none!important;background:-webkit-linear-gradient(top,#whitesmoke0%,whitesmoke100%);background:linear-gradient(tobottom,whitesmoke0%,#dadada100%);text-shadow:1px1px1pxwhitesmoke;color:black;}
以上、LaravelというようりBootstrapのグリッドシステムを利用した小ネタでした。今回は2:10でメニューとコンテンツエリアを分割しましたが、12(グリッドの個数は最大12)の範囲内で3分割なども可能です。