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

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

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

目的
実装
まとめ

目的

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

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

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

実装

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

Menu Configuration

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を確認しましょう