[SOLVED] How to hide panel and navbar in login page framework7

I’d like to hide correctly the panel and the navbar only in the login page. After login I’d like to show them. I achieve this task partially, because my code has a bad side effect. When I open the app I saw my login page but for few second the navbar appears and then disappears. I’d like to access on login page without this effect. I’d like to see immediatly the login page without them. How can I solve it?

I declared them in my index.html

<div id="app">
    <div class="panel panel-left panel-cover">
        <div class="navbar color-theme-green ">
            <div class="navbar-inner sliding">
                <div class="title">Menu</div>
            </div>
        </div>
        <div class="block">
            <div class="list links-list">
                <ul>
                    <li>
                        <a href="/home/" class="panel-close">
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">graph_square</i>
                                    <i class="material-icons md-only">dashboard</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Home</div>
                                </div>
                            </div>
                        </a>
                    </li>                       
                    <li id="company" style="display:none;">
                        <a href="/company/" class="panel-close" >
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">home</i>
                                    <i class="material-icons md-only">home</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Company</div>
                                </div>
                            </div>
                        </a>    
                    </li>                       
                </ul>
            </div>
        </div>
    </div>
    <!-- Top Navbar -->
    <div class="navbar color-theme-green">
        <div class="navbar-inner sliding">
            <div class="left">
                <a class="link panel-open">
                    <i class="f7-icons ios-only">menu</i>
                    <i class="material-icons md-only">menu</i>
                    <!--<span class="ios-only">Back</span>-->
                </a>

                <a class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                </a>
            </div>
            <div class="title">My app</div>             
        </div>
    </div>

    <div class="view view-main"></div>

This is my config file app.js where I show and hide the elements on pageInitEvent

   var $ = Dom7;

var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'myApp',
// App id
id: 'it.myapp.myApp',
theme: 'auto',
version: '0.0.1',
cacheDuration: 0,
cache: false,
stackPages: true,
preloadPreviousPage: true,


panel: {
    swipe: 'right',
    swipeNoFollow: true
},
/**
 * Routes
 */
routes: [
    {
        name: 'home',
        path: '/home/',
        url: './pages/home.html',
        on: {
            pageInit:   function(e, page) {

                            app.navbar.show('.navbar');                                             
                            page.router.clearPreviousHistory();
                        }

        },
    },
    {
        name: 'login',
        path: '/login/',
        url: './pages/login.html',
        on:{ 
                pageInit: function(){
                    app.navbar.hide('.navbar');

                    }
            },
    }

}

And finally this is my login.html page where I put no-navbar in orderd to hide it.

<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
    <!-- Login form -->
    <form id="form-login">
        <div class="row justify-content-center">
            <div class="col-100 tablet-80 desktop-50">
                <div class="card head-card-forest">
                    <div class="card-header">
                        <span></span><h2>Login</h2><span></span>
                    </div>
                    <div class="card-content card-content-padding">                             
                        <div class="row">
                            <div class="col-100 tablet-auto desktop-auto">
                                <div class="list no-hairlines-md">
                                    <ul>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Email</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="username"  placeholder="Username">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Password</div>
                                                <div class="item-input-wrap">
                                                    <input type="password" name="password"  placeholder="Password">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="block">
                                    <div class="row">
                                        <a class="col button button-fill" id="button-login" onclick="getLogin()"> Accedi </a>
                                    </div>                                      
                                </div>
                            </div><!--col-->                                    
                        </div><!--row-->
                    </div><!--card-content-->
                </div><!--.card-->                              
            </div><!--.col-->                   
        </div><!--.row-->   
    </form>
</div> <!-- ./ page-content -->

I Solved the issue deleting the top navbar in index.html