bug: ion-menu-button is not hidden when using SplitPane

Bug Report

Ionic version:

[x] ~4.5.x

Current behavior:

Ion-menu-button is not hidden when using SplitPane. The icon is not displayed like the image, but the width(48px) for the icon has been present.

Expected behavior:

Please execute the following command. Up to v 4.4.0 was displayed as below.

Steps to reproduce:

ionic start test-sidemenu sidemenu
cd test-sidemenu 
ionic serve

Please see the launched application on your PC.

Related code:

This code seems to be the cause.

https://github.com/ionic-team/ionic/blob/45b82dc466e3b5a9cc020456c224a45ef8dff0c5/core/src/components/menu-button/menu-button.md.scss#L14

There is no issue if you write CSS as follows.

:host {
  button {
    width: 48px;
    height: 48px;
  }
}

Other information:

I want to fix this issue!

I’ve committed the fix for this issue to my forked repository. If there is no problem I want to create a pull request with the same one! https://github.com/scrpgil/ionic/commit/ee4716a6db9755b81ffbb91f1445bc550edbba51

[brandyscarney]

@joelmeaders The reason your workaround fixes it is because the ion-menu-toggle has the logic to hide / show based on the split pane / menu being active. The menu button has a child ion-menu-toggle so that is working to hide the inner button but the host element is still visible.

I moved the logic up so the ion-menu-button will be able to handle this for itself instead of relying on the child ion-menu-toggle. This will be better for accessibility too so the menu-button can get aria-hidden on the host element instead. Here is the PR for this: https://github.com/ionic-team/ionic/pull/18702

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.