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/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -2,8 +2,10 @@
   <div class="header--wrap">
     <div class="header-left--wrap">
       <woot-sidemenu-icon />
-      <h3 class="page-title">{{ headerTitle }}</h3>
-      <span class="text-block-title count-view">{{ `(${count})` }}</span>
+      <div class="header-title">
+        <h3 class="page-title">{{ headerTitle }}</h3>
+        <span class="text-block-title count-view">{{ `(${count})` }}</span>
+      </div>
     </div>
     <div class="header-right--wrap">
       <woot-button
@@ -160,8 +162,13 @@ export default {
   display: flex;
   align-items: center;
 
-  .page-title {
-    margin-bottom: 0;
+  .header-title {
+    display: flex;
+    align-items: center;
+    margin: 0 var(--space-smaller);
+    .page-title {
+      margin-bottom: 0;
+    }
   }
 }
 .header-right--wrap {
@@ -169,7 +176,7 @@ export default {
   align-items: center;
 }
 .count-view {
-  margin-left: var(--space-smaller);
+  margin: 0 var(--space-smaller);
 }
 .dropdown-pane--open {
   top: var(--space-larger);

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -6,6 +6,7 @@
         variant="clear"
         size="small"
         color-scheme="primary"
+        class="back-button"
         @click="onClickGoBack"
       >
         {{ backButtonLabel }}
@@ -42,7 +43,7 @@
         v-if="!isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
         icon="pane-open"
-        class-names="article--buttons"
+        class-names="article--buttons sidebar-button"
         variant="hollow"
         size="small"
         color-scheme="secondary"

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -7,17 +7,19 @@
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-    <help-center-sidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
+    <div class="secondary-sidebar">
+      <help-center-sidebar
+        v-if="showHelpCenterSidebar"
+        :header-title="headerTitle"
+        :portal-slug="selectedPortalSlug"
+        :locale-slug="selectedLocaleInPortal"
+        :sub-title="localeName(selectedLocaleInPortal)"
+        :accessible-menu-items="accessibleMenuItems"
+        :additional-secondary-menu-items="additionalSecondaryMenuItems"
+        @open-popover="openPortalPopover"
+        @open-modal="onClickOpenAddCategoryModal"
+      />
+    </div>
     <section class="app-content columns">
       <router-view />
       <command-bar />

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

@@ -190,7 +190,7 @@ export default {
       .locale-content {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         width: 100%;
       }
 
@@ -233,10 +233,6 @@ export default {
       line-height: var(--space-normal);
       width: 100%;
     }
-
-    .meta {
-      flex-grow: 1;
-    }
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -122,7 +122,7 @@ export default {
       display: flex;
       align-items: center;
       .page-title {
-        margin-bottom: 0;
+        margin: 0 var(--space-smaller) 0;
       }
     }
   }

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -181,7 +181,7 @@ export default {
 .notification-type {
   font-size: var(--font-size-micro);
   padding: var(--space-micro) var(--space-smaller);
-  margin-left: var(--space-small);
+  margin: 0 var(--space-small);
   background: var(--s-50);
   border-radius: var(--border-radius-normal);
 }

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings--content">
-    <div class="widget-builder-conatiner">
+    <div class="widget-builder-container">
       <div class="settings-container">
         <div class="settings-content">
           <form @submit.prevent="updateWidget">
@@ -420,7 +420,7 @@ export default {
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/woot';
 
-.widget-builder-conatiner {
+.widget-builder-container {
   display: flex;
   flex-direction: row;
   padding: var(--space-one);