From 0112103d29dd990bc9edb43d3ae8f62e1ce8280a Mon Sep 17 00:00:00 2001
From: sammyette <torchedsammy@gmail.com>
Date: Thu, 13 Apr 2023 16:38:41 -0400
Subject: [PATCH] website: fix docs page layout

- the sidenav for doc pages looks the same as the navbar.
- it will be hidden by default on mobile.
- sidenav looks like the navbar on mobile and is more
seamless in general
---
 website/themes/hsh/layouts/_default/doc.html | 64 ++++++++++++--------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/website/themes/hsh/layouts/_default/doc.html b/website/themes/hsh/layouts/_default/doc.html
index 2748a23..d5725f4 100644
--- a/website/themes/hsh/layouts/_default/doc.html
+++ b/website/themes/hsh/layouts/_default/doc.html
@@ -1,31 +1,43 @@
 {{ define "main" }}
-<div class="container py-3 row">
-	<div class="container" style="width: 240px;">
-		<div class="p-3 col">
-			<ul class="nav nav-pills mb-auto-collapse" id="navbarSupportedContent">
-				{{ $currentPage := . }}
-				{{ range .Site.Menus.docs.ByWeight.Reverse }}
-					<li class="nav-item">
-						<a href="{{ .URL }}" class="nav-link">
-							<strong>{{ .Title }}</strong>
-						</a>
-					</li>
-					{{ if .Children }}
-						<ul style="list-style: none;">
-							{{ range .Children }}
-								<li class="nav-item">
-									<a href="{{ .URL }}" class="nav-link">
-										{{ .Title }}
-									</a>
-								</li>
+	<style>
+		@media (min-width: 768px) {
+			.sidenav {
+				width: 240px;
+			}
+		}
+	</style>
+<div class="row">
+	<nav class="navbar-expand-md bg-light sidenav">
+		<div class="container">
+			<div class="collapse navbar-collapse" id="navbarSupportedContent">
+				<nav class="navbar navbar-expand-md bg-light sidenav col" style="margin-top: -20px;">
+					<ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-column col">
+						{{ $currentPage := . }}
+						{{ range .Site.Menus.docs.ByWeight.Reverse }}
+							<li class="nav-item">
+								<a href="{{ .URL }}" class="nav-link">
+									<strong>{{ .Title }}</strong>
+								</a>
+							</li>
+							{{ if .Children }}
+								<ul style="list-style: none;">
+									{{ range .Children }}
+										<li class="nav-item">
+											<a href="{{ .URL }}" class="nav-link">
+												{{ .Title }}
+											</a>
+										</li>
+									{{ end }}
+								</ul>
 							{{ end }}
-						</ul>
-					{{ end }}
-				{{ end }}
-			</ul>
+						{{ end }}
+					</ul>
+				</nav>
+			</div>
 		</div>
-	</div>
-	<div class="p-3 col">
+	</nav>
+
+	<container class="col" style="padding-left: 15px; padding-right: 15px">
 		<div>
 			<h1>{{ .Title }}</h1>
 			<p><em>
@@ -47,7 +59,7 @@
 				Want to help improve this page? <a href="https://github.com/Rosettea/Hilbish/issues/new/choose">Create an issue.</a>
 			</p>
 		</div>
-	</div>
+	</container>
 </div>
 {{ end }}