Navigation update separate mobile desktop

[JesJehle]

I made a first version of a separate navigation for mobile and desktop. The mobile navigation is simple and I used the pages and routes for the map, list, settings and tree details. The desktop navigation is more complicated and not finished yet. Since we are only working with one page and additional popovers and grids, I created a separate desktop page. Here I used a grid to display the inventory list and map components, which works after some trial and error. Now comes the more complicated part. At the moment settings and treedetails are implemented as pages, to show them in a popup window next to the inventory list, I need to get the routing logic into some kind of state to render the clicked treedetails. A short talk would be helpful here. I would rather not merge the current branch, just yes, but please have a look and give feedback. I would implement the changes for the desktop version first and then merge.

[mmaelicke]

I added the logic, how the navigation would be used within a single page to show different component. This is also not really working. It feels like we are extremely fighting the framework, trying to do stuff the components were not made for.

I have to investigate a bit more, why the match object supplied by the Router is not updating appropriately.

I am not sure, how we would implement navigation to tree details in mobile, but load the components directly on Desktop.

My last shot are nested router-outlets, which gave me really weird animations in the first place. If that does not work, I guess we need to take a completely different route.

[mmaelicke]

check https://github.com/hydrocode-de/mathislewald/tree/use-nested-router

this one implements the nested router. Works, kind of, but has a annoying delay.

[mmaelicke]

Got it. Works with the react-router directly. The IonRouter is made for Pagetransitions, that screwed everything up. Working with react-router directly is possible, but we need to stick to version 5.2 as the new version (6.X) is not yet supported by ionic.

[JesJehle]

Since, the initial draft is done, I would suggest merging this branch to main and continuing from there. Feel free to merge or request changes.

[JesJehle]

To Do:

• [x] Merge #48 with update-list
• [x] Create selectedVariable state in context #51
• [x] Replace IonGrid with div in DesktopPage #50
• [x] Create ButtonGroup component
• [x] Add Button Group to Mobile and Desktop pages
• [x] Update Visual Map Selection with new Button
• [x] Add Filter Popover to DesktopPage
• [x] Add Filter modal to MobilePage
• [x] Add Variable Selection Popover to DesktopPage
• [ ] Add Variable Selection Modal to MobilePage

[JesJehle]

Ok, I think I am done. @mmaelicke have a look, merge if possible.

[JesJehle]

Ok, I resolved all issues you pointed out. I will merge this now.