From 398d92f243bbfb1f7d4584f62b2c0b7bcde69f9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?=
 <dgonzalezr@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:35:43 +0300
Subject: [PATCH] refactor(Side menu): use CSS logical properties instead of
 physical values (#1157)

---
 packages/beeq/src/components/side-menu/bq-side-menu.tsx   | 2 +-
 .../beeq/src/components/side-menu/scss/bq-side-menu.scss  | 4 ++--
 packages/beeq/src/global/styles/utils/_utility.scss       | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/beeq/src/components/side-menu/bq-side-menu.tsx b/packages/beeq/src/components/side-menu/bq-side-menu.tsx
index 65d223a0f..fb096a3c4 100644
--- a/packages/beeq/src/components/side-menu/bq-side-menu.tsx
+++ b/packages/beeq/src/components/side-menu/bq-side-menu.tsx
@@ -166,7 +166,7 @@ export class BqSideMenu {
         </nav>
         {/* Footer */}
         <div
-          class="bq-side-menu--footer sticky bottom-0 mt-auto flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs"
+          class="bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]"
           part="footer"
         >
           <slot name="footer"></slot>
diff --git a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss
index 0d910949b..0dd379003 100644
--- a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss
+++ b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss
@@ -13,14 +13,14 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-side-menu {
-  @apply fixed left-0 top-0 flex h-dynamic-vh w-[--bq-side-menu--width] grow flex-col bg-[--bq-side-menu--bg-color];
+  @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;
   @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];
   @apply transition-[background-color,width] duration-150;
   @include hide-scrollbar;
 }
 
 .bq-side-menu.is-collapsed {
-  @apply w-[--bq-side-menu--width-collapse];
+  @apply is-[--bq-side-menu--width-collapse];
 }
 
 /* -------------------------------------------------------------------------- */
diff --git a/packages/beeq/src/global/styles/utils/_utility.scss b/packages/beeq/src/global/styles/utils/_utility.scss
index d9249195a..5474c31c7 100644
--- a/packages/beeq/src/global/styles/utils/_utility.scss
+++ b/packages/beeq/src/global/styles/utils/_utility.scss
@@ -1,6 +1,6 @@
 /*
  * This file contains utility classes that cannot be included within a component.
- * These classes must be used in the light DOM and not directly targeted by any rules in the stylesheet.
+ * These classes must be used in the light DOM and not directly targeted by any rules in the stylesheets.
  * In order to reduce the likelihood of conflicts, all classes within the file must begin with ".bq-".
  */
 
@@ -15,15 +15,15 @@
  */
 
 .bq-body--side-menu {
-  @apply relative transition-[padding-left] duration-300;
+  @apply relative transition-[padding-inline-start] duration-300;
 }
 
 .bq-body--side-menu__collapse {
-  @apply pl-[var(--bq-side-menu--width-collapse)] #{!important};
+  @apply ps-[var(--bq-side-menu--width-collapse)] #{!important};
 }
 
 .bq-body--side-menu__expand {
-  @apply pl-[var(--bq-side-menu--width)] #{!important};
+  @apply ps-[var(--bq-side-menu--width)] #{!important};
 }
 
 /**