fix(layout): rebuild the control sidebar on Bootstrap Offcanvas - #11
Merged
Conversation
The partial was still emitting AdminLTE 3 markup — `.control-sidebar`, `.control-sidebar-dark`, `.control-sidebar-content` and `data-lte-toggle="control-sidebar"`. AdminLTE 4 dropped that component: the string appears nowhere in 4.1 or 4.3, not in the CSS, the JS or the SCSS source, and v4's `.app-wrapper` grid has no area for a right-hand panel (3.2.0 still ships build/scss/_control-sidebar.scss, v4 has no equivalent). So `control_sidebar => true` did not render a panel that failed to open. It auto-placed an unstyled, permanently visible block into the layout grid after the footer, with nothing anywhere in the package able to open or close it, while the docs told you to toggle it with an attribute that has no handler. `control_sidebar_theme` was inert for the same reason. Rebuilt on Bootstrap's Offcanvas, which is already imported by the published resources/js/adminlte.js and brings the backdrop, Esc-to-close and focus trap with it — no custom CSS or JS. Enabling the flag now also renders the navbar gear button that was missing, so the panel can be opened at all, and `control_sidebar_theme` maps to `data-bs-theme` on the panel. The body takes @section('control_sidebar') or @Push('control_sidebar'); `$slot` still works for direct includes. Anyone who styled the old class names should retarget those rules at `#adminlte-control-sidebar`, though nothing rendered before, so this is unlikely to affect anyone. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The control sidebar was AdminLTE 3 markup that survived the v4 rewrite. It never worked in this package.
What was wrong
control-sidebarappears zero times anywhere in AdminLTE 4 — not indist/css/adminlte.css, not indist/js/adminlte.js, not insrc/scss/, in either 4.1.0 or 4.3.1. AdminLTE 3.2.0 still shipsbuild/scss/_control-sidebar.scss; v4 has no equivalent and never mentions the component in its changelog. Three consequences:data-lte-togglevalues arecard-collapse,card-maximize,card-remove,chat-pane,fullscreen,sidebar,sidebar-search,treeview.control-sidebaris not one, so the attribute bound to nothing. (chat-paneis unrelated — it toggles a.direct-chatcontacts pane inside a card.).control-sidebar,.control-sidebar-darkand.control-sidebar-contenthave no rules at all, socontrol_sidebar_themewas inert too..app-wrapperis a CSS grid with exactlylte-app-sidebar,lte-app-header,lte-app-mainandlte-app-footer.So
control_sidebar => truedid not render a panel that failed to open — it auto-placed an unstyled, permanently visible block into the layout after the footer:Meanwhile
docs/layout.mdtold you to toggle it withdata-lte-toggle="control-sidebar", and nothing in the package rendered a button for it either way.Default is
false, so only users who enabled it were affected — but they got a layout glitch with no way to diagnose it.The fix
Rebuilt on Bootstrap's Offcanvas, which is already imported by the published
resources/js/adminlte.js(import 'bootstrap') and isposition: fixed, so it stays out of the grid entirely. Backdrop, Esc-to-close and focus trap come for free — no custom CSS or JS.#adminlte-control-sidebar,.offcanvas.offcanvas-end, labelled by its own title with a working close button.control_sidebarnow also renders the navbar gear toggle that was missing, so the panel can be opened at all.control_sidebar_themefinally does something: applied asdata-bs-themeon the panel.@section('control_sidebar')or@push('control_sidebar');$slotstill honoured for direct includes.The config API (
control_sidebar,control_sidebar_theme) is unchanged.Breaking change
If you styled the old
.control-sidebar/.control-sidebar-dark/.control-sidebar-contentclasses yourself, retarget those rules at#adminlte-control-sidebar. Since those classes have never had any styles under v4, this is unlikely to affect anyone. Called out inCHANGELOG.mdanddocs/layout.md.Tests
6 new tests in
tests/ControlSidebarTest.php: renders nothing when disabled; offcanvas + navbar toggle appear together and point at the same element when enabled; theme maps todata-bs-theme; body accepts section / stack / slot content and escapes non-Htmlable slots; panel is labelled for assistive tech; and a regression guard asserting no v3 markup survives anywhere in the rendered page.Checklist
composer checkpasses locally (Pint + PHPStan + PHPUnit) — 88 tests, 395 assertionsdocs/if behaviour or APIs changed (they are served in-app at/docs)CHANGELOG.mdentry under [Unreleased]resources/lang/— reuses the existingadminlte.settingskey; parity verified at 0 missing across all 9🤖 Generated with Claude Code