about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/packs/settings.js
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/flavours/glitch/packs/settings.js')
-rw-r--r--app/javascript/flavours/glitch/packs/settings.js43
1 files changed, 43 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js
new file mode 100644
index 000000000..31c88b2b5
--- /dev/null
+++ b/app/javascript/flavours/glitch/packs/settings.js
@@ -0,0 +1,43 @@
+import 'packs/public-path';
+import loadPolyfills from 'flavours/glitch/load_polyfills';
+import ready from 'flavours/glitch/ready';
+import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
+import 'cocoon-js-vanilla';
+
+function main() {
+  const { delegate } = require('@rails/ujs');
+
+  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', () => {
+    toggleSidebar();
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleSidebar();
+    }
+  });
+}
+
+loadPolyfills()
+  .then(main)
+  .then(loadKeyboardExtensions)
+  .catch(error => {
+    console.error(error);
+  });