[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,18 @@
-<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"}}'
+  >
+    <h4
+      class='{{if @isExpanded "participants__heading--hide" ""}}'
+    >Participants</h4>
     <button
       data-test-sidebar-button
       class='sidebar__accordian-button'

app/controllers/live.js

@@ -31,6 +31,8 @@ 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');
@@ -43,6 +45,10 @@ export default class LiveController extends Controller {
     }, 4000);
   }
 
+  @action sidebarDisplayToggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
   @action inputHandler(type, event) {
     const updatedValue = event.target.value;
     switch (type) {

app/styles/icon-button.module.css

@@ -1,34 +1,49 @@
 .icon-button {
-    all: unset;
-    background-color: var(--color-lightgrey);
-    cursor: pointer;
-    display: inline-block;
+  all: unset;
+  background-color: var(--color-lightgrey);
+  cursor: pointer;
+  display: inline-block;
 }
 
 .icon-button--pink-bg {
-    background-color: var(--color-pink);
-    color: var(--color-white)
+  background-color: var(--color-pink);
+  color: var(--color-white);
 }
 
 .icon-button--md {
-    border-radius: 50%;
-    height: 54px;
-    width: 54px;
-    margin-right: 2rem;
-    position: relative;
+  border-radius: 50%;
+  height: 54px;
+  width: 54px;
+  margin-right: 2rem;
+  position: relative;
+}
+
+.icon-button--md .icon__sidebar__toggle {
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 .icon-button--md .iconify.iconify--material-symbols {
-    height: 50%;
-    width: 50%;
-    position: absolute;
-    bottom: 50%;
-    right: 50%;
-    transform: translate(50%, 50%);
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 @media (max-width: 425px) {
-    .icon-button--md {
-        margin-right: 1rem;
-    }
-}
+  .icon-button--md {
+    margin-right: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .icon__sidebar__toggle {
+    display: none;
+  }
+}

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,14 @@
   box-sizing: border-box;
 }
 
+.sidebar--opens {
+  width: 90%;
+}
+
+.sidebar--closes {
+  width: 0%;
+}
+
 .sidebar__accordian-button {
   all: unset;
   display: none;
@@ -31,6 +39,10 @@
   border-radius: 10px;
 }
 
+.participants__heading--hide {
+  display: none;
+}
+
 .sidebar__participants {
   width: 90%;
   display: flex;
@@ -49,6 +61,10 @@
   box-sizing: border-box;
 }
 
+.sidebar__participants--hide {
+  display: none;
+}
+
 .sidebar__participants--mobile {
   display: none;
   width: 100%;
@@ -151,6 +167,60 @@
   cursor: pointer;
 }
 
+@media only screen and (max-width: 768px) {
+  .sidebar {
+    height: 70px;
+    width: 100%;
+  }
+
+  .participantsHeadingHide {
+    display: block;
+  }
+
+  .sidebar__accordian-button {
+    display: block;
+  }
+  .sidebar__participants {
+    background: var(--color-sidebar-participants);
+    text-align: initial;
+    padding-left: 1rem;
+  }
+
+  .sidebar.open {
+    height: fit-content;
+  }
+  .sidebar__body {
+    overflow: hidden;
+  }
+  .sidebar__body.open {
+    animation: opensidebar 2s;
+    transition: height 2s;
+    animation-fill-mode: forwards;
+    overflow: auto;
+  }
+  .sidebar__body.close {
+    animation: closesidebar 2s;
+    transition: height 2s;
+    animation-fill-mode: forwards;
+  }
+  @keyframes opensidebar {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: 300px;
+    }
+  }
+
+  @keyframes closesidebar {
+    0% {
+      height: 300px;
+    }
+    100% {
+      height: 0px;
+    }
+  }
+}
 .loading span {
   width: 0.5rem;
   height: 0.5rem;
@@ -192,6 +262,10 @@
     padding-top: 1rem;
   }
 
+  .participantsHeadingHide {
+    display: block;
+  }
+
   .sidebar__accordian-button {
     display: block;
   }
@@ -244,10 +318,8 @@
     }
   }
 }
-
 /* utility classes */
-
 .self {
   border: 3px solid var(--color-pink);
   background: var(--color-pink-low-opacity);
-}
+}