Toggling the sidebar in the docs page.

[amirfarzamnia]

Hyas Doks is performing well, yet it would be fantastic if we could toggle the sidebar on docs pages, like the one found here: https://doks.netlify.app/docs/guides/example-guide/.

Is there a method to achieve this?

[h-enk]

That's not an easy one (I guess you mean something like this: https://nextra.site/docs) — probably a solution using Bootstrap's Collapse plugin

You would have to copy node_modules/@hyas/doks-core/layouts/_default/single.html and paste as layouts/_default/single.html (and make changes there)

BTW If you'd like to have more space, you could also set in params.toml:

# Doks (@hyas/doks-core)
[doks]
  # Navbar
  containerBreakpoint = "fluid" # "", "sm", "md", "lg" (default), "xl", "xxl", or "fluid"

[h-enk]

For example: https://www.codeply.com/p/LXYndDByBf

[h-enk]

Something like this:

single.html

{{ define "main" }}
	<div class="row flex-xl-nowrap">
		{{ if (in site.Params.doks.sectionNav .Section) -}}
			<div id="sidebar" class="collapse collapse-horizontal show col-lg-5 col-xl-4 docs-sidebar{{ if ne site.Params.doks.navbarSticky true }} docs-sidebar-top{{ end }}{{ if site.Params.doks.headerBar }} docs-sidebar-offset{{ end }}">
				<div class="d-none d-lg-block">
					{{ partial "sidebar/section-menu.html" . }}
				</div>
			</div>
		{{ end -}}
		{{ if and (eq site.Params.doks.containerBreakpoint "fluid") (in .Site.Params.mainSections .Type) }}
			<div class="col container-fw d-lg-flex flex-lg-row justify-content-center mx-auto">
		{{ end }}
		{{ if ne .Params.toc false -}}
		<nav class="docs-toc{{ if ne site.Params.doks.navbarSticky true }} docs-toc-top{{ end }}{{ if site.Params.doks.headerBar }} docs-toc-offset{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
			{{ partial "sidebar/docs-toc-desktop.html" . }}
		</nav>
		{{ end -}}
		{{ if .Params.toc -}}
		<main class="docs-content col-lg-11 col-xl-9">
		{{ else -}}
		<main class="docs-content col-lg-11 col-xl-9 mx-xl-auto">
		{{ end -}}

    <!-- Section navigation -->
    {{ if (in site.Params.doks.sectionNav .Section) -}}
    <button class="btn btn-link d-none d-lg-block p-0 mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Open section navigation menu">
			<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar-left-collapse"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M9 4v16" /><path d="M15 10l-2 2l2 2" /></svg>
    </button>
		{{ end -}}            

			{{ if site.Params.doks.breadcrumbTrail -}}
				<!-- https://discourse.gohugo.io/t/breadcrumb-navigation-for-highly-nested-content/27359/6 -->
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb">
						{{ partial "main/breadcrumb" . -}}
						<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
					</ol>
				</nav>
			{{ end }}
			<h1>{{ .Title }}</h1>
			<!-- <p class="lead">{{ .Params.lead | safeHTML }}</p> -->
			{{ if ne .Params.toc false -}}
			<nav class="toc-mobile d-xl-none" aria-label="Quaternary navigation">
				{{ partial "sidebar/docs-toc-mobile.html" . }}
			</nav>
			{{ end -}}

			{{ if site.Params.doks.headlineHash -}}
				{{ partial "main/headline-hash" .Content }}
			{{ else -}}
				{{ .Content }}
			{{ end -}}
			<div class="page-footer-meta d-flex flex-column flex-md-row justify-content-between">
				{{ if site.Params.doks.lastMod -}}
					{{ partial "main/last-modified.html" . }}
				{{ end -}}
				{{ if site.Params.doks.editPage -}}
					{{ partial "main/edit-page.html" . }}
				{{ end -}}
			</div>
			{{ partial "main/docs-navigation.html" . }}
			<!--
			{{ if not .Site.Params.options.collapsibleSidebar -}}
				{{ partial "main/docs-navigation.html" . }}
			{{ else -}}
				<div class="my-n3"></div>
			{{ end -}}
			-->
		</main>
		{{ if and (eq site.Params.doks.containerBreakpoint "fluid") (in .Site.Params.mainSections .Type) }}
			</div>
		{{ end }}
	</div>
{{ end }}

[amirfarzamnia]

Thats awesome! Thanks for your support of this fantastic theme.