chore: Refactor sidebar related changes for RTL (#6519)

* Woot tabs

* Refactor sidebar related RTL

* Context menu

* chore: Minor fixes

* chore: Dropdown

* chore: Toggle switch

* chore: sidebar fixes

* fix: spacing issues and minor fixes

* chore: Space slab to small

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -13,6 +13,10 @@
         padding: var(--space-smaller) var(--space-one) var(--space-smaller)
           var(--space-smaller);
       }
+
+      .status-items .button {
+        text-align: right;
+      }
     }
   }
 
@@ -23,10 +27,13 @@
       border-right: 0;
 
       .nested.vertical.menu {
-        align-items: flex-start;
+        .badge--icon {
+          margin-left: var(--space-smaller);
+          margin-right: unset;
+        }
 
-        li {
-          direction: initial;
+        .menu-label {
+          text-align: right;
         }
       }
 
@@ -74,7 +81,7 @@
   .settings-header {
     .header--icon {
       margin-left: 0;
-      margin-right: $space-small;
+      margin-right: var(--space-small);
     }
   }
 
@@ -95,13 +102,13 @@
   // Woot Tabs
   .tabs-title {
     &:first-child {
-      margin-left: $space-slab;
+      margin-left: var(--space-small);
       margin-right: unset;
     }
 
     &:last-child {
       margin-left: unset;
-      margin-right: $space-slab;
+      margin-right: var(--space-small);
     }
   }
 
@@ -133,7 +140,7 @@
 
         .user--profile__meta {
           margin-left: unset;
-          margin-right: $space-slab;
+          margin-right: var(--space-small);
         }
       }
 
@@ -315,7 +322,7 @@
 
     .notification-content--wrap {
       margin-left: 0;
-      margin-right: var(--space-slab);
+      margin-right: var(--space-small);
     }
   }
 
@@ -326,8 +333,9 @@
     }
   }
 
-  .header-left-wrap .page-title {
-    margin-right: var(--space-slab) !important;
+  // scss-lint:disable SelectorDepth
+  .container .header-wrap .header-left-wrap .header-left-wrap > .page-title {
+    margin-right: var(--space-small);
   }
 
   .portal-container .container {
@@ -408,6 +416,28 @@
     justify-content: flex-end;
   }
 
+  // Toggle switch
+  .toggle-button {
+    &.small {
+      span {
+        &.active {
+          transform: translate(var(--space-minus-small), var(--space-zero));
+        }
+      }
+    }
+
+    span {
+      --minus-space-one-point-five: -1.5rem;
+
+      &.active {
+        transform: translate(
+          var(--minus-space-one-point-five),
+          var(--space-zero)
+        );
+      }
+    }
+  }
+
   // Widget builder
   .widget-builder-container .widget-preview {
     direction: initial;
@@ -455,4 +485,9 @@
   .contact--form .input-group {
     direction: initial;
   }
+
+  // scss-lint:disable QualifyingElement
+  .dropdown-menu--header > span.title {
+    text-align: right;
+  }
 }

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -47,7 +47,7 @@ $resolve-button-width: 13.2rem;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      margin-left: $space-slab;
+      margin-left: var(--space-small);
       min-width: 0;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -1,7 +1,7 @@
 .side-menu {
   i {
-    margin-right: $space-smaller;
-    min-width: $space-two;
+    margin-right: var(--space-smaller);
+    min-width: var(--space-two);
   }
 }
 
@@ -18,14 +18,14 @@
 
   .nested {
     a {
-      font-size: $font-size-small;
-      margin-bottom: $space-micro;
-      margin-top: $space-micro;
+      font-size: var(--font-size-small);
+      margin-bottom: var(--space-micro);
+      margin-top: var(--space-micro);
 
       .inbox-icon {
         display: inline-block;
-        margin-right: $space-micro;
-        min-width: $space-normal;
+        margin-right: var(--space-micro);
+        min-width: var(--space-normal);
         text-align: center;
       }
     }
@@ -38,7 +38,8 @@
   @include space-between-column;
   @include border-normal-top;
   flex-direction: column;
-  padding: $space-one $space-normal $space-one $space-one;
+  padding: var(--space-one) var(--space-normal) var(--space-one)
+    var(--space-one);
   position: relative;
 
   &:hover {
@@ -60,14 +61,18 @@
 .hamburger--menu {
   cursor: pointer;
   display: block;
-  margin-right: $space-normal;
+  margin-right: var(--space-normal);
 }
 
 .header--icon {
   display: block;
-  margin-right: $space-normal;
+  margin: 0 var(--space-normal);
 
   @media screen and (max-width: 1200px) {
     display: none;
   }
 }
+
+.header-title {
+  margin: 0 var(--space-small);
+}

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -47,7 +47,7 @@
 
 .tabs-title {
   flex-shrink: 0;
-  margin: 0 var(--space-slab);
+  margin: 0 var(--space-small);
 
   .badge {
     background: var(--color-background);