feat: Add the ability to toggle the secondary sidebar in all display breakpoints (#6118)

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,7 +1,12 @@
 <template>
-  <button @click="onMenuItemClick">
-    <fluent-icon class="hamburger--menu" icon="list" />
-  </button>
+  <woot-button
+    size="small"
+    variant="clear"
+    color-scheme="secondary"
+    icon="list"
+    class="toggle-sidebar"
+    @click="onMenuItemClick"
+  />
 </template>
 
 <script>
@@ -16,13 +21,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.hamburger--menu {
-  cursor: pointer;
-  display: none;
-  margin-right: var(--space-normal);
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
+.toggle-sidebar {
+  margin-right: var(--space-small);
+  margin-left: var(--space-minus-small);
 }
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -261,14 +261,7 @@ export default {
   width: 20rem;
   flex-shrink: 0;
   overflow-y: hidden;
-
-  @include breakpoint(xlarge down) {
-    position: absolute;
-  }
-
-  @include breakpoint(xlarge up) {
-    position: unset;
-  }
+  position: unset;
 
   &:hover {
     overflow-y: hidden;

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<button>
-  <fluent-icon
-    class="hamburger--menu"
-    icon="list"
-  />
-</button>
+<woot-button
+  class="toggle-sidebar"
+  color-scheme="secondary"
+  icon="list"
+  size="small"
+  variant="clear"
+/>
 `;