Laravel-admin 侧边栏折叠需修改 layout.blade.php 添加 sidebar ID 和状态类、注入折叠按钮及 JS 切换逻辑、补充 AdminLTE 兼容 CSS 样式,并可选通过 localStorage 持久化状态。

要让 Laravel-admin 的侧边栏支持折叠功能,核心在于修改前端布局模板和引入对应的 JavaScript 逻辑,Laravel-admin 默认不提供侧边栏折叠(收起/展开)的开关,需手动增强。
修改 layout.blade.php 启用折叠容器
打开 resources/views/vendor/laravel-admin/layout.blade.php,找到侧边栏外层容器(通常是 <div class="sidebar"> 或类似结构),为其添加固定类名与折叠状态标识,例如:
- 给 sidebar 容器增加
id="sidebar"和初始类sidebar-collapsed(表示默认折叠)或sidebar-expanded(默认展开) - 在 body 标签上添加对应状态类,如
<body class="sidebar-mini sidebar-collapse">(兼容 AdminLTE 风格) - 确保外层 wrapper(如
<div class="wrapper">)能响应 sidebar 宽度变化,建议加上class="hold-transition sidebar-mini"
注入折叠按钮与 JS 控制逻辑
在 layout.blade.php 的顶部导航栏区域(如 <nav class="main-header"> 内),插入一个折叠/展开按钮:
- 添加按钮 HTML:
<a href="#" id="sidebar-toggle" class="nav-link"><i class="fas fa-bars"></i></a> - 在页面底部或单独 JS 文件中加入控制脚本,监听点击并切换 sidebar 类名与 body 状态,例如:
document.getElementById('sidebar-toggle').addEventListener('click', function(e) {<br> e.preventDefault();<br> const sidebar = document.getElementById('sidebar');<br> const body = document.body;<br> if (sidebar.classList.contains('sidebar-collapsed')) {<br> sidebar.classList.remove('sidebar-collapsed');<br> sidebar.classList.add('sidebar-expanded');<br> body.classList.remove('sidebar-collapse');<br> body.classList.add('sidebar-expand');<br> } else {<br> sidebar.classList.remove('sidebar-expanded');<br> sidebar.classList.add('sidebar-collapsed');<br> body.classList.remove('sidebar-expand');<br> body.classList.add('sidebar-collapse');<br> }<br>});
适配 CSS 样式以支持折叠效果
Laravel-admin 基于 AdminLTE,可复用其折叠样式规则。若未自动加载,需在 admin.css 或自定义 CSS 中补充:
- 折叠时 sidebar 宽度设为
45px,仅显示图标;展开时恢复为250px(或按主题调整) - 菜单文字
.sidebar-menu li a span在折叠状态下display: none,展开时显示 - 子菜单(.treeview-menu)在折叠时隐藏,或用 transform 缩小,避免影响布局
- 主内容区(.content-wrapper)的 margin-left 需随 sidebar 宽度动态调整,可用 CSS 变量或 JS 设置内联样式
持久化折叠状态(可选)
用户刷新页面后恢复上次状态,可通过 localStorage 实现:
- 页面加载时读取
localStorage.getItem('sidebar-state'),并应用对应类名 - 点击切换时同步写入:
localStorage.setItem('sidebar-state', 'collapsed')或'expanded' - 建议在 JS 初始化逻辑中统一处理,避免闪烁


















