Giters

docsifyjs / docsify

🃏 A magical documentation site generator.

Home Page:https://docsify.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

disable/hide sidebar at onload

initbar opened this issue · comments

commented

Is there an option to hide or disable sidebar at onload event? I'm currently relying on custom $('.sidebar-toggle-button').click() to hide it, but wondering if there is native support or options.

commented

I think <body class="close"> will work

commented

hi, this will not work on mobile browser

commented

Interesting, how does closing the sidebar work on mobile?

commented

The problem here is that the close class has overall strange behavior.

On a mobile screen the close class actually opens the sidebar, while omitting it closes it.

This seems to be some hack to transition a responsive desktop site which has a sidebar to a mobile width and auto-closing the sidebar. However, this transition does not happen by using the close class correctly...

EDIT:

The solution is to add the following styles, which makes consistent close class behavior on mobile and desktop:

/* Fix `close` style on mobile */
@media screen and (max-width: 768px) {
  /* Fix behavior for when sidebar should be open */
  body .sidebar {
    transform: translateX(300px);
  }
  body .content {
    transform: translateX(300px);
  }
  .sidebar-toggle {
    background-color: rgba(255,255,255,0.8);
    transition: 1s background-color;
    width: 284px;
    padding: 10px;
  }

  /* Fix behavior for when sidebar should be closed */
  body.close .sidebar {
    transform: translateX(0);
  }
  body.close .content {
    transform: translateX(0px);
  }
  body.close .sidebar-toggle {
    background-color: transparent;
    width: auto;
    padding: 30px 30px 10px 10px;
  }
}

Note that this does have a strange behavior when actively changing the resolution of your screen, you will see a CSS transition. If someone knows how to fix this, without disabling the transition altogether, let me know.