Hide the navbar

[oren]

Feature request

What problem does this feature solve?

Some sub sections of my website don't need navbar at all. I created a new project with the init command and all I have is this:

    window.$docsify = {
      name: '',
      repo: ''

but the navbar is showing. I don't need navbar for every section of my website.

What does the proposed API look like?

I don't know. This might be a bug or I just don't know how to use the existing API

How should this be implemented in your opinion?

Not sure

Are you willing to work on this yourself?

Depends on the complexity

[oren]

I think currently the sidebar is always visible. I assume that based on this line:
https://github.com/docsifyjs/docsify/blob/develop/src/core/render/tpl.js#L49

[oren]

I worked around it by hiding and showing the icon based on the location.hash. Dirty but works:

      window.addEventListener('hashchange', hashHandler, false);

      function hashHandler() {
        if(location.hash.startsWith("#/surf/")) {
          document.getElementsByClassName("sidebar-toggle-button")[0].style.display = "block";
        } else {
          document.getElementsByClassName("sidebar-toggle-button")[0].style.display = "none";
        }
      }

[anikethsaha]

did you try this loadNavbar: false ?

[methodbox]

did you try this loadNavbar: false ?

You know none of these flags actually work?

[anikethsaha]

did you try this loadNavbar: false ?

You know none of these flags actually work?

I didnt get you
do you mean that passing false is not working ?

[anikethsaha]

By default both sidebar and navbar are false which means, they are not visible.

[methodbox]

By default both sidebar and navbar are false which means, they are not visible.

Then why is there a side nav shown by default, and why doesn’t sideBar: “mysidebar.md”do anything?

Setting sidebar: “false” doesn’t hide it, either, and since it won’t load mine, it’s useless.

It looks like navBar: “mynavbar.md” works, but since I can’t get rid of (and it doesn’t do so automatically, which seems it should) the side bar, they overlap.

[anikethsaha]

Thanks for the details 👍
I will try to reproduce it locally.

It seems like a bug here

docsify/src/core/render/index.js

Line 50 in db97a1d

!this.config.loadSidebar && this._renderSidebar()

[trusktr]

Then why is there a side nav shown by default, and why doesn’t sideBar: “mysidebar.md”do anything?

There might be bugs that we should fix. We're in the process of adding unit tests, so hopefully any regressions won't happen in the future. We're not the original authors, so we're not 100% aware of any regressions, if any, but if you see anything, please do open an issue. That'd help a lot!

[trusktr]

Here's an idea for a workaround: you could add a CSS style that applies display: none on certain pages for the navbar, and on other pages make sure to remove that CSS style.

Another idea: you could listen to route changes, and add/remove the CSS style on route changes.

[methodbox]

Yep, totally understand how I can work around it, but then, if I’m going to take the time to build custom logic or CSS for and “auto”-generated site, then it isn’t very auto, is it?

The goal of a tool like this seems like it should be to be fairly effortless and definitely shouldn’t require writing additional code, otherwise I could just use JSDoc out of the box and do the custom theme work myself.

[anikethsaha]

We are sorry for this issue.
I will find a time soon to fix this one.

This project was not active for a long time and we are finding time in between to resolves these types of issues. we don't have tests to support us either. having tests would pick these kinds of bugs.
We think too that we should not have workarounds to get our stuff going but at this point, this is the quick fix.

If you find the fix then feel free to submit a PR to help others 👍