Basic sidebar expander (#15735)

.changelog/15735.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add a button for expanding the Task sidebar to full width
+```

ui/app/components/task-context-sidebar.hbs

@@ -1,6 +1,6 @@
 <Portal @target="log-sidebar-portal">
 	<div
-		class="sidebar task-context-sidebar has-subnav {{if this.isSideBarOpen "open"}}"
+		class="sidebar task-context-sidebar has-subnav {{if this.wide "wide"}} {{if this.isSideBarOpen "open"}}"
 		{{on-click-outside
 			@fns.closeSidebar
 			capture=true
@@ -40,5 +40,12 @@
 
 
 	{{/if}}
+		<button
+			class="button is-borderless widener"
+			type="button"
+			{{on "click" this.toggleWide}}
+		>
+			{{x-icon (if this.wide "arrow-right" "arrow-left")}}
+		</button>
 	</div>
 </Portal>

ui/app/components/task-context-sidebar.js

@@ -1,5 +1,7 @@
 // @ts-check
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class TaskContextSidebarComponent extends Component {
   get isSideBarOpen() {
@@ -13,4 +15,9 @@ export default class TaskContextSidebarComponent extends Component {
       action: () => this.args.fns.closeSidebar(),
     },
   ];
+
+  @tracked wide = false;
+  @action toggleWide() {
+    this.wide = !this.wide;
+  }
 }

ui/app/styles/components/sidebar.scss

@@ -7,7 +7,7 @@ $subNavOffset: 49px;
   width: 750px;
   padding: 24px;
   right: 0%;
-  overflow-y: auto;
+  overflow: visible;
   bottom: 0;
   top: $topNavOffset;
   transform: translateX(100%);
@@ -21,6 +21,21 @@ $subNavOffset: 49px;
   &.has-subnav {
     top: calc($topNavOffset + $subNavOffset);
   }
+
+  &.wide {
+    width: calc(100vw - $gutter-width - 1rem);
+  }
+
+  .button.widener {
+    position: absolute;
+    left: 0;
+    top: calc(50% - 16px);
+    width: 32px;
+    height: 32px;
+    left: -16px;
+    box-shadow: -5px 0 10px -5px rgb(0 0 0 / 20%);
+    border-radius: 16px;
+  }
 }
 
 .sidebar-content {