Chore: Extract off-canvas drawer pattern into Overlays::DrawerComponent#5312
Merged
Conversation
KevinMulhern
force-pushed
the
feature/lesson-sidebar
branch
2 times, most recently
from
36de006 to
1eaf3ab
Compare
KevinMulhern
force-pushed
the
feature/lesson-sidebar
branch
from
1eaf3ab to
1b836db
Compare
KevinMulhern
force-pushed
the
feature/off-canvas-drawer-component
branch
2 times, most recently
from
295f9e9 to
2672a64
Compare
There was a problem hiding this comment.
Pull request overview
This PR extracts the shared “overlay + slide-in panel + visibility controller” off-canvas drawer shell used across the main nav, lesson sidebar, and admin sidebar into a reusable Overlays::DrawerComponent, letting callers yield their specific sidebar content while standardizing the wrapper behavior.
Changes:
- Added
Overlays::DrawerComponent(Ruby + template) to encapsulate the off-canvas drawer markup and visibility wiring. - Refactored the shared mobile nav partial, lesson sidebar, and admin sidebar to render through the new component.
- Added component specs to cover yielded content, close label rendering, optional
aria-label, and breakpoint behavior.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| spec/components/overlays/drawer_component_spec.rb | Adds specs for the new drawer component’s key behaviors (content yield, labels, breakpoint classes). |
| app/views/shared/_off_canvas_menu.html.erb | Replaces duplicated off-canvas wrapper markup with Overlays::DrawerComponent and yields the nav content. |
| app/views/layouts/admin/_sidebar_nav.html.erb | Refactors the admin mobile off-canvas sidebar to use the shared drawer component. |
| app/components/overlays/drawer_component.rb | Introduces the new component API (hook class, breakpoint, close label, optional aria label). |
| app/components/overlays/drawer_component.html.erb | Implements the shared drawer shell (overlay, panel, close button, transitions, visibility controller). |
| app/components/lessons/sidebar_component.html.erb | Refactors the lesson mobile sidebar drawer to use the shared drawer component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
KevinMulhern
force-pushed
the
feature/off-canvas-drawer-component
branch
from
2672a64 to
13b12b6
Compare
KevinMulhern
force-pushed
the
feature/off-canvas-drawer-component
branch
from
13b12b6 to
27e8f21
Compare
Because the nav, lesson sidebar, and admin sidebar all duplicated the same overlay + slide-in panel + visibility controller wiring, this PR extracts the shared shell into a single reusable ViewComponent. Callers yield their content in and pass a hook class and optional breakpoint.
KevinMulhern
force-pushed
the
feature/off-canvas-drawer-component
branch
from
27e8f21 to
9149d09
Compare
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
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.
Because the nav, lesson sidebar, and admin sidebar all duplicated the same overlay + slide-in panel + visibility controller wiring, this PR extracts the shared shell into a single reusable ViewComponent. Callers yield their content in and pass a hook class and optional breakpoint.