AdminLTEのサイドメニューを画面サイズによって表示を切り替える

laravel

こんにちは、せぃゆーです。

昨日Laravel6にAdminLTEを導入したので、今日は画面サイズによってメニューの表示非表示が変わるようにします。

スポンサーリンク

目的

管理画面を作っているとPCでは表示させたいがスマホでは表示させたくないなどの項目ってあると思います。

スマホからのアクセス時はCSV出力系の処理はさせたくないなど

そんなときに画面サイズによってメニューを非表示します。

実装

実装方法はjeroennoten/Laravel-AdminLTEのwikiに書いてあるので、これを参考にしています。

Menu Configuration · jeroennoten/Laravel-AdminLTE Wiki
Easy AdminLTE integration with Laravel. Contribute to jeroennoten/Laravel-AdminLTE development by creating an account on GitHub.

Laravel6のAdminLTEでは./config/adminlte.phpに設定を書きます。

その中でも左メニューはadminlte.phpの中のmenuで管理します。

// サンプル
'menu' => [
        // 省略
        [
            'text' => 'profile',
            'url'  => 'admin/settings',
            'icon' => 'fas fa-fw fa-user',

        ],
        // 省略

上記のように配列で定義されています。

この各配列に要素を追加することで、左メニューにクラスをつけることができます。

クラスを追加する場合にはclassesという要素を追加します。

// サンプル
'menu' => [
        // 省略
        [
            'text' => 'profile',
            'url'  => 'admin/settings',
            'icon' => 'fas fa-fw fa-user',
            'classes' => 'ここにクラスを書きます',
        ],
        // 省略

適応したいクラスが複数ある場合にはスペース区切りで複数記載することで、複数のクラスを追記することが可能です。

ここでは実際にprofileの設定にd-none d-sm-blockを追加したいと思います。

クラスの内容はsm(タブレットサイズ)以上で表示、それ以外では非表示というものです。

// サンプル
'menu' => [
        // 省略
        [
            'text' => 'profile',
            'url'  => 'admin/settings',
            'icon' => 'fas fa-fw fa-user',
            'classes' => 'd-none d-sm-block',
        ],
        // 省略

実際に確認してみましょう

左メニューのprofileを確認しましょう

画面サイズによって表示非表示が切り替わってますね

管理画面は一つにしたいけど、画面サイズで実行できる処理を変更したいなんて時には役に立つのではないでしょうか。

まとめ

どうでしょう?意外とこういった実装することがあるのではないでしょうか。

個人的にはよく実装するのでメモがてら残してみました。

Laravel6のAdminLTEではデフォルトでヘッダーメニュー、サイドメニュー、フッターがスクロール対象になっているので、次はそれぞれスクロールの対象にならないのうな設定を書きたいと思います。

おすすめ書籍

コメント