Change redit sidebar arrow.

reddit-hide-sidebar/index.js

 // ==UserScript==
 // @name         old.reddit hide sidebar
 // @namespace    http://hugo.hornquist.se
-// @version      1.1.2
+// @version      1.2.0
 // @description  Adds toggle to hide Reddit sidebar
 // @author       hugo@lysator.liu.se
 // @match        https://*.reddit.com/*
@@ -24,7 +24,32 @@
 	let sidebar = document.getElementsByClassName('side')[0];
 	sidebar.appendChild(div);
 
-	btn.onclick = () => sidebar.classList.toggle('hidden');
+	let svgns = 'http://www.w3.org/2000/svg'
+	let svg = document.createElementNS(svgns, 'svg');
+	svg.id = 'triangle-icon'
+	let path = document.createElementNS(svgns, 'path');
+	svg.setAttribute('viewBox', '0 0 100 100');
+	path.setAttribute('d', `M0 0L100 50L0 100`)
+
+	svg.appendChild(path)
+	btn.appendChild(svg)
+
+	btn.onclick = () => {
+		sidebar.classList.toggle('hidden');
+		let isHidden = sidebar.classList.contains('hidden')
+		let i = 0;
+		// Will run 50 times=
+		let intervalID = window.setInterval(() => {
+			let x = isHidden ? 2 * i : 100 - 2 * i;
+			path.setAttribute('d', `M${x} 0L${100 - x} 50L${x} 100`);
+			i += 1;
+		}, 10);
+		window.setTimeout(() => {
+			window.clearInterval(intervalID)
+			let x = isHidden ? 100 : 0;
+			path.setAttribute('d', `M${x} 0L${100 - x} 50L${x} 100`);
+		}, 500)
+	}
 
 	let style = document.createElement('style');
 
@@ -37,6 +62,7 @@
 		height: 2em;
 		display: grid;
 	top: 0;
+	padding: 0;
 }
 .side {
 	transition: 0.5s;
@@ -45,12 +71,13 @@
 .side.hidden {
 	 width: 0px;
 }
-.side.hidden button::before {
-	content: '<';
+#triangle-icon {
+	fill: black;
+}
+.res-nightmode #triangle-icon {
+	fill: white;
 }
-.side:not(.hidden) button::before {
-	content: '>';
-}`;
+`;
 
 	document.getElementsByTagName('head')[0].appendChild(style);
 })();