Implement button for toggling sidebar on all views (#8201)

* Implement button for toggling sidebar on all views

Closes https://github.com/FreshRSS/FreshRSS/issues/7673, https://github.com/FreshRSS/FreshRSS/issues/7100, https://github.com/FreshRSS/FreshRSS/issues/6119, https://github.com/FreshRSS/FreshRSS/issues/5338, https://github.com/FreshRSS/FreshRSS/issues/2792, https://github.com/FreshRSS/FreshRSS/issues/4224, https://github.com/FreshRSS/FreshRSS/issues/4136

https://github.com/user-attachments/assets/0629e465-6450-440e-b38b-430e9ff73ef9

Keyboard shortcut for doing the same: <kbd>t</kbd>

* Partially fix other views

Repartition page looks broken on Swage

* Correction

`close-aside` wasn't meant to be removed

* i18n(conf): fr

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* make fix-all

* Fix settings slider not opening in reader view

* make readme

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

5 files changed, 98 insertions, 44 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 73848060b..50dc31bb9 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -922,6 +922,64 @@ function init_posts() {
 	}
 }
 
+function toggle_aside_click(manual = true) {
+	const aside = document.querySelector('.aside');
+	const toggle_aside = document.querySelector('#nav_menu_toggle_aside button');
+	if (!toggle_aside) {
+		return;
+	}
+
+	const active = toggle_aside.classList.contains('active');
+	if (active) {
+		toggle_aside.classList.remove('active');
+		aside.classList.remove('visible');
+		aside.style.display = 'none';
+	} else {
+		toggle_aside.classList.add('active');
+		aside.classList.add('visible');
+		aside.style.display = '';
+	}
+
+	if (manual && ['normal', 'reader'].includes(context.current_view)) {
+		sessionStorage.setItem(`FreshRSS_aside-toggled_${context.current_view}`, !active ? 1 : 0);
+	}
+}
+
+function init_nav_menu() {
+	const aside = document.querySelector('.aside');
+	const toggle_aside = document.querySelector('#nav_menu_toggle_aside button');
+	if (!toggle_aside) {
+		return;
+	}
+
+	function sync(e) {
+		const active = toggle_aside.classList.contains('active');
+		if ((e.matches && active) || (!e.matches && !active)) {
+			toggle_aside_click(false);
+		}
+	}
+
+	const media = window.matchMedia('(max-width: 840px)');
+	media.onchange = sync;
+
+	const state = sessionStorage.getItem(`FreshRSS_aside-toggled_${context.current_view}`);
+	if (state !== null) {
+		const active = toggle_aside.classList.contains('active');
+		if (state != active) toggle_aside_click(false);
+	}
+	if (getComputedStyle(aside).display !== 'none') {
+		if (context.current_view === 'normal') aside.classList.add('visible');
+		sync(media);
+	}
+	const close_aside = [
+		document.querySelector('.aside a.toggle_aside'),
+		document.querySelector('a.close-aside'), // background of aside (#close)
+	];
+
+	toggle_aside.addEventListener('click', toggle_aside_click);
+	close_aside.forEach(close => close.addEventListener('click', toggle_aside_click));
+}
+
 function rememberOpenCategory(category_id, isOpen) {
 	if (context.display_categories === 'remember') {
 		const open_categories = JSON.parse(localStorage.getItem('FreshRSS_open_categories') || '{}');
@@ -1204,6 +1262,7 @@ function init_shortcuts() {
 		if (k === s.reading_view) { delayedClick(document.querySelector('#nav_menu_views .view-reader')); ev.preventDefault(); return; }
 		if (k === s.global_view) { delayedClick(document.querySelector('#nav_menu_views .view-global')); ev.preventDefault(); return; }
 		if (k === s.toggle_media) { toggle_media(); ev.preventDefault(); }
+		if (k === s.toggle_aside) { toggle_aside_click(); ev.preventDefault(); }
 	});
 }
 
@@ -2226,6 +2285,7 @@ function init_main_afterDOM() {
 	init_notifications();
 	init_csp_alert();
 	init_confirm_action();
+	init_nav_menu();
 	const stream = document.getElementById('stream');
 	if (stream) {
 		init_load_more(stream);
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 592f49167..13e6543cb 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -981,6 +981,10 @@ main.post .drop-section li.item.feed a:hover .icon {
 			filter: brightness(1);
 		}
 	}
+
+	.btn {
+		box-sizing: content-box;
+	}
 }
 
 .flux {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 345622b82..0055a4979 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -981,6 +981,10 @@ main.post .drop-section li.item.feed a:hover .icon {
 			filter: brightness(1);
 		}
 	}
