doctype
html
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name="apple-mobile-web-app-status-bar-style", content="black")
    title My App
    // Path to Framework7 Library CSS
    link(rel="stylesheet", href="../../dist/css/framework7.ios.min.css")
    // Path to your custom app styles
    link(rel="stylesheet", href="css/my-app.css")
  body
    // Status bar overlay for fullscreen mode
    .statusbar-overlay
      
    // Panels overlay
    .panel-overlay
    // Left panel with reveal effect
    .panel.panel-left.panel-reveal
      .content-block
        p Left panel content goes here
    // Right panel with cover effect
    .panel.panel-right.panel-cover
      .content-block
        p Right panel content goes here

    // Views
    .views
      // Left view
      .view.view-left.navbar-through
        .navbar
          .navbar-inner
            .center.sliding Left View
        .pages
          .page(data-page="index-left")
            .page-content
              .content-block-title Left View Links
              .list-block
                ul
                  li
                    a(href="left-page-1.html").item-link
                      .item-content
                        .item-inner
                          .item-title Left Page 1
                  li
                    a(href="left-page-2.html").item-link
                      .item-content
                        .item-inner
                          .item-title Left Page 2
                
              .content-block-title Control Main View
              .list-block
                ul
                  li
                    a(href="about.html", data-view=".view-main").item-link
                      .item-content
                        .item-inner
                          .item-title About
                  li
                    a(href="services.html", data-view=".view-main").item-link
                      .item-content
                        .item-inner
                          .item-title Services
                  li
                    a(href="#", data-view=".view-main").back.item-link
                      .item-content
                        .item-inner
                          .item-title Back in history
      // Right view, it is main view
      .view.view-main.navbar-through
        .navbar
          .navbar-inner
            .center.sliding Main View
        // Pages
        .pages
          // Page, data-page contains page name
          .page(data-page="index-1")
            // Scrollable page content
            .page-content
              .content-block-title Hello
              .content-block
                .content-block-inner
                  p This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.
                  p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.
                  p The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
                  p And of course, your favorite panels are still here: 
                    a(href="#").open-panel left
                    |  and  
                    a(href="#", data-panel="right").open-panel right
              .list-block
                ul
                  li
                    a(href="about.html").item-link
                      .item-content
                        .item-inner
                          .item-title About
                  li
                    a(href="services.html").item-link
                      .item-content
                        .item-inner
                          .item-title Services
                  
    // Path to Framework7 Library JS
    script(type="text/javascript", src="../../dist/js/framework7.min.js")
    // Path to your app js
    script(type="text/javascript", src="js/my-app.js")