Bug: Mobile sidebar breaks if opened during initialization

[columk1]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Bug: brief description of bug format, 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.

[KevinMulhern]

Thanks for reporting @columk1

[michellecaii]

Hi, can I be assigned to work on this?

[KevinMulhern]

It's all yours @michellecaii!

[Angel-Mathew007]

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!

[juliabush]

hey could i be assigned to this issue?