+
+	.btn {
+		box-sizing: content-box;
+	}
 }
 
 .flux {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 4d95990b6..6f11c4d22 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1913,6 +1913,10 @@ a.website:hover .favicon {
 	z-index: 50;
 }
 
+.aside:not(.visible) ~ #nav_entries {
+	display: none;
+}
+
 #nav_entries button {
 	background-color: transparent;
 	display: table-cell;
@@ -2356,7 +2360,6 @@ html.slider-active {
 .nav-login,
 .aside .toggle_aside,
 #slider .toggle_aside,
-.nav_menu .toggle_aside,
 .configure .dropdown-header-close {
 	display: none;
 }
@@ -2372,30 +2375,15 @@ html.slider-active {
 
 /*=== READER */
 /*===========*/
-.reader .nav_menu .toggle_aside {
-	display: inline-block;
-}
-
-.reader .aside .toggle_aside {
-	padding: 1rem 0px;
-	display: block;
-	width: 100%;
-}
-
 .reader .aside {
 	display: none;
-	width: 0;
 }
 
-.reader .aside:target {
+.reader .aside.visible {
 	display: table-cell;
 	width: 300px;
 }
 
-.reader .aside_feed .configure-feeds {
-	margin-top: 10px;
-}
-
 .reader .flux {
 	padding: 1rem 0 2rem;
 }
@@ -2478,7 +2466,7 @@ html.slider-active {
 		display: none;
 	}
 
-	.aside:target {
+	.aside.visible {
 		box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
@@ -2668,7 +2656,7 @@ html.slider-active {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside,
+	.aside.visible + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
 		background-color: var(--frss-modal-background-color-transparent);
 		display: block;
@@ -2682,10 +2670,14 @@ html.slider-active {
 		z-index: 99;
 	}
 
-	.nav_mobile {
+	.nav_menu.nav_mobile {
 		display: block;
 	}
 
+	.nav_mobile {
+		display: initial;
+	}
+
 	.aside {
 		position: fixed;
 		top: 0; bottom: 0;
@@ -2695,8 +2687,8 @@ html.slider-active {
 		z-index: 100;
 	}
 
-	.aside:target,
-	.reader .aside:target {
+	.aside.visible,
+	.reader .aside.visible {
 		width: 90%;
 		height: 100vh;
 	}
@@ -2743,6 +2735,7 @@ html.slider-active {
 	}
 
 	#nav_entries {
+		display: table !important;
 		width: 100%;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 9e4d7cd32..684ad2f81 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1913,6 +1913,10 @@ a.website:hover .favicon {
 	z-index: 50;
 }
 
+.aside:not(.visible) ~ #nav_entries {
+	display: none;
+}
+
 #nav_entries button {
 	background-color: transparent;
 	display: table-cell;
@@ -2356,7 +2360,6 @@ html.slider-active {
 .nav-login,
 .aside .toggle_aside,
 #slider .toggle_aside,
-.nav_menu .toggle_aside,
 .configure .dropdown-header-close {
 	display: none;
 }
@@ -2372,30 +2375,15 @@ html.slider-active {
 
 /*=== READER */
 /*===========*/
-.reader .nav_menu .toggle_aside {
-	display: inline-block;
-}
-
-.reader .aside .toggle_aside {
-	padding: 1rem 0px;
-	display: block;
-	width: 100%;
-}
-
 .reader .aside {
 	display: none;
-	width: 0;
 }
 
-.reader .aside:target {
+.reader .aside.visible {
 	display: table-cell;
 	width: 300px;
 }
 
-.reader .aside_feed .configure-feeds {
-	margin-top: 10px;
-}
-
 .reader .flux {
 	padding: 1rem 0 2rem;
 }
@@ -2478,7 +2466,7 @@ html.slider-active {
 		display: none;
 	}
 
-	.aside:target {
+	.aside.visible {
 		box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
@@ -2668,7 +2656,7 @@ html.slider-active {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside,
+	.aside.visible + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
 		background-color: var(--frss-modal-background-color-transparent);
 		display: block;
@@ -2682,10 +2670,14 @@ html.slider-active {
 		z-index: 99;
 	}
 
-	.nav_mobile {
+	.nav_menu.nav_mobile {
 		display: block;
 	}
 
+	.nav_mobile {
+		display: initial;
+	}
+
 	.aside {
 		position: fixed;
 		top: 0; bottom: 0;
@@ -2695,8 +2687,8 @@ html.slider-active {
 		z-index: 100;
 	}
 
-	.aside:target,
-	.reader .aside:target {
+	.aside.visible,
+	.reader .aside.visible {
 		width: 90%;
 		height: 100vh;
 	}
@@ -2743,6 +2735,7 @@ html.slider-active {
 	}
 
 	#nav_entries {
+		display: table !important;
 		width: 100%;
 	}