| 15 | shadow: true, |
| 16 | }) |
| 17 | export class MenuToggle implements ComponentInterface { |
| 18 | @State() visible = false; |
| 19 | |
| 20 | /** |
| 21 | * Optional property that maps to a Menu's `menuId` prop. |
| 22 | * Can also be `start` or `end` for the menu side. |
| 23 | * This is used to find the correct menu to toggle. |
| 24 | * |
| 25 | * If this property is not used, `ion-menu-toggle` will toggle the |
| 26 | * first menu that is active. |
| 27 | */ |
| 28 | @Prop() menu?: string; |
| 29 | |
| 30 | /** |
| 31 | * Automatically hides the content when the corresponding menu is not active. |
| 32 | * |
| 33 | * By default, it's `true`. Change it to `false` in order to |
| 34 | * keep `ion-menu-toggle` always visible regardless the state of the menu. |
| 35 | */ |
| 36 | @Prop() autoHide = true; |
| 37 | |
| 38 | connectedCallback() { |
| 39 | this.visibilityChanged(); |
| 40 | } |
| 41 | |
| 42 | @Listen('ionMenuChange', { target: 'body' }) |
| 43 | @Listen('ionSplitPaneVisible', { target: 'body' }) |
| 44 | async visibilityChanged() { |
| 45 | this.visible = await updateVisibility(this.menu); |
| 46 | } |
| 47 | |
| 48 | private onClick = () => { |
| 49 | return menuController.toggle(this.menu); |
| 50 | }; |
| 51 | |
| 52 | render() { |
| 53 | const mode = getIonMode(this); |
| 54 | const hidden = this.autoHide && !this.visible; |
| 55 | |
| 56 | return ( |
| 57 | <Host |
| 58 | onClick={this.onClick} |
| 59 | aria-hidden={hidden ? 'true' : null} |
| 60 | class={{ |
| 61 | [mode]: true, |
| 62 | 'menu-toggle-hidden': hidden, |
| 63 | }} |
| 64 | > |
| 65 | <slot></slot> |
| 66 | </Host> |
| 67 | ); |
| 68 | } |
| 69 | } |