feat(mobile): add button to toggle sidebar

src/public/app/layouts/mobile_layout.js

@@ -3,7 +3,7 @@ import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
+import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_button.js";
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
@@ -24,7 +24,6 @@ import RootContainer from "../widgets/containers/root_container.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
 import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
 import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
-import options from "../services/options.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 
 const MOBILE_CSS = `
@@ -142,14 +141,14 @@ export default class MobileLayout {
                     .child(new FlexContainer('row').contentSized()
                         .css('font-size', 'larger')
                         .css('align-items', 'center')
+                        .child(new ToggleSidebarButtonWidget().contentSized())
                         .child(new NoteTitleWidget()
                             .contentSized()
                             .css("position: relative;")
                             .css("top: 5px;")
-                            .css("padding-left", "0.5em")
-                        )
+                            .css("padding-left", "0.5em"))
                         .child(new MobileDetailMenuWidget(true).contentSized())
-                        .child(new CloseDetailButtonWidget().contentSized()))
+                    )
                     .child(new SharedInfoWidget())
                     .child(new FloatingButtons()
                         .child(new EditButton())

src/public/app/widgets/mobile_widgets/close_detail_button.js

@@ -1,16 +0,0 @@
-import BasicWidget from "../basic_widget.js";
-
-const TPL = `
-<button type="button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close" style="padding-top: 10px;">
-    <span aria-hidden="true">&times;</span>
-</button>`;
-
-class CloseDetailButtonWidget extends BasicWidget {
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
-    }
-}
-
-export default CloseDetailButtonWidget;

src/public/app/widgets/mobile_widgets/sidebar_container.js

@@ -12,7 +12,9 @@ export default class SidebarContainer extends FlexContainer {
         super.doRender();
 
         this.$widget.on("click", () => {
-            this.triggerEvent('activeScreenChanged', "detail");
+            this.triggerCommand('setActiveScreen', {
+                screen: "detail"
+            });
         });
     }
 

src/public/app/widgets/mobile_widgets/toggle_sidebar_button.js

@@ -0,0 +1,16 @@
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<button type="button" class="action-button bx bx-sidebar" style="padding-top: 10px;"></button>`;
+
+class ToggleSidebarButtonWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {
+            screen: 'tree'
+        }));
+    }
+}
+
+export default ToggleSidebarButtonWidget;