docs/sdk/assets/header.html

<script>
	function createToC() {
		let sidebar = document.querySelector(".sidebar");
		let headers = document.querySelectorAll("#main-content h2, #main-content h3, #main-content h4");
		console.log(`detected polkadot_sdk_docs: headers: ${headers.length}`);

		let toc = document.createElement("div");
		toc.classList.add("sidebar-table-of-contents");
		toc.appendChild(document.createElement("h2").appendChild(document.createTextNode("Table of Contents")).parentNode);

		let modules = document.querySelectorAll("main .item-table a.mod");

		// the first two headers are always junk
		headers.forEach(header => {
			let link = document.createElement("a");
			link.href = "#" + header.id;
			const headerTextContent = header.textContent.replace("§", "")
			link.textContent = headerTextContent;
			link.className = header.tagName.toLowerCase();

			toc.appendChild(link);

			if (header.id == "modules" && headerTextContent == "Modules") {
				modules.forEach(module => {
					let link = document.createElement("a");
					link.href = module.href;
					link.textContent = module.textContent;
					link.className = "h3";

					toc.appendChild(link);
				});
			}
		});

		// insert toc as the second child in sidebar
		let sidebar_children = sidebar.children;
		if (sidebar_children.length > 1) {
			sidebar.insertBefore(toc, sidebar_children[1]);
		} else {
			sidebar.appendChild(toc);
		}
	}

	function hideSidebarElements() {
		// Create the 'Expand for More' button
		var expandButton = document.createElement('button');
		expandButton.innerText = 'Expand More Items';
		expandButton.classList.add('expand-button');

		// Insert the button at the top of the sidebar or before the '.sidebar-elems'
		var sidebarElems = document.querySelector('.sidebar-elems');
		sidebarElems.parentNode.insertBefore(expandButton, sidebarElems);

		// Initially hide the '.sidebar-elems'
		sidebarElems.style.display = 'none';

		// Add click event listener to the button
		expandButton.addEventListener('click', function () {
			// Toggle the display of the '.sidebar-elems'
			if (sidebarElems.style.display === 'none') {
				sidebarElems.style.display = 'block';
				expandButton.innerText = 'Collapse';
			} else {
				sidebarElems.style.display = 'none';
				expandButton.innerText = 'Expand for More';
			}
		});
	}

	window.addEventListener("DOMContentLoaded", (event) => {
		// if the crate is one that starts with `polkadot_sdk_docs`
		let crate_name = document.querySelector("#main-content > div > h1 > a:nth-child(1)");
		if (!crate_name.textContent.startsWith("polkadot_sdk_docs")) {
			console.log("skipping -- not `polkadot_sdk_docs`");
			return;
		} else {
			// insert class 'sdk-docs' to the body, so it enables the custom css rules.
			document.body.classList.add("sdk-docs");
		}

		createToC();
		hideSidebarElements();

		console.log("updating page based on being `polkadot_sdk_docs` crate");
	});
</script>

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<style>
	body.sdk-docs {
		nav.side-bar {
			width: 300px;
		}

		.sidebar-table-of-contents {
			margin-bottom: 1em;
			padding: 0.5em;
		}

		.sidebar-table-of-contents a {
			display: block;
			margin: 0.2em 0;
		}

		.sidebar-table-of-contents .h2 {
			font-weight: bold;
			margin-left: 0;
		}

		.sidebar-table-of-contents .h3 {
			margin-left: 1em;
		}

		.sidebar-table-of-contents .h4 {
			margin-left: 2em;
		}

		.sidebar h2.location {
			display: none;
		}

		.sidebar-elems {
			display: none;
		}

		/* Center the 'Expand for More' button */
		.expand-button {
			display: inline-block;
			/* Use inline-block for sizing */
			margin: 10px auto;
			/* Auto margins for horizontal centering */
			padding: 5px 10px;
			background-color: #007bff;
			color: white;
			text-align: center;
			cursor: pointer;
			border: none;
			border-radius: 5px;
			width: auto;
			/* Centering the button within its parent container */
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>