diff --git a/apps/showcase/assets/styles/layout/_responsive.scss b/apps/showcase/assets/styles/layout/_responsive.scss
index 6f34ce658..d9e531a5e 100644
--- a/apps/showcase/assets/styles/layout/_responsive.scss
+++ b/apps/showcase/assets/styles/layout/_responsive.scss
@@ -48,7 +48,7 @@
 
     .layout-sidebar {
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         position: fixed;
         z-index: 1102;
         height: 100%;
@@ -58,6 +58,10 @@
         width: 300px;
         opacity: 0;
 
+        &:dir(rtl) {
+            transform: translateX(100%);
+        }
+
         nav {
             padding: 1rem 1rem;
         }
diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
index 1f3f4ab51..bdd5440e4 100644
--- a/apps/showcase/assets/styles/layout/_sidebar.scss
+++ b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -1,13 +1,13 @@
 .layout-sidebar {
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
     top: 6rem;
     height: calc(100vh - 9rem);
     user-select: none;
     transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
     display: flex;
     flex-direction: column;
-    padding: 0 0 0 0;
+    padding: 0;
     flex: 0 0 250px;
     margin-inline-end: 4rem;
     overflow: auto;
@@ -18,8 +18,8 @@
     }
 
     nav {
-        padding: 0;
-        padding-inline-end: 1rem;
+        padding-block: 0;
+        padding-inline: 1rem 0;
         margin: 0;
         flex-grow: 1;
     }
@@ -37,7 +37,8 @@
                 display: flex;
                 width: 100%;
                 align-items: center;
-                padding: .5rem 1px;
+                padding-block: .5rem;
+                padding-inline: 1px;
                 color: var(--text-color);
                 font-weight: 600;
                 transition: outline-color 0.2s;
@@ -47,7 +48,7 @@
                 font-size: 1rem;
                 border: 0 none;
                 margin: 0;
-                text-align: left;
+                text-align: start;
                 cursor: pointer;
                 user-select: none;
                 --p-focus-ring-offset: -1px;
@@ -106,8 +107,8 @@
                 overflow: hidden;
 
                 ol {
-                    margin: 0;
-                    margin-inline-start: 1rem;
+                    margin-block: 0;
+                    margin-inline: 0 1rem;
                     padding: .25rem 0;
                     list-style: none;
 
@@ -128,7 +129,7 @@
                             @include focus-visible();
 
                             &:hover {
-                                border-left-color: var(--hover-border-color);
+                                border-inline-start-color: var(--hover-border-color);
                             }
 
                             &.router-link-active {