Panel swipe not working?

1

Hi,

I am in the process of migrating from V4 to V5+, in doing so things for the most part are working good, however the panel swipe does not seem to work.

Following the migration guide I created the panel as an object and make the calls for width etc. When setting the object

  panel = app.panel.create({
    el: '.panel-left',
    swipe: true
  });
panel.enableSwipe('left');

it loads up just fine however the swipe to open or close does not seem to be working as it had previously. Is there anything else I need to set?

I will also note, there are no errors in the console.

2

Please post whole related code, including layout of the panel

https://forum.framework7.io/t/how-to-ask-a-good-question-on-forum/11172/4

3

@nolimits4web

This is the full function where I call the panel ( this also build out the header / footer )

Basically, it creates the panel, then depending on if specific items are open or a page that has swipe capabilities it will disable the swipe.

function buildHeader(style,swipe){
  panel = app.panel.create({
    el: '.panel-left',
    swipe: true


  });
  panel.enableSwipe('left');

  if ( swipe != undefined && swipe == "noSwipe")
  {
    panel.disableSwipe('left')
  }else{
    panel.enableSwipe('left')
  }
  if (isWeb != true) {
    $$(".topLogo").html("<img src='" + localStorage.getItem('topLogoURI') + "' id='headerTopLogo'>");
  }else{
    $$(".topLogo").html("<img src='" + localStorage.getItem('logoURL') + "' id='headerTopLogo'>");
  }
  //now build the side slideout
  $$(".sideNav").html(fullSideMenuOut);
  //Change the header and footer colors
  bannerColorNew(style);
  //we also want to check the alerts and see if we should build a badge for the alerts bar

  if (localStorage.getItem('alertsOld') != localStorage.getItem('alerts')) {
    //we know they do not match, lets see by how many
    let oldMsgCount = "0";
    let currentMsgCount = "0";
    if ( localStorage.getItem("alertsOld") == "" )
    {
      localStorage.setItem("alertsOld","[]");
    }
    oldMsgCount = JSON.parse(localStorage.getItem('alertsOld')).length;
    currentMsgCount = JSON.parse(localStorage.getItem('alerts')).length;
    let badgeCount = currentMsgCount - oldMsgCount;

      $$(".bottomBtn-alert").html('<i class="f7-icons icon material-icons md-only">bell_fill<span class="badge color-red">' + badgeCount + '</span></i><span class="tabbar-label">Alerts</span>');


     }

}

Each page has the same panel code that we inject in the actual panel on the page init

<div class="navbar"><div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left webbar">
        <a href="#" class="link icon-only panel-open" data-panel="left">
          <i class="icon f7-icons ios-only">menu</i>
          <i class="icon material-icons md-only">menu</i>
        </a>
      </div>
      <div class="topLogo"></div>
      <div class="right">


      </div>
    </div>
  </div>