Sidemenu issue in specific case


#1

Hi all,

I’m facing some strange behavior with sidemenu.
I have a tabpanel to navigate between several pages, say 2 for the example.
On the first Tab I have some actions which trigger navigation using NavCtrl to the second tab. In the second Tab I have the sidemenu.
I can also navigate to the second tab using the tab component.
Now the issue. When I navigate to the second page using NavCtrl I can use the sidemenu but if I then use the tabpanel to navigate to the second tab then side menu no longer opens.
My guess is that the page in the sidemenu already exists somewhere but I’d like to understand how to fix this.

Has anyone an advice about such issue ?

thanks in advance


#2

What exactly do you mean by the sidemenu no longer opens? Does the menu toggle button not open the menu, or does the menu toggle button not even appear?

Also, are you using the MenuController to open your menu programmatically? If so, can you please post your code.


#3

That sounds like abuse of tabs to me. Tabs are supposed to be for the user to move back and forth between different aspects of the app. Tab 1 should not “have actions” that “trigger navigation” to other tabs. I think you should reconsider whether tabs make sense for this app.


#4

OK I need to explain a bit further.
This is an app that I’m working on. Ionic/Cordova with firebase behind the scene. I want to manage my wonderful cellar :slight_smile:
So I extracted 4 printscreens. First one is a dashboard with shortcuts to selections of bottles matching some criteria. For instance, I clicked on the red bar, representing red wines, this brought me directly the the 2nd screen, showing bottles of red wines in my cellar. But in the dashboard, anything is clickable. This is my point of view of what UX design should be for my app.

then

The second screen shows a subset of bottles. It also embeds a sidemenu (see button on top-left of the screen). If I click it opens eht menu, see 3rd screenshot. There I can refine filtering a lot, by area, color of wines or age classification (young, old etc.). As you can see, so fair it works, I can open it (and use it).

There comes the issue. Notice that the current active tab, at the bottom of the screen, is still the “home” screen (the one with dashboard).
User may also choose to move directly from there to the “Recherche” tab (search, sorry my App is in French).
So here’s what I can see when activating this tab, the last screenshot:


As you can see the side menu button is there. But when I click on it the menu no longer opens.
I noticed that, when closing properly the menu in the third screenshot, it opens in the 4th screenshot.

My guess is that there’s a technical issue behind this.
@rapropos I hear what you say but this ability to navigate from charts or buttons like “favorites” or “most used requests” is a key feature of my app, it makes a lot of sense for the end-user, to me user experience is more important that technical considerations as long as the app does not break of course.
I sort of think the technical issue here can be solved. I just need to understand how :wink:
@Sidharth_1999 for the code, sorry it’s way too complex to be simply displayed here. I will try and reproduce the issue in a plunker, I hope I can this Sunday.

Thanks for your interest


#5

I had the same issue with my menu buttons - sometimes it wouldn’t even open the menu when clicking them. I thought it was a bug. So, I just added

     <button ion-button menuToggle>
     <ion-icon name="menu"></ion-icon>
     </button>

to the .html files of all the pages that needed access to the menu, and made sure those pages were ROOT PAGES so that the menu toggle button would be visible. Once I did this, my menu was working perfectly fine whenever the button was clicked. Opening the menu programmatically using the MenuController was causing issues for me for some reason, like sometimes :

    this.menuCtrl.open('menu') 

doesn’t work when I click the menu button. So maybe if you’re doing it like this, you can change it to an implementation similar to mine.


#6

Fundamentally, tabs are glorified accordions, so when you are “navigating” amongst them, you aren’t really moving to different pages, just exposing certain parts of the same page that already exist in the DOM. If you don’t get any better answers, you might experiment with switching tabs for segments, which would allow you more control over actually changing the navigation stack, while appearing virtually identical to tabs as far as UI goes.


#7

Thanks, I’ll try this, I have several issues with sidemenu actually, this may resolve a few.


#8

Thanks a lot for your suggestion, it sounds logical indeed.
I’ll give a try.
I also consider simply removing my “search” tab and force end-user to user shortcut in the dashboard to show the matching filtered bottles. In case an end-user wants to see all I can simply add a button “show all”.

I hope I can work on this this Sunday, stay tuned :wink:


#9

Hi all,

thanks again for your suggestions. I ended up with a functional choice that solved the problem for me. I just removed the tab access to the list of bottles, I added a few shortcut buttons on my dashboard and I’m done :slight_smile:

I will take some time, dunno when but I’ll do, to check this issue with menu.