Hi,
I’m working on an app that will have pwa/androi/ios versions. While working on the desktop view, I’m a little stuck on the navigation layout.
I’m looking to have a horizontal menu navigation when the window is > sizeMd. Then if the window resizes smaller (or, if the user is on a mobile browser), the horizontal nav changes to a side drawer menu with the hamburger icon. An example of this is with https://www.lyft.com. As you expand/contract the window size, the navigation links change.
Is this possible in Ionic? I’m using Ionic React, but even an Angular example could help. I’m guessing I need to listen for a window resize event, but can’t seem to get this working.
Yes you already got a part of the solution - listen to the window resize event!
I’ve explained something similar in my post on Ionic horizontal desktop navigation in the past. It’s with Angular, but might give you an idea.
In general it becomes tricky if you want to use completely different layouts (although I’m not 100% sure about the setup with React), and your app might reload at some breakpoint. But usually users don’t resize your app like developers do all the time, and if they open it on a small/big screen, that’s also the way they will use the app!
Yes, it is challenging having 2 separate flows… that’s my next nut to crack. Both mobile and pwa apps will have 90% of the same content, and the same routes. However, the pwa will have more of a dynamic website feel with some additional content/links on the home page. Then the main service portion of website will share the same look/fee/routes as the mobile side. So it’s just a handful of components that are different between to two.
Currently, I check the platform when the app initializes, and route to the pwa component OR mobile component. I feel there’s gotta be a better approach though. And since I’m still new to Ionic, there probably is!
