sidebar localStorage

6 files changed, 96 insertions, 25 deletions

diff --git a/scripts/darkmode.js b/scripts/darkmode.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/scripts/darkmode.js
@@ -0,0 +1 @@
+
diff --git a/scripts/global.js b/scripts/global.js
index df82ef6..48a16df 100644
--- a/scripts/global.js
+++ b/scripts/global.js
@@ -19,3 +19,14 @@ function isDarkMode() {
 		return false
 	}
 }
+
+// RETURN VALUE
+//	TYPE		: bool
+//	DESCRIPTION	: true = sidebar open (fallback); false = sidebar close;
+function isSidebarOpen() {
+	if (localStorage.getItem("sidebar") == "closed") {
+		return false
+	} else {
+		return true
+	}
+}
diff --git a/scripts/globalElements.js b/scripts/globalElements.js
index 01d8516..381f564 100644
--- a/scripts/globalElements.js
+++ b/scripts/globalElements.js
@@ -1,5 +1,6 @@
 // DEPENDENCIES:
 // * /scripts/global.js
+// * /scripts/sidebar.js
 function updateGlobalElements() {
 	if (isLangIndonesia()) {
 		document.getElementById("lang-switcher-text").innerHTML = "Baca dalam Bahasa Inggris";
@@ -10,4 +11,10 @@ function updateGlobalElements() {
 	} else {
 		document.getElementById("lang-switcher-text").innerHTML = "Read in Indonesia";
 	}
+
+	if (isSidebarOpen() && document.body.clientWidth >= 1000) {
+		openSidebar(false);
+	} else {
+		closeSidebar(false);
+	}
 }
diff --git a/scripts/lesson.js b/scripts/lesson.js
index 0c0cf47..5901b35 100644
--- a/scripts/lesson.js
+++ b/scripts/lesson.js
@@ -138,7 +138,11 @@ function loadLesson(subject, chapter, lesson) {
 					const md = markdownit({
 						"html": true
 					});
-					container.innerHTML = md.render(data);
+					data = data.replaceAll("!---(", `\n<details>\n`);
+					data = data.replaceAll(")---!", `\n</details>\n`);
+					data = data.replaceAll("#--(", `\n<summary>\n`);
+					data = data.replaceAll(")--#", `\n</summary>\n`);
+					container.innerHTML += md.render(data);
 				}).then(() => {
 					MathJax.typeset();
 				}).then(() => {
diff --git a/scripts/localStorage.js b/scripts/localStorage.js
index c5eb43d..b5753fd 100644
--- a/scripts/localStorage.js
+++ b/scripts/localStorage.js
@@ -8,6 +8,14 @@ function langEnglish() {
 	window.location.reload();
 }
 
+function setSidebarStorage(open) {
+	if (open) {
+		localStorage.setItem("sidebar", "open");
+	} else {
+		localStorage.setItem("sidebar", "closed")
+	}
+}
+
 function switchLang() {
 	switchLangStorage();
 	window.location.reload();
diff --git a/scripts/sidebar.js b/scripts/sidebar.js
index 5a82e89..542eb4d 100644
--- a/scripts/sidebar.js
+++ b/scripts/sidebar.js
@@ -3,41 +3,81 @@ function toggleNav() {
 	const sStyle = window.getComputedStyle(sidebar);
 
 	if (sStyle.visibility == "hidden") {
-		if (document.body.clientWidth >= 1000) {
-			document.getElementById("main").style.marginLeft = "360px";
+		openSidebar(true);
+	} else {
+		closeSidebar(true);
+	}
+}
 
-			try {
-				document.getElementById("banner").style.marginLeft = "375px";
-				document.getElementById("topbtn").style.left = "385px";
-			} catch {
-				
-			}
+function openSidebar(useAnim) {
+	if (useAnim) {
+		document.getElementById("main").style.removeProperty("transition");
+		document.getElementById("banner").style.removeProperty("transition");
+		document.getElementById("topbtn").style.removeProperty("transition");
+		document.getElementById("chip-container").style.removeProperty("transition");
+		document.getElementById("sidebar").style.removeProperty("transition");
+	} else {
+		document.getElementById("main").style.transition = "none";
+		document.getElementById("banner").style.transition = "none";
+		document.getElementById("topbtn").style.transition = "none";
+		document.getElementById("chip-container").style.transition = "none";
+		document.getElementById("sidebar").style.transition = "none";
+	}
 
-			try {
-				document.getElementById("chip-container").style.marginLeft = "355px";
-			} catch {
+	if (document.body.clientWidth >= 1000) {
+		document.getElementById("main").style.marginLeft = "360px";
 
-			}
-		}
-		
-		document.getElementById("sidebar").style.visibility = "visible";
-		document.getElementById("sidebar").style.opacity = "1";
-	} else {
-		document.getElementById("main").style.marginLeft = "0";
-		document.getElementById("sidebar").style.visibility = "hidden";
-		document.getElementById("sidebar").style.opacity = "0";
-		
 		try {
-			document.getElementById("banner").style.marginLeft = "20px";
-			document.getElementById("topbtn").style.left = "30px";
+			document.getElementById("banner").style.marginLeft = "375px";
+			document.getElementById("topbtn").style.left = "385px";
 		} catch {
 			
 		}
 
 		try {
-			document.getElementById("chip-container").style.marginLeft = "0px";
+			document.getElementById("chip-container").style.marginLeft = "355px";
 		} catch {
 
 		}
 	}
+	
+	document.getElementById("sidebar").style.visibility = "visible";
+	document.getElementById("sidebar").style.opacity = "1";
+
+	setSidebarStorage(true);
+}
+
+function closeSidebar(useAnim) {
+	if (useAnim) {
+		document.getElementById("main").style.removeProperty("transition");
+		document.getElementById("banner").style.removeProperty("transition");
+		document.getElementById("topbtn").style.removeProperty("transition");
+		document.getElementById("chip-container").style.removeProperty("transition");
+		document.getElementById("sidebar").style.removeProperty("transition");
+	} else {
+		document.getElementById("main").style.transition = "none";
+		document.getElementById("banner").style.transition = "none";
+		document.getElementById("topbtn").style.transition = "none";
+		document.getElementById("chip-container").style.transition = "none";
+		document.getElementById("sidebar").style.transition = "none";
+	}
+	
+	document.getElementById("main").style.marginLeft = "0";
+	document.getElementById("sidebar").style.visibility = "hidden";
+	document.getElementById("sidebar").style.opacity = "0";
+	
+	try {
+		document.getElementById("banner").style.marginLeft = "20px";
+		document.getElementById("topbtn").style.left = "30px";
+	} catch {
+		
+	}
+
+	try {
+		document.getElementById("chip-container").style.marginLeft = "0px";
+	} catch {
+
+	}
+
+	setSidebarStorage(false);
 }