scrapbox custom css js

index.js

window.addEventListener('load', () => {
	/* initializer */
	const menu = [...$(".global-menu")[0].children];
	const lastIndex = menu.findIndex(v => v.className === "divider") - 1;
	const hasStreamParam = location.pathname.includes("stream");
	$("#app-container").attr("data-stream", hasStreamParam);
	setStreamBtn();
	setProjects();

	/* event */
	function setStreamBtn() {
		$(".global-menu > li.section > a:last").show();
		const isStream = $("#app-container").attr("data-stream") === "true";
		const query = isStream ? ".left-box a.btn" : ".global-menu > li.section > a:last";
		const streamBtn = $(query).clone(true).text("Stream Mode");
		streamBtn.click(function() {
			$("#app-container").attr("data-stream", !isStream);
		})
		$(".col-menu").empty().append(streamBtn);
		$(".global-menu > li.section > a:last").hide();
	}
	function sleep(msec) {
	   return new Promise(function(resolve) {
	      setTimeout(function() {resolve()}, msec);
	   })
	}
	async function setProjects() {
		await sleep(1000);
		$(".left-box > li").remove();
		$(".global-menu").children().each((i, e) => {
			if (i === 0 || i >= lastIndex ) {
				return;
			}
			const item = $(e).clone(true);
			$(".left-box").append(item);
		})
	}

	/* observer */
	// changeProject
	const changeProjectCallback = function(mutationsList, observer) {
	    for(let mutation of mutationsList) {
			$(".left-box").children("li").each((i, e) => {
				const target = $(e).children("a");
				if (target.attr("href").includes(mutation.target.pathname)) {
					target.addClass("selected");
				} else {
					target.removeClass("selected");
				}
	    	});
			setStreamBtn();
	    }
	};
	const changeProjectObserver = new MutationObserver(changeProjectCallback);
	changeProjectObserver.observe(
		document.querySelector(".left-box a.btn"), 
		{ attributes: true }
	);
	// toggleStream
	const toggleStreamCallback = function(mutationsList, observer) {
		setProjects();
		setStreamBtn();
	};
	const toggleStreamObserver = new MutationObserver(toggleStreamCallback);
	toggleStreamObserver.observe(
		document.getElementById("app-container"), 
		{ attributes: true }
	);
});

style.css

.quick-launch .left-box .btn, .quick-launch .plan-badge, .quick-launch .private-badge {
     display:none;
}
 .quick-launch .left-box, .quick-launch .right-box {
     align-items: center;
     height: 100% 
}
 .quick-launch .flex-box .flex-item.text-right {
     flex-grow: 0;
}
 .quick-launch .grid-size-range, .quick-launch .page-sort-menu, .quick-launch .left-box > li > a {
     height: 28px;
     line-height: 26px;
     min-height: 0;
}
 .quick-launch .page-sort-menu .tool-btn {
     padding: 0;
     margin: 0 0 2px 4px;
}
 .quick-launch .left-box > li {
     list-style: none;
}
 .quick-launch .left-box > li + li {
     margin-left: 8px;
}
 .quick-launch .left-box > li > a {
     display: flex;
     align-items: center;
     color: #353b47;
     text-decoration: none;
     border-radius: 100px;
     padding: 0px 20px;
}
 .quick-launch .left-box > li > .selected {
     background: #39ac86 !important;
}
 .quick-launch .left-box > li > a:hover {
     background: rgba(0, 0, 0, 0.08);
}
 .quick-launch .left-box > li > a > .private-icon {
     display: flex;
     margin: 0 0 0 4px;
}
 .quick-launch .left-box > li > a > .private-icon > .kamon {
     width: 16px;
     height: 16px;
     line-height: 16px;
     font-size: 16px;
}
.col-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.col-menu a {
    cursor: pointer;
    padding: 4px;
    color: #39ac86 !important;
    text-decoration: none !important;
    border: none;
}
.col-menu a[href^="/stream"] {
    color: white !important;
}