Framework7 Show/Hide Navbar Bug

by kerrydp

HTML

<link rel="stylesheet" href="https://framework7.io/packages/core/css/framework7.bundle.min.css">
<script src="https://framework7.io/packages/core/js/framework7.bundle.min.js"></script>

    <!-- App root element -->
    <div id="app">

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Navbar API</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a class="button button-raised hide-navbar">Hide Navbar</a></p>
      <p><a class="button button-raised show-navbar">Show Navbar</a></p>
      <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
      ...
    </div>
  </div>
</div>
      </div>
    </div>

JavaScript

var app = new Framework7({
    // App root element
    root: '#app',
    // App Name
    name: 'Test',
    theme: 'ios',
    statusbar: {
        iosTextColor: 'white',
        iosOverlaysWebView: true}
  });

var $$ = Dom7;

var mainView = app.views.create('.view-main');

$$('.hide-navbar').on('click', function () {
  app.navbar.hide('.navbar');
});
$$('.show-navbar').on('click', function () {
  app.navbar.show('.navbar');
});

// Navbar is initially hidden
app.navbar.hide('.navbar');