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-cover
      // Left view
      .view.view-left.navbar-through
        .navbar
          .navbar-inner
            .left
            .center.sliding Left View
            .right
        .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.close-panel
                      .item-content
                        .item-inner
                          .item-title About
                  li
                    a(href="services.html", data-view=".view-main").item-link.close-panel
                      .item-content
                        .item-inner
                          .item-title Services
                  li
                    a(href="#", data-view=".view-main").back.item-link.close-panel
                      .item-content
                        .item-inner
                          .item-title Back in history
    // Right panel with cover effect
    .panel.panel-right.panel-reveal
      .content-block
        p Right panel content goes here
    // Views
    .views
      // Right view, it is main view
      .view.view-main.navbar-through
        .navbar
          .navbar-inner
            .center.sliding Main View
            .right
              a(href="#", data-panel="left").link.open-panel.icon-only
                i.icon.icon-bars
        // 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 where left view degrades to panel on narrow screens (iPad portrait and iPhone). It behaves like default Mail app on iOS 7.
                  p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar. You can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
                  p Additional right panel is also available: 
                    a(href="#", data-panel="right").open-panel right panel
              .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")