Allow sidebar toggling on wide slideouts

craftcms · Feb 17, 2024 · f7253a5 · f7253a5
1 parent d7c3cba
commit f7253a5
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 16 deletions.
diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -1663,7 +1663,6 @@ ul.icons {
     width: 36px;
   }
 
-  &.active,
   &.loading {
     cursor: default;
   }
@@ -5475,15 +5474,7 @@ $min2ColWidth: 400px;
 
 @container (width > 700px) {
   .slideout {
-    &.has-sidebar {
-      .pane-header:not(.so-visible) {
-        display: none;
-      }
-
-      .sidebar-btn {
-        display: none;
-      }
-
+    &.showing-sidebar {
       .so-body {
         display: flex;
         flex-direction: row;

diff --git a/src/web/assets/cp/src/js/CpScreenSlideout.js b/src/web/assets/cp/src/js/CpScreenSlideout.js
@@ -325,7 +325,6 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
         }
 
         if (data.sidebar) {
-          this.$container.addClass('has-sidebar');
           this.$sidebarBtn.removeClass('hidden');
           this.$sidebar.html(data.sidebar);
 
@@ -340,8 +339,15 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
           });
 
           this.hasSidebar = true;
+
+          // is the slideout wide enough to show it alongside the content?
+          if (this.$container.width() > 700) {
+            this.showSidebar();
+          } else {
+            this.hideSidebar();
+          }
         } else {
-          this.$container.removeClass('has-sidebar');
+          this.hideSidebar();
           this.$sidebarBtn.addClass('hidden');
           this.$sidebar.addClass('hidden').html('');
           this.hasSidebar = false;
@@ -407,6 +413,7 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
         return;
       }
 
+      this.$container.addClass('showing-sidebar');
       this.$body.scrollTop(0).addClass('no-scroll');
 
       this.$sidebar
@@ -447,6 +454,7 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
         return;
       }
 
+      this.$container.removeClass('showing-sidebar');
       this.$body.removeClass('no-scroll');
 
       this.$sidebar