[Live-Site] - make sidebar collapsible

app/components/live-panel.hbs

@@ -1,4 +1,15 @@
 <div class='live-panel' data-test-live-panel>
+  <Reusables::IconButton
+    @id='toggle-panel'
+    @class='icon-button--md icon__sidebar__toggle'
+    @title='toggle sidebar panel'
+    @onClick={{@sidebarDisplayToggle}}
+    @icon={{if
+      @isExpanded
+      'material-symbols:fullscreen-exit'
+      'material-symbols:fullscreen'
+    }}
+  />
   {{#if (eq @role this.ROLES.host)}}
     <Reusables::IconButton
       @id='screen-share'

app/components/live-sidebar.hbs

@@ -1,6 +1,21 @@
-<div data-test-sidebar class='sidebar {{if this.isSideBarOpen "open" "close"}}'>
-  <div data-test-sidebar-participants class='sidebar__participants'>
-    <h4>Participants</h4>
+<div
+  data-test-sidebar
+  class='sidebar
+    {{if this.isSideBarOpen "open" "close"}}
+    {{if @isExpanded "sidebar--closes" "sidebar--opens"}}'
+>
+  <div
+    data-test-sidebar-participants
+    class='sidebar__participants
+      {{if
+        @isExpanded
+        "sidebar__participants--hide"
+        "sidebar__participants--open"
+      }}'
+  >
+    <h4
+      class='{{if @isExpanded "participants__heading--hide" ""}}'
+    >Participants</h4>
     <button
       data-test-sidebar-button
       class='sidebar__accordian-button'

app/controllers/live.js

@@ -31,11 +31,17 @@ export default class LiveController extends Controller {
   @tracked newRoomCode = '';
   @tracked isActiveEventFound;
   @tracked buttonText = '';
+  @tracked isExpanded = false;
+
   @globalRef('videoEl') videoEl;
   get liveService() {
     return getOwner(this).lookup('service:live');
   }
 
+  @action sidebarDisplayToggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
   constructor() {
     super(...arguments);
     setTimeout(() => {

app/styles/live-sidebar.module.css

@@ -1,6 +1,6 @@
 .sidebar {
   padding: 1rem 0;
-  width: 100%;
+  width: 0%;
   background-color: var(--color-sidebar);
   height: 100%;
   z-index: 2;
@@ -11,6 +11,30 @@
   box-sizing: border-box;
 }
 
+.sidebar--opens {
+  width: 90%;
+}
+
+.sidebar--closes {
+  width: 0%;
+}
+
+.sidebar__participants--hide {
+  display: none;
+}
+
+.sidebar__participants--open {
+  display: flex;
+}
+
+.participants__heading--hide {
+  display: none;
+}
+
+.participantsHeadingHide {
+  display: block;
+}
+
 .sidebar__accordian-button {
   all: unset;
   display: none;
@@ -33,7 +57,6 @@
 
 .sidebar__participants {
   width: 90%;
-  display: flex;
   justify-content: center;
   align-items: center;
   background: var(--color-white);
@@ -250,4 +273,4 @@
 .self {
   border: 3px solid var(--color-pink);
   background: var(--color-pink-low-opacity);
-}
+}

app/styles/live.module.css

@@ -32,9 +32,22 @@
 	aspect-ratio: 16/9;
 }
 
+.live__video-container--show {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+
 .container__sidebar {
 	display: flex;
-	width: 28%;
+	width: 0%;
+}
+
+.container__sidebar--show {
+  width: 28%;
+}
+
+.container__sidebar--hide {
+  width: 0%;
 }
 
 .live__panel-container {

app/templates/live.hbs

@@ -62,7 +62,8 @@
         <div class='live__container'>
           <div
             class='live__video-container
-              {{if this.liveService.isScreenShareOn "bg-black" ""}}'
+              {{if this.liveService.isScreenShareOn "bg-black" ""}}
+              {{if this.isExpanded "live__video-container--show" ""}}'
             data-test-video-container
           >
             {{! TODO - add skeleton to the whole structure }}
@@ -72,14 +73,23 @@
               <VideoScreen @src='/assets/starting-soon.mp4' />
             {{/if}}
           </div>
-          <div class='container__sidebar'>
+          <div
+            class='container__sidebar
+              {{if
+                this.isExpanded
+                "container__sidebar--hide"
+                "container__sidebar--show"
+              }}'
+          >
             {{#if this.isLoading}}
               <Reusables::Skeleton />
             {{else}}
               <LiveSidebar
                 @openKickoutModal={{this.openKickoutModal}}
                 @peers={{this.liveService.peers}}
                 @peerToRemove={{this.peerToRemove}}
+                @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+                @isExpanded={{this.isExpanded}}
               />
             {{/if}}
           </div>
@@ -95,6 +105,8 @@
               @buttonClickHandler={{this.buttonClickHandler}}
               @openRoomCodeModal={{this.toggleRoomCodeModal}}
               @openWarningModal={{this.toggleWarningModal}}
+              @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+              @isExpanded={{this.isExpanded}}
             />
           {{/if}}
         </div>

tests/integration/components/live-panel-test.js

@@ -10,10 +10,13 @@ module('Integration | Component | live-panel', function (hooks) {
     assert.expect(10);
     this.set('buttonClickHandler', () => {});
     this.set('toggleRoomCodeModal', () => {});
+    this.set('sidebarDisplayToggle', () => {});
     this.set('role', 'guest');
+    this.set('expanded', true);
 
     await render(
-      hbs`<LivePanel @buttonClickHandler={{this.buttonClickHandler}} @role={{this.role}} @openRoomCodeModal={{this.toggleRoomCodeModal}}/>`
+      hbs`<LivePanel @buttonClickHandler={{this.buttonClickHandler}} @role={{this.role}} @openRoomCodeModal={{this.toggleRoomCodeModal}} @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+              @isExpanded={{this.isExpanded}}/>`
     );
 
     assert.dom('[data-test-live-panel]').exists();
@@ -40,17 +43,21 @@ module('Integration | Component | live-panel', function (hooks) {
     };
     this.set('buttonClickHandler', () => {});
     this.set('toggleRoomCodeModal', () => {});
+    this.set('sidebarDisplayToggle', () => {});
     this.set('toggleWarningModal', () => {
       objToCheckFunctions.isOpenWarningModalWorks = true;
     });
     this.set('role', 'host');
+    this.set('expanded', true);
 
     await render(
       hbs`<LivePanel 
       @buttonClickHandler={{this.buttonClickHandler}} 
       @role={{this.role}} 
       @openRoomCodeModal={{this.toggleRoomCodeModal}}
       @openWarningModal={{this.toggleWarningModal}}
+      @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
+      @isExpanded={{this.isExpanded}}
       />`
     );