(React) How to make routes that use the whole screen?

Questions
1

I set things up based on the split screen template, and it is working fine. But I need onboarding, and don’t want it to fill just part of the page.

Trial 1: Use different routes, and have the LeftPanel use some Redux state to rerender itself as blank. This only works sometimes, since F7 keeps its own state around.

Trial 2: Since I wanted it to use a centered box when on tablet/desktop and the full screen on mobile, this sounds like something for a popup! This creates a popup but does not blank the background. I try setting classes to clear everything, and it sort of works. But often gets in a re-render cycle and react errors out.

Trial 3: I try a popup defined in a page and change the routes to not use popup:{component: …}} anymore, and use normal page routes. The page has a popup defined inside. This works once but on next navigation goes into another infinite loop.

Trial 4: Back to basics. Simple page but I use page events to see hide/show the left and right panels. BUT… I get two (2) onPageBeforeOut events when I navigate around. And if I go back and forth between one page and this one, i get all sorts of spurious events. I get onPageBeforeOut before I get onPageBeforeIn even though I already received onPageBeforeOut when I left the page.

I am running out of ideas.

2

I guess you want something like this: https://app.finderscrowd.com/

On app load:

1
1.jpg2844×1466 222 KB

After login:

2
2.png2838×1464 411 KB

Don’t try to put anything in routes. This app shows Login Screen first, and after that it shows Panel + View. The main app component looks something like:

if (isLoggedIn) {
 return (
   <LoginScreen>...</LoginScreen>
 )
} else {
  return (
    <Panel>...</Panel>
    <View main>...</View>
  )
}

And Login screen has own View inside to have navigation within onboarding pages

1 Like
3

Yeah, but onboarding is rarely as easy as just a login screen. I have routes for onboarding, login, register, verify email, reset password, etc.

4

Exactly what is in this app. Just put own View in that login screen with own routes, to keep navigation between these pages within Login Screen

5

In case i have 2 panels as navigation? (like an inbox email),; how can I setup the layout?