feat: Collapsible sidebar (#1721)

* wip

* styling, add keyboard shortcut

* tweak styling

app/stores/UiStore.js

@@ -23,6 +23,7 @@ class UiStore {
   @observable editMode: boolean = false;
   @observable tocVisible: boolean = false;
   @observable mobileSidebarVisible: boolean = false;
+  @observable sidebarCollapsed: boolean = false;
   @observable toasts: Map<string, Toast> = new Map();
 
   constructor() {
@@ -51,6 +52,7 @@ class UiStore {
 
     // persisted keys
     this.languagePromptDismissed = data.languagePromptDismissed;
+    this.sidebarCollapsed = data.sidebarCollapsed;
     this.tocVisible = data.tocVisible;
     this.theme = data.theme || "system";
 
@@ -107,6 +109,21 @@ class UiStore {
     this.activeCollectionId = undefined;
   };
 
+  @action
+  collapseSidebar = () => {
+    this.sidebarCollapsed = true;
+  };
+
+  @action
+  expandSidebar = () => {
+    this.sidebarCollapsed = false;
+  };
+
+  @action
+  toggleCollapsedSidebar = () => {
+    this.sidebarCollapsed = !this.sidebarCollapsed;
+  };
+
   @action
   showTableOfContents = () => {
     this.tocVisible = true;
@@ -190,6 +207,7 @@ class UiStore {
   get asJson(): string {
     return JSON.stringify({
       tocVisible: this.tocVisible,
+      sidebarCollapsed: this.sidebarCollapsed,
       languagePromptDismissed: this.languagePromptDismissed,
       theme: this.theme,
     });