Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/Drawer.scss

@@ -1,33 +1,24 @@
-.drawer-flexBox {
-  display: flex;
-  flex-direction: column;
-}
-.drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/dir';
 
 .drawer {
-  @extend .drawer-flexItem;
-  @extend .drawer-flexBox;
+  @extend .cp-fx__column;
+  @extend .cp-fx__item-one;
   min-width: 0;
-  border-right: 1px solid var(--bg-surface-border);
-
-  [dir=rtl] & {
-    border-right: none;
-    border-left: 1px solid var(--bg-surface-border);
-  }
+  @include dir.side(border,
+    none,
+    1px solid var(--bg-surface-border),
+  );
 
   &__content-wrapper {
-    @extend .drawer-flexItem;
-    @extend .drawer-flexBox;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
   }
 
   &__state {
     padding: var(--sp-extra-tight);
     border-top: 1px solid var(--bg-surface-border);
-    display: flex;
-    justify-content: center;
+    @extend .cp-fx__row--c-c;
 
     & .text {
       color: var(--tc-danger-high);
@@ -35,7 +26,7 @@
   }
 }
 .rooms__wrapper {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__item-one;
   position: relative;
 }
 
@@ -58,13 +49,7 @@
 
   & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
-    margin-left: auto;
-
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
+    @include dir.side(margin, auto, 0);
   }
 
   & > .room-selector:first-child {

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .breadcrumb__wrapper {
   height: var(--header-height);
   position: relative;
@@ -47,17 +50,12 @@
     white-space: nowrap;
     box-shadow: none;
     & p {
+      @extend .cp-txt__ellipsis;
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     & .notification-badge {
-      margin-left: var(--sp-extra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-extra-tight);
-      }
+      @include dir.side(margin, var(--sp-extra-tight), 0);
     }
   }
 

src/app/organisms/navigation/SideBar.scss

@@ -1,21 +1,16 @@
-.sidebar__flexBox {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
+@use '../../partials/flex';
+@use '../../partials/dir';
 
 .sidebar {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column;
+
   width: var(--navigation-sidebar-width);
   height: 100%;
-  border-right: 1px solid var(--bg-surface-border);
   background-color: var(--bg-surface-extra-low);
-
-  [dir=rtl] & {
-    border-right: none;
-    border-left: 1px solid var(--bg-surface-border);
-  }
+  @include dir.side(border,
+    none,
+    1px solid var(--bg-surface-border),
+  );
 
   &__scrollable,
   &__sticky {
@@ -23,12 +18,7 @@
   }
 
   &__scrollable {
-    flex: 1;
-    min-height: 0px;
-  }
-
-  &__sticky {
-    align-items: center;
+    @extend .cp-fx__item-one;
   }
 }
 
@@ -53,7 +43,7 @@
 .featured-container,
 .space-container,
 .sticky-container {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column--c-c;
   
   padding: var(--sp-ultra-tight) 0;