From e0d7e90894d330c573202746039262c45410ac34 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Tue, 3 Dec 2024 19:40:08 -0500
Subject: [PATCH] ssb: Add an overlay for the sidebar so that it can be closed
 by tapping back on the content.

---
 apps/ssb.json           | 2 +-
 apps/ssb/tf-tab-news.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 3908ee46..22685c56 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&kAAjuIOpPmvwRqQKyFIexrTclB3vLAWGwfDgRy16npA=.sha256"
+	"previous": "&eNt+jXQkI/zOdhmV7bpHSY/m4son/xtQocFj14hxUII=.sha256"
 }
diff --git a/apps/ssb/tf-tab-news.js b/apps/ssb/tf-tab-news.js
index 443a4435..8321fb82 100644
--- a/apps/ssb/tf-tab-news.js
+++ b/apps/ssb/tf-tab-news.js
@@ -119,10 +119,12 @@ class TfTabNewsElement extends LitElement {
 
 	show_sidebar() {
 		this.renderRoot.getElementById('sidebar').style.display = 'block';
+		this.renderRoot.getElementById('sidebar_overlay').style.display = 'block';
 	}
 
 	hide_sidebar() {
 		this.renderRoot.getElementById('sidebar').style.display = 'none';
+		this.renderRoot.getElementById('sidebar_overlay').style.display = 'none';
 	}
 
 	async channel_toggle_subscribed() {
@@ -169,7 +171,7 @@ class TfTabNewsElement extends LitElement {
 			</div>`;
 		}
 		return html`
-			<div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0" id="sidebar">
+			<div class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left" style="width: 2in; left: 0; z-index: 5" id="sidebar">
 				<div class="w3-right w3-button w3-hide-large" @click=${this.hide_sidebar}>&times;</div>
 				${this.hash.startsWith('##') && this.channels.indexOf(this.hash.substring(2)) == -1 ?
 					html`
@@ -186,6 +188,7 @@ class TfTabNewsElement extends LitElement {
 						style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}>#${x} ${this.unread_status(x)}</a>
 				`)}
 			</div>
+			<div class="w3-overlay" id="sidebar_overlay" @click=${this.hide_sidebar}></div>
 			<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
 				<div id="show_sidebar" class="w3-left w3-button w3-hide-large" @click=${this.show_sidebar}>&#9776;</div>
 				<p>