haikumodern: include a collapsible sidebar.

jessicah · Aug 23, 2024 · a765c65 · a765c65
1 parent 908d553
commit a765c65
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/theme/haikumodern/layout.html b/theme/haikumodern/layout.html
@@ -137,6 +137,7 @@
 
 {%- block body_tag %}
 <body>
+<input type="checkbox" id="sidebar-checkbox" />
 {% endblock %}
 	<div id="app">
 		<header role="banner">
@@ -147,7 +148,13 @@ <h2 class="heading"><span>{{ title|striptags|e }}</span></h2>
 		</header>
 
 		<nav class="top" aria-label="top navigation">
-			{{ nav() }}
+			<div>
+				<label for="sidebar-checkbox" id="sidebar-label">
+					<!-- hamburger menu -->
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
+				</label>
+				{{ nav() }}
+			</div>
 		</nav>
 
 		{%- block sidebar %}{{ sidebar() }}{% endblock %}

diff --git a/theme/haikumodern/static/haikumodern.css.jinja b/theme/haikumodern/static/haikumodern.css.jinja
@@ -446,3 +446,44 @@ div.viewcode-block:target {
 div.math p {
 	text-align: center;
 }
+
+/* collapsible sidebar */
+input#sidebar-checkbox {
+	position: absolute;
+	width: 0;
+	height: 0;
+	visibility: hidden;
+}
+
+input#sidebar-checkbox:checked~div#app nav.toc {
+	visibility: hidden;
+	min-width: 0;
+	max-width: 0;
+}
+
+input#sidebar-checkbox:checked~div#app {
+	/* zero for the second column collapses layout */
+	grid-template-columns: 1fr 0 minmax(0, 100ch) 1fr;
+}
+
+label#sidebar-label {
+	grid-column: 1;
+	max-height: 20px;
+	padding: 1px 1em;
+}
+
+nav.top > div {
+	grid-column: 3;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+nav.top > div > ul {
+	display: inline-flex;
+	grid-column: 2;
+	justify-self: right;
+	font-size: 13px;
+}
+nav.top svg {
+	fill: #dc3c01;
+	width: 16px;
+}