bug: Ionic/React ->using tab slot as top with content in header

[bharatAscent]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

When I use IonTabs with side menu implementation in Ionic react project. the IonPage of Tabs takes over the header set for menu. So the menu button is not clickable, if I a make changes in zIndex then the Tabs disappear.

Expected Behavior

Both Menu and tabs should be clickable from header.

Steps to Reproduce

1. Add tabs as slot top
2. Add menu.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (C:\Users\bhara\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/react 6.6.1

Capacitor:

Capacitor CLI : 4.7.0 @capacitor/android : not installed @capacitor/core : 4.7.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v16.17.1 (C:\Program Files\nodejs\node.exe) npm : 8.15.0 OS : Windows 10

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[bharatAscent]

Here is the codesandbox URL

[bharatAscent]

@liamdebeasi I have provided the sandbox URL to reproduce, Please help on this.

[averyjohnston]

When running the sandbox, I get an alert saying Error: Make Sure You Started the Server Failed to fetch. There is also a lot of extra functionality that appears to be unrelated to the behavior you described. Could you modify your reproduction to only include the code necessary to show the issue you're running into? It may be easiest to start with a blank Ionic project.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!