Mobile responsive template preparation (#2071)

* Mobile responsive template

* Fix sidebar mobile conflict

* Lint fix

app/javascript/controllers/sidebar_controller.js

@@ -7,7 +7,7 @@ export default class extends Controller {
     config: Object,
   };
 
-  static targets = ["leftPanel", "rightPanel", "content"];
+  static targets = ["leftPanel", "leftPanelMobile", "rightPanel", "content"];
 
   initialize() {
     this.leftPanelOpen = this.configValue.left_panel.is_open;
@@ -20,6 +20,16 @@ export default class extends Controller {
     this.#persistPreference("show_sidebar", this.leftPanelOpen);
   }
 
+  toggleLeftPanelMobile() {
+    if (this.leftPanelOpen) {
+      this.leftPanelMobileTarget.classList.remove("hidden");
+      this.leftPanelOpen = false;
+    } else {
+      this.leftPanelMobileTarget.classList.add("hidden");
+      this.leftPanelOpen = true;
+    }
+  }
+
   toggleRightPanel() {
     this.rightPanelOpen = !this.rightPanelOpen;
     this.#updatePanelWidths();
@@ -27,7 +37,6 @@ export default class extends Controller {
   }
 
   #updatePanelWidths() {
-    this.contentTarget.style.maxWidth = `${this.#contentMaxWidth()}px`;
     this.leftPanelTarget.style.width = `${this.#leftPanelWidth()}px`;
     this.rightPanelTarget.style.width = `${this.#rightPanelWidth()}px`;
     this.rightPanelTarget.style.overflow = this.#rightPanelOverflow();
@@ -61,18 +70,6 @@ export default class extends Controller {
     return "hidden";
   }
 
-  #contentMaxWidth() {
-    if (!this.leftPanelOpen && !this.rightPanelOpen) {
-      return 1024;
-    }
-
-    if (this.leftPanelOpen && !this.rightPanelOpen) {
-      return 896;
-    }
-
-    return 768;
-  }
-
   #persistPreference(field, value) {
     fetch(`/users/${this.userIdValue}`, {
       method: "PATCH",