A user script (for Violentmonkey etc.) which adds a few shortcuts to RemNote

RemNote-Pane-Management.user.js

// ==UserScript==
// @name        RemNote Pane Management
// @namespace   Violentmonkey Scripts
// @match       https://www.remnote.io/document/*
// @grant       none
// @version     0.1
// @author      Hannes Frank
// @description 25.11.2020, 15:37:16
// ==/UserScript==

console.info('Running User Script: RemNote Focus Mode');

const sidebarSelector = '#document-sidebar';
const leftPaneSelector = '#multiple-windows__document:first-child';
let leftPaneWidth = 50;

function remnoteEventListener(e) {  
    console.info(e);
    let activeElement = document.activeElement;
    
    if (e.code === 'Escape') {
      activeElement.blur();
    } else if (e.code === 'KeyS' && !e.ctrlKey && !e.shiftKey && e.altKey && !e.metaKey) {
      remnoteToggleSidebar(activeElement, e);
      // TODO: Only do this in multipane layouts.
    } else if (e.code === 'KeyH' && !e.ctrlKey && !e.shiftKey && e.altKey && !e.metaKey) {
      console.info('shrinkLeft', leftPaneWidth);
      shrinkLeft();
      e.preventDefault();
    } else if (e.code === 'KeyL' && !e.ctrlKey && !e.shiftKey && e.altKey && !e.metaKey) {
      expandLeft();
      e.preventDefault();
    }
}

document.addEventListener('keydown', function (e) {
  if (document.domain === 'www.remnote.io') {  
        remnoteEventListener(e);
    }
});

function remnoteIsSidebarActive() {
  // .style only lists inline style, which does not work the first time
    return getComputedStyle(document.querySelector(sidebarSelector)).display === 'flex';
}

function remnoteToggleSidebar(activeElement, e) {
    let sidebarDisplay = remnoteIsSidebarActive() ? 'none' : 'flex';
    document.querySelector(sidebarSelector).style.display = sidebarDisplay;
}
  
function shrinkLeft() {
  leftPaneWidth = Math.max(leftPaneWidth - 5, 10);
  updatePaneCSS();
}
  
function expandLeft() {
  leftPaneWidth = Math.min(leftPaneWidth + 5, 90);
  updatePaneCSS();
}
  
function updatePaneCSS() {
  document.querySelector(leftPaneSelector).style.flex = `1 0 ${leftPaneWidth}%`;
}

// Ideas
// - (display: grid) and change width of the two pages
//   - See roam spatial (ctrl + h/l) to move middle divider
//   - maximize either page
//   - use shortcut to set either page to small/wide
//   - use :focuswithin to display the current page wider
//   - use transform: scale to make a minimap

Installation

Click the Raw button and your extension (Tampermonkey, Violentmonkey) should pick up the script.

Usage

Default Shortcuts:

• Alt + S: Toggle SIdebar
• In two pane layout:
  • Alt + H: Move vertical divider left
  • Alt + L: Mover vertical divider right

You can configure those in the lines 23 to 30 before importing the script.