fix(menu): dismiss when clicking outside

fixes #15096

core/src/components/menu/menu.scss

@@ -66,15 +66,12 @@ ion-backdrop {
 .menu-content-open {
   cursor: pointer;
   touch-action: manipulation;
-}
 
-.menu-content-open {
   // the containing element itself should be clickable but
   // everything inside of it should not clickable when menu is open
   pointer-events: none;
 }
 
-
 @media (max-width: 340px) {
 
   .menu-inner {

core/src/components/menu/menu.tsx

@@ -214,13 +214,18 @@ export class Menu {
 
   @Listen('body:click', { enabled: false, capture: true })
   onBackdropClick(ev: any) {
-    const path = ev.path;
-    if (path && !path.includes(this.menuInnerEl) && this.lastOnEnd < ev.timeStamp - 100) {
+    if (this.lastOnEnd < ev.timeStamp - 100) {
+      const shouldClose = (ev.composedPath)
+        ? !ev.composedPath().includes(this.menuInnerEl)
+        : false;
+
+      if (shouldClose) {
         ev.preventDefault();
         ev.stopPropagation();
         this.close();
       }
     }
+  }
 
   @Method()
   isOpen(): boolean {
@@ -481,7 +486,6 @@ export class Menu {
       <div
         class="menu-inner"
         ref={el => this.menuInnerEl = el}
-        onClick={this.onBackdropClick.bind(this)}
       >
         <slot></slot>
       </div>,

core/src/components/split-pane/split-pane.ios.scss

@@ -5,7 +5,7 @@
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-ios.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-ios.split-pane-visible > .split-pane-side {
   min-width: $split-pane-ios-side-min-width;
   max-width: $split-pane-ios-side-max-width;
 

core/src/components/split-pane/split-pane.md.scss

@@ -4,7 +4,7 @@
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-md.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-md.split-pane-visible > .split-pane-side {
   min-width: $split-pane-md-side-min-width;
   max-width: $split-pane-md-side-max-width;
 

core/src/components/split-pane/split-pane.scss

@@ -39,7 +39,7 @@
   display: none;
 }
 
-.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-visible > .split-pane-side {
   order: -1;
 }
 

core/src/components/split-pane/test/basic/index.html

@@ -13,7 +13,7 @@
   <ion-app>
     <ion-split-pane id="splitPane">
 
-      <ion-menu side="end">
+      <ion-menu side="start">
 
         <ion-header>
           <ion-toolbar color="secondary">