1 files changed, 44 insertions, 38 deletions

diff --git a/src/plugins/notebook/components/Sidebar.vue b/src/plugins/notebook/components/Sidebar.vue
index 26709dc53..c7476d035 100644
--- a/src/plugins/notebook/components/Sidebar.vue
+++ b/src/plugins/notebook/components/Sidebar.vue
@@ -4,24 +4,25 @@
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ sectionTitle }}</span>
+                <button
+                    class="c-icon-button c-icon-button--major icon-plus"
+                    @click="addSection"
+                >
+                    <span class="c-list-button__label">Add</span>
+                </button>
             </div>
         </div>
         <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
-                    @click="addSection"
-            >
-                <span class="c-button c-list-button__button icon-plus"></span>
-                <span class="c-list-button__label">Add {{ sectionTitle }}</span>
-            </button>
-            <SectionCollection class="c-sidebar__contents"
-                               :default-section-id="defaultSectionId"
-                               :selected-section-id="selectedSectionId"
-                               :domain-object="domainObject"
-                               :sections="sections"
-                               :section-title="sectionTitle"
-                               @defaultSectionDeleted="defaultSectionDeleted"
-                               @updateSection="sectionsChanged"
-                               @selectSection="selectSection"
+            <SectionCollection
+                class="c-sidebar__contents"
+                :default-section-id="defaultSectionId"
+                :selected-section-id="selectedSectionId"
+                :domain-object="domainObject"
+                :sections="sections"
+                :section-title="sectionTitle"
+                @defaultSectionDeleted="defaultSectionDeleted"
+                @updateSection="sectionsChanged"
+                @selectSection="selectSection"
             />
         </div>
     </div>
@@ -29,42 +30,47 @@
         <div class="c-sidebar__header-w">
             <div class="c-sidebar__header">
                 <span class="c-sidebar__header-label">{{ pageTitle }}</span>
+
+                <button
+                    class="c-icon-button c-icon-button--major icon-plus"
+                    @click="addPage"
+                >
+                    <span class="c-icon-button__label">Add</span>
+                </button>
             </div>
-            <button class="c-click-icon c-click-icon--major icon-x-in-circle"
-                    @click="toggleNav"
-            ></button>
         </div>
 
         <div class="c-sidebar__contents-and-controls">
-            <button class="c-list-button"
-                    @click="addPage"
-            >
-                <span class="c-button c-list-button__button icon-plus"></span>
-                <span class="c-list-button__label">Add {{ pageTitle }}</span>
-            </button>
-            <PageCollection ref="pageCollection"
-                            class="c-sidebar__contents"
-                            :default-page-id="defaultPageId"
-                            :selected-page-id="selectedPageId"
-                            :domain-object="domainObject"
-                            :pages="pages"
-                            :sections="sections"
-                            :sidebar-covers-entries="sidebarCoversEntries"
-                            :page-title="pageTitle"
-                            @defaultPageDeleted="defaultPageDeleted"
-                            @toggleNav="toggleNav"
-                            @updatePage="pagesChanged"
-                            @selectPage="selectPage"
+            <PageCollection
+                ref="pageCollection"
+                class="c-sidebar__contents"
+                :default-page-id="defaultPageId"
+                :selected-page-id="selectedPageId"
+                :domain-object="domainObject"
+                :pages="pages"
+                :sections="sections"
+                :sidebar-covers-entries="sidebarCoversEntries"
+                :page-title="pageTitle"
+                @defaultPageDeleted="defaultPageDeleted"
+                @toggleNav="toggleNav"
+                @updatePage="pagesChanged"
+                @selectPage="selectPage"
             />
         </div>
     </div>
+    <div class="c-sidebar__right-edge">
+        <button
+            class="c-icon-button c-icon-button--major icon-line-horz"
+            @click="toggleNav"
+        ></button>
+    </div>
 </div>
 </template>
 
 <script>
 import SectionCollection from './SectionCollection.vue';
 import PageCollection from './PageCollection.vue';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 export default {
     components: {