Made chapter toggle in book sidebar nav more consistent

- Now has a hover state to match other items.
- Now spans the full sidebar with like other items.
- Also updated chapter-toggle to a chapter-contents component, following
  the newer component system.

resources/js/components/chapter-contents.js

@@ -0,0 +1,37 @@
+import {slideUp, slideDown} from "../services/animations";
+
+/**
+ * @extends {Component}
+ */
+class ChapterContents {
+
+    setup() {
+        this.list = this.$refs.list;
+        this.toggle = this.$refs.toggle;
+
+        this.isOpen = this.toggle.classList.contains('open');
+        this.toggle.addEventListener('click', this.click.bind(this));
+    }
+
+    open() {
+        this.toggle.classList.add('open');
+        this.toggle.setAttribute('aria-expanded', 'true');
+        slideDown(this.list, 180);
+        this.isOpen = true;
+    }
+
+    close() {
+        this.toggle.classList.remove('open');
+        this.toggle.setAttribute('aria-expanded', 'false');
+        slideUp(this.list, 180);
+        this.isOpen = false;
+    }
+
+    click(event) {
+        event.preventDefault();
+        this.isOpen ?  this.close() : this.open();
+    }
+
+}
+
+export default ChapterContents;

resources/js/components/chapter-toggle.js

@@ -1,33 +0,0 @@
-import {slideUp, slideDown} from "../services/animations";
-
-class ChapterToggle {
-
-    constructor(elem) {
-        this.elem = elem;
-        this.isOpen = elem.classList.contains('open');
-        elem.addEventListener('click', this.click.bind(this));
-    }
-
-    open() {
-        const list = this.elem.parentNode.querySelector('.inset-list');
-        this.elem.classList.add('open');
-        this.elem.setAttribute('aria-expanded', 'true');
-        slideDown(list, 180);
-    }
-
-    close() {
-        const list = this.elem.parentNode.querySelector('.inset-list');
-        this.elem.classList.remove('open');
-        this.elem.setAttribute('aria-expanded', 'false');
-        slideUp(list, 180);
-    }
-
-    click(event) {
-        event.preventDefault();
-        this.isOpen ?  this.close() : this.open();
-        this.isOpen = !this.isOpen;
-    }
-
-}
-
-export default ChapterToggle;

resources/js/components/index.js

@@ -6,7 +6,7 @@ import attachmentsList from "./attachments-list.js"
 import autoSuggest from "./auto-suggest.js"
 import backToTop from "./back-to-top.js"
 import bookSort from "./book-sort.js"
-import chapterToggle from "./chapter-toggle.js"
+import chapterContents from "./chapter-contents.js"
 import codeEditor from "./code-editor.js"
 import codeHighlighter from "./code-highlighter.js"
 import codeTextarea from "./code-textarea.js"
@@ -63,7 +63,7 @@ const componentMapping = {
     "auto-suggest": autoSuggest,
     "back-to-top": backToTop,
     "book-sort": bookSort,
-    "chapter-toggle": chapterToggle,
+    "chapter-contents": chapterContents,
     "code-editor": codeEditor,
     "code-highlighter": codeHighlighter,
     "code-textarea": codeTextarea,