Improve sidebar user experience

[imfing]

Discussed in #120

^{Originally posted by msavdert October 2, 2023}

1. Is it possible to hide the Sidebar at any time and expand it at any time? like:

https://www.docsy.dev/docs/adding-content/navigation/#section-menu-options

2. Is it possible to publish a sub-article without showing it in the sidebar? like:

---
title: Configuration
sidebar:
  open: false
---

This option only works for _index.md. This option didn't work for other .md files under the same folder to not show them in the sidebar.

Summary:

• Support expand and collapse sidebar
• Support hide article or page in sidebar
• Support hide sidebar in a page

[mafendi]

To hide the particular page from the sidebar, I added a frontmatter to the page excludeFromSidebar: true/false

Updated sidebar.html:

      {{- with .Params.excludeFromSidebar }}
        {{- $excludeFromSidebar := . | default false }}
        {{- if not $excludeFromSidebar }}
          <li class="{{ if $shouldOpen }}open{{ end }}">
            {{- template "sidebar-item-link" dict "active" $active "title" $title "link" .RelPermalink -}}
            {{- if and $toc $active -}}
              {{- template "sidebar-toc" dict "page" . -}}
            {{- end -}}
            {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
          </li>
        {{- end }}
      {{- else }}
        <li class="{{ if $shouldOpen }}open{{ end }}">
          {{- template "sidebar-item-link" dict "active" $active "title" $title "link" .RelPermalink -}}
          {{- if and $toc $active -}}
            {{- template "sidebar-toc" dict "page" . -}}
          {{- end -}}
          {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
        </li>
      {{- end }}

          {{- with .Params.excludeFromSidebar }}
            {{- $excludeFromSidebar := . | default false }}
            {{- if not $excludeFromSidebar }}
              <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
                {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
                {{- if and $toc $active -}}
                  {{- template "sidebar-toc" dict "page" . }}
                {{- end }}
                {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }}
              </li>
            {{- end }}
          {{- else }}
            <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
              {{- if and $toc $active -}}
                {{- template "sidebar-toc" dict "page" . }}
              {{- end }}
              {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }}
            </li>
          {{- end }}

[imfing]

@mafendi thanks for sharing this, that's almost what I was planning to add in the theme

[jln-ho]

I think it would be nice to have the option to prevent the sidebar from being generated for certain pages, or is this already possible?

[imfing]

I think it would be nice to have the option to prevent the sidebar from being generated for certain pages, or is this already possible?

@jln-ho it should be trivial to add an optional like excludeFromSidebar suggested above to prevent the page showing up on sidebar.
I'll implement it these days.

[jln-ho]

@imfing That would exclude a single page from the sidebar. I was talking about excluding the sidebar from a single page.

[imfing]

@mafendi it's implemented in #209

essentially it's a one-line change: https://github.com/imfing/hextra/pull/209/files#diff-21c3ed4170b0e684f5c718a8b3bb28e73bb15d61a3f0f2301cafcc62ca5034f3R76

[imfing]

@imfing That would exclude a single page from the sidebar. I was talking about excluding the sidebar from a single page.

@jln-ho I've added this in the PR #209 with the following frontmatter to hide the sidebar on a specific page:

---
title: Configuration
sidebar:
  hide: true
---

Please note, this feature is currently experimental and may change as part of performance enhancements for sidebar rendering (see issue #122).