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.