pezkuwi-subxt/docs/sdk/headers/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;
			link.textContent = header.textContent;
			link.className = header.tagName.toLowerCase();

			toc.appendChild(link);

			if (header.id == "modules" && header.textContent == "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;
		}

		createToC();
		hideSidebarElements();

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

<style>

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>