Menu sidebar bug

[simshaun]

1. Reduce browser width until the menu sidebar may be opened.
2. Open the menu sidebar.
3. Expand browser width until the horizontal menu reappears.

An area of whitespace equal to the menu sidebar width remains visible in the header area.

[addyosmani]

Useful to see what settings you're using in responsive mode. Will help with debugging this. We'll get it fixed.

[passy]

Couldn't reproduce this in the Chrome DevTools with emulation turned on, but I may have just been stupid.

[addyosmani]

I can't repro in Firefox either:

Could you let us know what OS you're on?

[simshaun]

Sorry for the lack of info.

Browsers tested:

• Win/Firefox 30
• Win/Chrome 35.0.1916.153 m
• Ubuntu/Firefox 30

Exact steps I've taken to test:

1. Clone the repo
2. Run npm install in the CLI
3. Run gulp serve in the CLI
4. Shrink window until hamburger icon appears.
5. Click hamburger icon to open menu pane.
6. Enlarge window until horizontal menu re-appears. This is the state you see in the screenshot I posted.

Browser methods:

Firefox: Tools -> Web Developer -> Responsive Design View
Chrome: Devtools -> Esc -> Emulation -> Screen. Just moving the slider up and down

The culprit:

header.app-bar keeps the open class when the window is enlarged to the point that it is no longer needed.

Potential fixes:

1. In the 1200px media query, negate the .app-bar.open, .app-bar.open ~ main transform
2. Use JS to watch the window width and remove the open class. I don't like this solution since it requires the JS to be in sync with the CSS media query.
3. Ignore the issue. Maybe it's not worth fixing. I think it will be encountered by end-users though.

[addyosmani]

Thank you very much for the detailed report :) I do think this issue needs to be fixed. At the moment I'd need to test what side-effects we might incur if opting for 1. but will circle back if we find that it's a suitable solution. Cheers for the suggestions!

[addyosmani]

Just confirming that this is still an issue in master: