From e0542a7867871fa45a7fe6a4986e7de633063b4b Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:33:20 -0700
Subject: [PATCH] fix(menu): remove app dir from safe area padding (#28123)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `--ion-safe-area-left` and `--ion-safe-area-right` variables in
`ion-menu` are being set as if they use the app's direction. It's been
determined that safe area is not logical and uses the device's
direction. The current implementation is adding padding in the wrong
sides for `ion-toolbar` and `ion-content` within a `ion-menu`.

Additionally, `ion-menu` does not use the entire screen so the safe area
only needs to be applied to the side that is touching the device screen.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Set the `--ion-safe-area-left` and `--ion-safe-area-right` variables
to the correct values based on the device's direction.
- Padding is only added to the side that is not in the safe area.
- `ion-toolbar` is adding `--ion-safe-area-left` and
`--ion-safe-area-right` based on the device's direction.
- `ion-toolbar` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.
- `ion-content` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: 7.3.4-dev.11694015543.18bc484f
---
 core/src/components/menu/menu.scss       | 58 ++++++++++++++++++++++++
 core/src/components/toolbar/toolbar.scss |  6 ++-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index c2a99e1fd8..4a1a09e84b 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -59,15 +59,73 @@
 }
 
 :host(.menu-side-start) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The left side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The right side of the menu is not touching the screen edge. Padding is not
+    * applied to the right side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-right: 0px;
 
   @include position(0, auto, 0, 0);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The right side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The left side of the menu is not touching the screen edge. Padding is not
+      * applied to the left side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-right: env(safe-area-inset-right);
+    --ion-safe-area-left: 0px;
+  }
 }
 
 :host(.menu-side-end) .menu-inner {
+  /**
+    * Menu does not cover the whole screen so we need to set the safe area for the
+    * side that touches the screen edge only. Since safe area is not logical, it
+    * needs to be applied to the correct side depending on the language direction.
+    * Otherwise, the content will have less space on both sides.
+    *
+    * LTR:
+    * The right side of the menu touches the screen edge. The safe area padding has
+    * already been set in the core styles, so there's no need to set it again.
+    * The left side of the menu is not touching the screen edge. Padding is not
+    * applied to the left side of the menu. A value of 0 is set.
+    */
   --ion-safe-area-left: 0px;
 
   @include position(0, 0, 0, auto);
+
+  @include rtl() {
+    /**
+      * Menu does not cover the whole screen so we need to set the safe area for the
+      * side that touches the screen edge only. Since safe area is not logical, it
+      * needs to be applied to the correct side depending on the language direction.
+      * Otherwise, the content will have less space on both sides.
+      *
+      * RTL:
+      * The left side of the menu touches the screen edge. The safe area padding has
+      * already been set in the core styles, so there's no need to set it again.
+      * The right side of the menu is not touching the screen edge. Padding is not
+      * applied to the right side of the menu. A value of 0 is set.
+      */
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: 0px;
+  }
 }
 
 ion-backdrop {
diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss
index bd286d3662..92cf570651 100644
--- a/core/src/components/toolbar/toolbar.scss
+++ b/core/src/components/toolbar/toolbar.scss
@@ -28,7 +28,6 @@
   --opacity-scale: 1;
 
   @include font-smoothing();
-  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
   display: block;
 
@@ -36,6 +35,11 @@
 
   width: 100%;
 
+  // stylelint-disable-next-line property-disallowed-list
+  padding-right: var(--ion-safe-area-right);
+  // stylelint-disable-next-line property-disallowed-list
+  padding-left: var(--ion-safe-area-left);
+
   color: var(--color);
 
   font-family: $font-family-base;