How to use panel with route query

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({

const PanelBug = () => <>
            Test content

export default () => <Page>
      <Button onClick={()=>setQuery({})}> Panel Working </Button>

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

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
                  query:v ? {panel:v} : {}
   return (<Page 
               // onPageBeforeIn={setStateFromRouter}
                  Test content
            <Button onClick={()=>setRoute(}>
                  Panel open!

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