Framework7 Starter

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.5/css/framework7.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.5/js/framework7.js"></script>
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></div>
  <div class='left-panel-custom'></div>
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main test">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link" onclick='togglePanel' id='togglePanel'>Click Me</a>
          </div>
          <div class="title">Page Title</div>
          <div class="right">
          </div>
        </div>
      </div>

      <!-- Bottom Toolbar -->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <p>Page content goes here</p>
        <!-- Link to another page -->
        <a href="/about/">About app</a>
      </div>
    </div>
  </div>
</div>

CSS

.left-panel-custom {
  width: 100vw;
  height: 100vh;
  background: green;
  z-index: 4000;
  position: absolute;
  top: 0;
  left: 0;
}

.test{
  transition: all .8s ease;
}

.show-panel {
  transform: translate(80%, 5%);
  height: 95%;
}

JavaScript

// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // App root methods
  methods: {
    helloWorld: function() {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: [],
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'
});


$$('#togglePanel').on('click', togglePanel)

function togglePanel () {
debugger
	let el = document.getElementsByClassName('test')[0]
  el.classList.contains('show-panel') ? el.classList.remove('show-panel') : el.classList.add('show-panel')
}