TheOdinProject
Bug: Mobile sidebar breaks if opened during initialization
Checks
- [X] I have thoroughly read and understand The Odin Project Contributing Guide
- [X] The title of this issue follows the
Bug: brief description of bugformat, e.g.Bug: Lesson complete button does not update on click - [ ] Would you like to work on this issue?
Bug description
If the hamburger menu icon is clicked too soon after navigation, the sidebar component can't be opened until the page is refreshed. This happens even if the page appears to be fully loaded (after progress bar/spinner is gone from browser).
Reproduced on Chrome (Android) and Chrome/Safari (Mac)
How to reproduce
Navigate to any page at screen width < 768px and click the hamburger menu icon during page load or soon after the browser appears to have finished loading.
Expected behavior
The button should be disabled until the component is initialized.
What browsers are you seeing the problem on?
Chrome
What OS are you using?
MacOS
Discord Name
columk
Additional Comments
I wonder would adding a check in open_modal_controller.js to see if the controller is ready before calling this.visibilityOutlet.on() would solve it.
Otherwise the button could be initialized with a disabled attribute which could then be removed in the controller's connect function.
Hi @michellecaii and team, I’ve been reviewing this issue and the suggested solutions, and I’d love to help out if there’s room for collaboration. I’ve gone through the contributing guide and set up the project locally.
I was thinking about the initialization timing—maybe adding a data-initialized flag to the controller and checking it before triggering visibilityOutlet.on() could be a lightweight alternative to disabling the button.
Let me know if that sounds helpful or if you'd prefer I wait until the current fix is finalized. Either way, I’m excited to learn and contribute!
