New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking the sidebar heading (desktop size, JS disabled) makes the sidebar disappear when in a sub-section #710

Closed
JaneSmith opened this Issue Feb 22, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@JaneSmith

JaneSmith commented Feb 22, 2018

Description

At a full desktop size, the theme displays the sidebar always visible. However, clicking on the header text for that sidebar makes the entire sidebar disappear when the following conditions are both true:

  1. JavaScript is disabled.
  2. You're in a sub-section of the site.

I assume this is because the header text is a label for the checkbox, and clicking that toggles the checkbox, which then makes the entire sidebar disappear. The only fix for this when it happens seems to be to shrink the browser size down to a mobile/tablet layout, use the hamburger menu to go back to the sub-section menu, and then expand the browser size again.

I understand that the experience won't be perfect without JavaScript, but couldn't this be fixed by making the --active tag override the state of the checkbox when at the full desktop size? If you're at the full desktop size, you always want the sidebar visible, so can't you just ignore the checkbox state and display the --active nested sidebar?

Expected behavior

Clicking on the heading should not do anything.

Actual behavior

Clicking on the heading makes the entire sidebar disappear.

Steps to reproduce the bug

  1. Open Firefox Nightly and disable JavaScript.
  2. Go to https://squidfunk.github.io/mkdocs-material/extensions/admonition/
  3. Expand the browser to a large size to get the full desktop layout.
  4. Click on the "Extensions" heading on the left sidebar. Poof! It disappears.

System information

  • OS: Windows 10 Pro.
  • Browser: Firefox Nightly (60.0a1).

@squidfunk squidfunk added the bug label Feb 22, 2018

@squidfunk

This comment has been minimized.

Owner

squidfunk commented Feb 22, 2018

Indeed confirmed. I will check if there's a fix.

@squidfunk

This comment has been minimized.

Owner

squidfunk commented Feb 22, 2018

I understand that the experience won't be perfect without JavaScript, but couldn't this be fixed by making the --active tag override the state of the checkbox when at the full desktop size? If you're at the full desktop size, you always want the sidebar visible, so can't you just ignore the checkbox state and display the --active nested sidebar?

The problem is, that there's a lot of CSS hacking to make it work without copying a lot of elements. We need to use the active state, because it is used to determine which part of the menu to render. However, I think I have a simple fix.

@squidfunk

This comment has been minimized.

Owner

squidfunk commented Feb 22, 2018

Fixed in 060a5df

@squidfunk

This comment has been minimized.

Owner

squidfunk commented Feb 22, 2018

Released as part of 2.6.6.

@squidfunk squidfunk closed this Feb 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment