Techniques for pinning open a menu


#1

I’d like my app to have the option to pin open the left menu when the user has a wide interface. (c.f., almost every app, but feedly is a good example).

It doesn’t seem like I can manually force a pin state in the default ion-menu widget, especially because I’d want this to be in push mode (so it doesn’t overlay), which … pushes the interface to the right, so stuff that was on the right isn’t visible anymore.

I’m fiddling around with a relatively complicated ngIf structure that includes some mediaQuery code as well as user preferences, but this is tricky. In the past I’ve had problems adding content to an ionic container after the initial page render (the scroll margin at the top disappears if stuff isn’t present when the scroll container initially renders). So I don’t want to screw around with a big fat ngIf that swaps the top-level from a two-column flexbox row (20-80 weight) with the menu template in one and the root nav in the other to a root nav with an actual ion-menu directive if this is going to cause timing headaches, especially if there’s an easier way.

Bonus points for letting me pin open something on the right side as well. This is optional, but I have two classes of Thing I want to show - a sitewide nav (left side) and an item-details view that shows some extra stuff about the item in the main view (things that aren’t important enough to be there all the time and are currently under a kebab menu that opens a modal with that info, but I’d rather the user have the option to make them always available if they want and have a large screen).

I really want to only use ngIf structural directives to allow for responsive window resizing here. I do not want to force a reload when the user crosses a size threshold (e.g, turns their ipad on its side).


#2

Have you investigated SplitPane? Perhaps it would be useful here.


#3

Yeah, there’s some potential, but it is causing some navcontroller issues. I may be handling the nav stack incorrectly, but basically sometimes the back arrow overwrites the hamburger in narrow view, and sometimes the menu just disappears in wide view, depending on the path I follow to get to a particular app state (deep link vs start at home and click in). I was investigating that when I decided I needed to look at alternatives.


#4

Sounds too complex for me to say anything more constructive without being able to reproduce the situation, sorry.


#5

Yeah, at the end of the day, it can be handled with some boring divs and flexboxes, so I think I’ll approach it from that direction.


#6

If you come up with what you think is a viable solution, it would be great if you could post the gist of it here in case somebody else in a similar situation comes across this thread.