How to use panel with route query

Questions
1

Hi there,

Amazing work on this project. Truely almost native behaviour! Well done.

I’ve run into a headache with Panels.

Based on a URL query parameter, I want the panel to stay open (and work if I revisit a page it should be open).

It only “sort of” works. Scenarios:

  1. Open/close panel in app = GOOD
  2. Navigate back/forward = BUG (the panel stops responding after a few times)
  3. Pressing back/forward = BUG (panel never opens at all)

What is the proper way to implement panel behaviour associated with query parameters?

import { f7, View, Button, Page, Panel } from 'framework7-react';

const setQuery = (query) => f7?.views?.main?.router.navigate({
    ...f7?.views?.main?.router?.currentRoute,
    query
})

const PanelBug = () => <>
      <Panel 
            opened={f7?.views?.main?.router?.currentRoute?.query?.panel}
            onPanelClosed={()=>setQuery({})}>
            Test content
      </Panel>
  </>

export default () => <Page>
      <PanelBug/>
      <Button onClick={()=>setQuery({panel:Date.now()})}> Panel Working </Button>
      {f7?.views?.main?.router?.currentRoute?.query?.panel}
</Page>
2

I think you need to hook into pageBeforeIn and pageAfterIn page events and show/hide panel there based on route/page query

3

I tried both, they lead to the same issue/behaviour. Am I using it correctly as you suggest though- did you mean to use both or pageBeforeIn OR pageAfterIn ?

Any other ideas? This has had me stuck for a fair while

import React, { useEffect, useState } from 'react'
import { f7, View, Button, Page, Panel } from 'framework7-react';

export default () => {
      const [panelInfo, setPanelInfo] = useState({});
      const onPanel = (load) =>setPanelInfo({load})
      const setStateFromRouter = ({router:{currentRoute:{query}}}) => setPanelInfo(query?.panel)

      const setRoute = (v) => {
            const {router} = f7.views.main
            router.navigate({
                  ...router.currentRoute,
                  query:v ? {panel:v} : {}
            })
      }
   return (<Page 
               // onPageBeforeIn={setStateFromRouter}
               onPageAfterIn={setStateFromRouter}
               >
               <Panel 
                  opened={panelInfo}
                  onPanelClosed={()=>setRoute()}>
                  Test content
            </Panel>
            <Button onClick={()=>setRoute(Date.now())}>
                  Panel open!
            </Button>
  </Page>)}
4

Bump- would appreciate any ideas on fixing this, it’s a strange bug that has me stuck