Merge pull request #14418 from craftcms/feature/slideout-sidebar-toggle

Allow sidebar toggling on wide slideouts

CHANGELOG-WIP.md

@@ -15,6 +15,7 @@
 - Entries can now have multiple authors. ([#12380](https://github.com/craftcms/cms/pull/12380))
 - Entry chips, cards, and blocks are now tinted according to their entry type’s color. ([#14187](https://github.com/craftcms/cms/pull/14187))
 - Quick Post widgets now create entries via slideouts. ([#14228](https://github.com/craftcms/cms/pull/14228))
+- Slideout sidebars are now always toggleable; not just when the slideout is too narrow to show the sidebar alongside the content. ([#14418](https://github.com/craftcms/cms/pull/14418))
 - The “Save as a new entry” action is now available to all users with the “Create entries” permission, and will create a new unpublished draft rather than a fully-saved entry. ([#9577](https://github.com/craftcms/cms/issues/9577), [#10244](https://github.com/craftcms/cms/discussions/10244))
 - Entry conditions can now have a “Matrix field” rule. ([#13794](https://github.com/craftcms/cms/discussions/13794))
 - Money field condition rules now use money inputs. ([#14148](https://github.com/craftcms/cms/pull/14148))

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Slideout sidebars are now always toggleable; not just when the slideout is too narrow to show the sidebar alongside the content. ([#14418](https://github.com/craftcms/cms/pull/14418))
 - Field Layout Designers now hide the component library sidebar in favor of “Add” disclosure menus, when they’re too narrow to show the sidebar alongside configured tabs. ([#14411](https://github.com/craftcms/cms/pull/14411))
 
 ## 5.0.0-beta.2 - 2024-02-15

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;

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