From a7f7266114e539ef3d31fd8daf9e24c4fe493468 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Mon, 9 Jan 2023 17:00:29 -0500
Subject: [PATCH] Basic sidebar expander

---
 .changelog/15735.txt                       |  3 +++
 ui/app/components/task-context-sidebar.hbs |  9 ++++++++-
 ui/app/components/task-context-sidebar.js  |  7 +++++++
 ui/app/styles/components/sidebar.scss      | 17 ++++++++++++++++-
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 .changelog/15735.txt

diff --git a/.changelog/15735.txt b/.changelog/15735.txt
new file mode 100644
index 000000000000..4ee689066862
--- /dev/null
+++ b/.changelog/15735.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add a button for expanding the Task sidebar to full width
+```
diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
index 523e3c118c63..92f3b8d7e992 100644
--- a/ui/app/components/task-context-sidebar.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/app/components/task-context-sidebar.js b/ui/app/components/task-context-sidebar.js
index 31ce73aa3215..38491094c937 100644
--- a/ui/app/components/task-context-sidebar.js
+++ b/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;
+  }
 }
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 9c1c36294df4..76da1a621e2e 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/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 {