Ad

How To Disable The Use Of Sidebars On All Pages Except The Main One? (framework7)

- 1 answer

I have this in my-app.js

let $$ = Dom7;

let app  = new Framework7({
    root: '#app',
    id: 'com.framework7.bazza',
    name: 'Bazza',
    theme: 'auto',
    pushState: true,
    data: function () {
        return {
            user: {
                firstName: 'John',
                lastName: 'Doe',
            },
        };
    },
    routes: routes,
    panel: {
        swipe: 'both',
        leftBreakpoint: 960,
    },
});

Here is what i did in routes.js, and it worked:

routes = [
    {
    name: 'index',
    path: '/',
    url: './index.html',
    beforeEnter: function (routeTo, routeFrom, resolve) {
        app.panel.enableSwipe();
            resolve();
    },
    beforeLeave: function (routeTo, routeFrom, resolve) {
        app.panel.disableSwipe();
            resolve();
    }
},
    {
        name: 'about',
        path: '/about/',
        url: './about.html',
    },
    ];
Useful links:

https://framework7.io/docs/panel.html#app-and-panel-instance-eventshttps://framework7.io/docs/routes.html#route-before-enter-leave

Thanks to mate from below!)

Ad

Answer

I read the docs and basically in your home page route, you have access to beforeEnter and beforeLeave event. Basically, you can enable panel before enter and disable before leave. app.panel.enableSwipe on entering home page and disableSwipe on leaving. Check https://framework7.io/docs/panel.html#app-and-panel-instance-events and https://framework7.io/docs/routes.html#route-before-enter-leave

Ad
source: stackoverflow.com
Ad