---
title: "Single-Layout"
author: "David Granjon"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Single-Layout}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

shinyMobile comes with 3 predefined layouts. `f7SingleLayout()` is dedicated to build simple, 
one-page apps or gadgets.

<div class="marvel-device iphone-x">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="bottom-bar"></div>
<div class="volume"></div>
<div class="overflow">
<div class="shadow shadow--tr"></div>
<div class="shadow shadow--tl"></div>
<div class="shadow shadow--br"></div>
<div class="shadow shadow--bl"></div>
</div>
<div class="inner-shadow"></div>
<div class="screen">
<iframe width="100%" src="https://dgranjon.shinyapps.io/miniUI2Single" allowfullscreen="" frameborder="0" scrolling="no" height="720px"></iframe>
</div>
</div>

```r
library(shiny)
library(shinyMobile)
library(echarts4r)

plot <- USArrests %>%
  dplyr::mutate(
    State = row.names(.),
    Rape = -Rape
  ) %>%
  e_charts(State) %>%
  e_line(Murder) %>%
  e_area(Rape, name = "Sick basterd", x_index = 1) %>%  # second y axis
  e_title("Your plot", "Subtext", sublink = "https://john-coene.com") %>%
  e_x_axis(1, show = FALSE) # hide scond X Axis

shiny::shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Single Layout",
        hairline = TRUE,
        shadow = TRUE
      ),
      toolbar = f7Toolbar(
        position = "bottom",
        f7Link(label = "Link 1", src = "https://www.google.com"),
        f7Link(label = "Link 2", src = "https://www.google.com", external = TRUE)
      ),
      # main content
      f7Shadow(
        intensity = 16,
        hover = TRUE,
        f7Card(
          title = "Card header",
          plot,
          footer = tagList(
            f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
            f7Badge("Badge", color = "green")
          )
        )
      )
    )
  ),
  server = function(input, output) {
    output$distPlot <- renderPlot({
      dist <- rnorm(input$obs)
      hist(dist)
    })
  }
)
```
