X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/4317/head:/resources/js/components/header-mobile-toggle.js

diff --git a/resources/js/components/header-mobile-toggle.js b/resources/js/components/header-mobile-toggle.js
index eccd4b8f0..f94f897f6 100644
--- a/resources/js/components/header-mobile-toggle.js
+++ b/resources/js/components/header-mobile-toggle.js
@@ -1,31 +1,40 @@
+import {Component} from './component';
 
-class HeaderMobileToggle {
+export class HeaderMobileToggle extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.toggleButton = elem.querySelector('.mobile-menu-toggle');
-        this.menu = elem.querySelector('.header-links');
-        this.open = false;
+    setup() {
+        this.elem = this.$el;
+        this.toggleButton = this.$refs.toggle;
+        this.menu = this.$refs.menu;
 
+        this.open = false;
         this.toggleButton.addEventListener('click', this.onToggle.bind(this));
         this.onWindowClick = this.onWindowClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
 
     onToggle(event) {
         this.open = !this.open;
         this.menu.classList.toggle('show', this.open);
+        this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         if (this.open) {
-            window.addEventListener('click', this.onWindowClick)
+            this.elem.addEventListener('keydown', this.onKeyDown);
+            window.addEventListener('click', this.onWindowClick);
         } else {
-            window.removeEventListener('click', this.onWindowClick)
+            this.elem.removeEventListener('keydown', this.onKeyDown);
+            window.removeEventListener('click', this.onWindowClick);
         }
         event.stopPropagation();
     }
 
+    onKeyDown(event) {
+        if (event.code === 'Escape') {
+            this.onToggle(event);
+        }
+    }
+
     onWindowClick(event) {
         this.onToggle(event);
     }
 
 }
-
-module.exports = HeaderMobileToggle;
\ No newline at end of file