show/hide switcher for the sidebar

src/public/javascripts/desktop.js

@@ -31,6 +31,7 @@ import dateNoteService from './services/date_notes.js';
 import sidebarService from './services/sidebar.js';
 import importService from './services/import.js';
 import keyboardActionService from "./services/keyboard_actions.js";
+import splitService from "./services/split.js";
 
 window.glob.isDesktop = utils.isDesktop;
 window.glob.isMobile = utils.isMobile;
@@ -174,6 +175,8 @@ noteTooltipService.setupGlobalTooltip();
 
 noteAutocompleteService.init();
 
+splitService.setupSplitWithSidebar();
+
 if (utils.isElectron()) {
     import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
 }

src/public/javascripts/services/entrypoints.js

@@ -286,11 +286,6 @@ function registerEntrypoints() {
 
         searchNotesService.searchInSubtree(node.data.noteId);
     });
-
-    Split(['#left-pane', '#center-pane', '#right-pane'], {
-        sizes: [25, 50, 25],
-        gutterSize: 5
-    });
 }
 
 export default {

src/public/javascripts/services/sidebar.js

@@ -1,22 +1,31 @@
 import bundleService from "./bundle.js";
 import ws from "./ws.js";
 import optionsService from "./options.js";
+import splitService from "./split.js";
 
 const $sidebar = $("#right-pane");
-const $sidebarContainer = $sidebar.find('.sidebar-container');
+const $sidebarContainer = $('#sidebar-container');
 
-const $showSideBarButton = $sidebar.find(".show-sidebar-button");
-const $hideSidebarButton = $sidebar.find(".hide-sidebar-button");
+const $showSideBarButton = $("#show-sidebar-button");
+const $hideSidebarButton = $("#hide-sidebar-button");
+
+$showSideBarButton.hide();
 
 $hideSidebarButton.on('click', () => {
     $sidebar.hide();
     $showSideBarButton.show();
+    $hideSidebarButton.hide();
+
+    splitService.setupSplitWithoutSidebar();
 });
 
 // FIXME shoud run note loaded!
 $showSideBarButton.on('click', () => {
     $sidebar.show();
     $showSideBarButton.hide();
+    $hideSidebarButton.show();
+
+    splitService.setupSplitWithSidebar();
 });
 
 class Sidebar {

src/public/javascripts/services/split.js

@@ -0,0 +1,28 @@
+let instance;
+
+function setupSplitWithSidebar() {
+    if (instance) {
+        instance.destroy();
+    }
+
+    instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
+        sizes: [25, 50, 25],
+        gutterSize: 5
+    });
+}
+
+function setupSplitWithoutSidebar() {
+    if (instance) {
+        instance.destroy();
+    }
+
+    instance = Split(['#left-pane', '#center-pane'], {
+        sizes: [25, 75],
+        gutterSize: 5
+    });
+}
+
+export default {
+    setupSplitWithSidebar,
+    setupSplitWithoutSidebar
+};

src/public/stylesheets/desktop.css

@@ -398,16 +398,11 @@ body {
     transition: transform 120ms ease-in-out;
 }
 
-.hide-sidebar-button {
-    color: var(--main-text-color);
-    background: none;
-    border: 1px solid transparent;
-    padding: 2px 8px 2px 8px;
-    border-radius: 2px;
-}
-
-.hide-sidebar-button:hover {
-    border-color: var(--button-border-color);
+#hide-sidebar-button, #show-sidebar-button {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 100000;
 }
 
 #right-pane {

src/views/sidebar.ejs

@@ -1,8 +1,6 @@
-<div id="right-pane" class="hide-in-zen-mode">
-    <div style="text-align: center; margin-bottom: 5px;">
-        <button class="hide-sidebar-button">hide sidebar <span class="bx bx-chevrons-right"></span></button>
-    </div>
+<button id="hide-sidebar-button" class="btn btn-sm icon-button bx bx-chevrons-right" title="Hide sidebar"></button>
+<button id="show-sidebar-button" class="btn btn-sm icon-button bx bx-chevrons-left" title="Show sidebar"></button>
 
-    <div class="sidebar-container">
-    </div>
+<div id="right-pane" class="hide-in-zen-mode">
+    <div id="sidebar-container"></div>
 </div>

src/views/title.ejs

@@ -65,8 +65,6 @@
                         <a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
                     </div>
                 </div>
-
-                <button class="btn btn-sm icon-button bx bx-chevrons-left show-sidebar-button" title="Show sidebar"></button>
             </div>
         </div>
     </div>