collapse chapters

4 files changed, 39 insertions, 6 deletions

diff --git a/package.json b/package.json
index 4f17d12..f4c4d42 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
 		"react-markdown": "^6.0.0",
 		"react-syntax-highlighter": "^15.4.3",
 		"rehype-raw": "^5.1.0",
-		"remark-gfm": "^1.0.0"
+		"remark-gfm": "^1.0.0",
+		"use-mousetrap": "^1.0.4"
 	},
 	"devDependencies": {
 		"@types/node": "^14.14.36",
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
index 70347c8..35a41e6 100644
--- a/pages/post/[id].tsx
+++ b/pages/post/[id].tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { readdirSync, readFileSync } from 'fs';
 import { join } from 'path';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import rehypeRaw from 'rehype-raw';
@@ -76,6 +76,12 @@ export function RenderedArticle(props: { content: string; }) {
 	/>;
 }
 
+var collapsed = false;
+function toggle() {
+	collapsed = !collapsed;
+	document.documentElement.style.setProperty('--collapse-horizontal-gap', Number(collapsed).toString());
+}
+
 export default function Post(props: {
 	content: string;
 	meta: ArticleMeta;
@@ -89,7 +95,7 @@ export default function Post(props: {
 		</Head>
 		<div className='centeredPage'>
 			<div className='titleWrapper'>
-				<h1>{props.meta.title}</h1>
+				<h1 onClick={toggle}>{props.meta.title}</h1>
 				<p className='subtile'>{props.meta.subtitle}</p>
 				{props.meta.tags && <Tags tags={props.meta.tags} />}
 			</div>
diff --git a/styles/layout.css b/styles/layout.css
index 70f94dc..96a3604 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,19 +1,23 @@
 :root {
-	--nav-width: 200px;
+	--collapse-horizontal-gap: 0;
+	--nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important;
 	--page-width: 700px;
 	--page-margins: 24px;
 }
 
 .centeredPage {
+	transition-property: gap, max-width;
+	transition-duration: 500ms;
+
 	max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins));
 	margin: 0 auto;
 	margin-top: 96px;
 	padding: 0 var(--page-margins);
 
 	display: grid;
-	gap: var(--page-margins);
-	grid-template-columns: var(--nav-width) 1fr;
 	grid-auto-rows: auto;
+
+	gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins));
 }
 
 .titleWrapper {
@@ -28,6 +32,10 @@
 .navAreaWrapper {
 	grid-column: 1;
 	grid-row: 2;
+
+	transition-property: width;
+	transition-duration: 500ms;
+	width: var(--nav-width);
 }
 .navAreaWrapper > .sticky {
 	position: sticky;
diff --git a/yarn.lock b/yarn.lock
index 20da7c8..d97882f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -200,6 +200,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/mousetrap@^1.6.4":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.8.tgz#448929e6dc21126392830465fdb9d4a2cfc16a88"
+  integrity sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA==
+
 "@types/node@^14.14.36":
   version "14.14.36"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.36.tgz#5637905dbb15c30a33a3c65b9ef7c20e3c85ebad"
@@ -1503,6 +1508,11 @@ minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+mousetrap@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
+  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2365,6 +2375,14 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-mousetrap@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/use-mousetrap/-/use-mousetrap-1.0.4.tgz#9ec635821140e702cc873f41880a5cbd46d1d09a"
+  integrity sha512-+limiYsm2e1Xs/tnwfEqSCcvh6XTcfLTpCoJFA+mu+btInnlrkFkZ48DLwVGejJdvP5H3Ge79t0bcRKepncvbQ==
+  dependencies:
+    "@types/mousetrap" "^1.6.4"
+    mousetrap "^1.6.5"
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"