Add option to remove right nav

[pwinston]

How can I make the sidebar wider for the documentation pages? The example site's sidebar is wider than mine, but I can't figure out how that was done. Thanks.

[LisaFC]

Huh, that's odd, I didn't do anything to set the width. It's a Bootstrap grid column with some extra CSS styling for the nav section. You can see how we divided up the widths in the base file for docs:

https://github.com/google/docsy/blob/master/layouts/docs/baseof.html

The CSS is here so you can override just this file in your own project and tweak the padding and margins so it's how you want it, or you could create your own baseof file.

https://github.com/google/docsy/blob/master/assets/scss/_sidebar-tree.scss

Can I see your site to see if there's anything else odd going on?

[pwinston]

The site is https://tobeva.com/wiki

But this is totally bizarre. Sometimes the sidebar is narrow and sometimes it's wide. Even in Chrome sometimes it's narrow or wide. When wide it's identical to the Docsy example site. When narrow it's a fair amount more narrow.

See screenshot below. Top to bottom that's Chrome, also Chrome, and Firefox. I just tried 2 other mac's just now, one showed it narrow and one wide. I can't explain how that's even possible, for it to vary. This seems totally crazy.

I thought maybe my hosting was broken and it's not always pulling down the same files. But I don't see any errors in the console in either case, when narrow or wide.

[LisaFC]

That is REALLY strange! The grid gives different % ratios for medium and extra large screens, but these are all clearly on the same screen. For me I'm getting your "narrow" version on my Macbook Pro (13 inch) and the "wide" version on my monitor, which is what I'd expect.

[LisaFC]

These are the Bootstrap breakpoints for different screen sizes:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

[pwinston]

Closed by mistake.

I think I can explain it. Not shown in my screenshots is the right side of the window. When my column is narrow it's because the window is wide enough for the right sidebar! Sorry for the confusion not realizing that.

However that implies to me the "responsive" logic here is not great. For example here is Docsy example site with 2 columns, the left sidebar looks good:

Make the window slightly bigger and the right sidebar appears and now the left sidebar is squished. I'd argue this is a poor choice given how much worse the left looks, and how important the left side is:

For my purposes disabling the right sidebar would work, if you know how to that?

For all users I'd argue you don't want to squish the left sidebar? Seems like the main column is more squishable, because in the left sidebar it will make most of the headings take up 2 lines.

But it's subtle issue maybe most people don't care. I think the bottom line is "responsive" is hard and you have a make a bunch of choices about how things will resize, and it's highly dependent on the content how that will really look.

[LisaFC]

Yeah, it would be nice to spend some time (or have people volunteer to spend it!) generally tweaking our responsive layout, we already have a few open issues about how we could have better UX on mobile. It is hard and I am not always very good at it. :)

I'll play around a bit and see if there's an easy way for you to take out the right sidebar for all screen sizes (it doesn't display in mobile)

[pwinston]

Cool thanks. Having the right sidebar be optional seems like a reasonable config option even apart from this layout use. Thinking about it, I think the reason shrinking the left sidebar is bad is because it’s really a menu/index. It’s not free text. And it’s narrow to start with. Shrinking it forces many headings to two lines, which means as a “menu” it’s now displaying half the number links in the same vertical space. So it’s a functional issue. Whereas the main column is free text. And wider so the percentage of shrinking would be less. So I think it can better absorb the change in width. But that’s philosophical. Maybe there are in fact reasons to shrink the left sidebar. As for why I hit this I suspect it’s because I tend to make my browser windows portrait shaped, so they look like a piece of paper. Not wide so they use the whole width of the screen. I see people using both approaches. I don’t think either style is going away.

…

On Wed, May 13, 2020 at 8:30 AM LisaFC ***@***.***> wrote: Yeah, it would be nice to spend some time (or have people volunteer to spend it!) generally tweaking our responsive layout, we already have a few open issues about how we could have better UX on mobile. It *is* hard and I am not always very good at it. :) I'll play around a bit and see if there's an easy way for you to take out the right sidebar for all screen sizes (it doesn't display in mobile) — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#273 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7YO5QQYFRPJOJM7SNTDHLRRKHGZANCNFSM4M5KXL5Q> .

[pwinston]

Is there maybe a hack-way I can keep the right sidebar from popping up? Would be nice until there is a real config option. I'm not that good with CSS.

[LisaFC]

Should be, yeah, I'll take a look. Will probably just be a matter of overriding the relevant layout.

[LisaFC]

OK, so a super simple fix is to add your own layouts/docs/baseof.html to your project with this content (it's the existing one minus the toc div) then you just won't get a right sidebar, ever.

<!doctype html>
<html lang="{{ .Site.Language.Lang }}" class="no-js">
  <head>
    {{ partial "head.html" . }}
  </head>
  <body class="td-{{ .Kind }}">
    <header>
      {{ partial "navbar.html" . }}
    </header>
    <div class="container-fluid td-outer">
      <div class="td-main">
        <div class="row flex-xl-nowrap">
          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
            {{ partial "sidebar.html" . }}
          </div>
          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
            {{ partial "version-banner.html" . }}
            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
            {{ block "main" . }}{{ end }}
          </main>
        </div>
      </div>
      {{ partial "footer.html" . }}
    </div>
    {{ partial "scripts.html" . }}
  </body>
</html>

The only disadvantage is that you also don't get the Github links as they're in the sidebar.