From ad83e64795361dc9d5990a9dae4f91a3642109a0 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 30 Oct 2022 02:43:15 +0200
Subject: Fix sidebar and tabs on settings on small screens in admin UI
 (#19533)

---
 app/javascript/packs/public.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

(limited to 'app/javascript/packs')

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 5ff45fa55..786fc8ede 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -247,8 +247,31 @@ function main() {
     input.readonly = oldReadOnly;
   });
 
+  const toggleSidebar = () => {
+    const sidebar = document.querySelector('.sidebar ul');
+    const toggleButton = document.querySelector('.sidebar__toggle__icon');
+
+    if (sidebar.classList.contains('visible')) {
+      document.body.style.overflow = null;
+      toggleButton.setAttribute('aria-expanded', false);
+    } else {
+      document.body.style.overflow = 'hidden';
+      toggleButton.setAttribute('aria-expanded', true);
+    }
+
+    toggleButton.classList.toggle('active');
+    sidebar.classList.toggle('visible');
+  };
+
   delegate(document, '.sidebar__toggle__icon', 'click', () => {
-    document.querySelector('.sidebar ul').classList.toggle('visible');
+    toggleSidebar();
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleSidebar();
+    }
   });
 
   // Empty the honeypot fields in JS in case something like an extension
-- 
cgit