I have an app that contains a menu sidebar and a navigation bar near the top with a button to open the side menu.
Above this navigation bar I would like to place something along the lines of an ion-toolbar component (the ion-toolbar would contain an image and button(s) and be displayed across all pages in the app ).
I would also like the ion-toolbar to remain static and not change during page transitions.
If I place the ion-toolbar at the top of every page, it slides across the screen when I push a new page onto the navigation stack (only to get replaced with the exact same static content on the following page), which looks jarring when it contains an image. So I’d prefer the ion-toolbar to not animate during page transitions, while still allowing the rest of the page to animate during the transition.
If I place the ion-toolbar in my app.html file (making it global across the app), then it remains visually static during transitions, which is great.
However, the ion-toolbar then partially overlaps/hides the top navigation bar and if I try to display a ‘loading’ component the background of the app will grey out except for the ion-toolbar at the top (which also looks odd/ugly).
I assume there is an easy way to get the effect that I want, but the solution seems to be eluding me at the moment.
Thanks.