made toc collapsable

source/package.json

@@ -35,6 +35,7 @@
 		"marked": "^2.1.3",
 		"query-string": "^7.0.1",
 		"react": "^17.0.2",
+		"react-collapse": "^5.1.0",
 		"react-date-range": "^1.3.0",
 		"react-device-detect": "^1.17.0",
 		"react-dom": "^17.0.2",

source/src/pages/Page.tsx

@@ -3,6 +3,8 @@ import marked from "marked"
 import { Helmet } from "react-helmet-async"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
+import { Collapse } from "react-collapse"
+import storage from "local-storage-fallback"
 
 import theming from "../theming"
 
@@ -16,6 +18,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
 	faBook,
 	faCalendar,
+	faCaretDown,
+	faCaretUp,
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
@@ -69,6 +73,22 @@ const StyledDisabledLink = styled.div`
 	user-select: none;
 `
 
+const StyledTocToggleButton = styled.button`
+	border: none;
+	background-color: rgba(0, 0, 0, 0);
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "black",
+			dark: "white",
+		})};
+`
+
+const StyledCollapseContainer = styled.div`
+	* {
+		transition: height 200ms ease-out;
+	}
+`
+
 interface PageProps {}
 
 interface PageState {
@@ -81,6 +101,7 @@ interface PageState {
 		prev: string | null
 		next: string | null
 	} | null
+	isTocOpened: boolean
 	loading: boolean
 }
 
@@ -111,15 +132,23 @@ class NextPrev extends React.Component<NextPrevProps> {
 export default class Page extends React.Component<PageProps, PageState> {
 	constructor(props) {
 		super(props)
+
 		this.state = {
 			fetchedPage: undefined,
 			isUnsearchable: false,
 			isSeries: false,
 			seriesData: null,
+			isTocOpened: storage.getItem("isTocOpened") == "true",
 			loading: true,
 		}
 	}
 
+	componentDidUpdate(_, prevState) {
+		if (this.state.isTocOpened !== prevState.isTocOpened) {
+			storage.setItem("isTocOpened", this.state.isTocOpened.toString())
+		}
+	}
+
 	async componentDidMount() {
 		let _isUnsearchable = false
 		let _isSeries = false
@@ -265,26 +294,44 @@ export default class Page extends React.Component<PageProps, PageState> {
 							)}
 						</small>
 						{/* Horizontal Separator */}
+
 						<hr />
+
+						<strong>Table of Content </strong>
+						<StyledTocToggleButton
+							onClick={() => {
+								this.setState({
+									isTocOpened: !this.state.isTocOpened,
+								})
+							}}
+						>
+							{this.state.isTocOpened ? (
+								<FontAwesomeIcon icon={faCaretUp} />
+							) : (
+								<FontAwesomeIcon icon={faCaretDown} />
+							)}
+						</StyledTocToggleButton>
 						{
-							// add toc if it exists
+							// add table of contents if it exists
 							this.state.fetchedPage.toc && (
-								<>
+								<StyledCollapseContainer>
+									<Collapse isOpened={this.state.isTocOpened}>
 										<div>
-										<strong>Table of Content:</strong>
 											<div
 												className="link-color"
 												dangerouslySetInnerHTML={{
 													__html: marked(
-													this.state.fetchedPage.toc
+														this.state.fetchedPage
+															.toc
 													),
 												}}
 											></div>
 										</div>
-									<hr />
-								</>
+									</Collapse>
+								</StyledCollapseContainer>
 							)
 						}
+						<hr />
 						<div
 							className="link-color"
 							dangerouslySetInnerHTML={{

source/yarn.lock

@@ -9677,6 +9677,11 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-collapse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-5.1.0.tgz#36f69ecb0fe797f976aaf5e4f2b2c248d2760140"
+  integrity sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==
+
 react-date-range@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-date-range/-/react-date-range-1.3.0.tgz#109be685873372c3da975b1cf175d33980ce5c4a"