layout.Rmd

---
title: "Layout"
description: |
  Organize the elements in the UI
output: 
  distill::distill_article:
    toc: true
    toc_float: true
    toc_depth: 4
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, eval = FALSE)
```
Start with a new file: `intro-shiny/babynames/01-layout/app-baby-01.R`

With inputs and outputs established in the UI, we can arrange them with various layout functions.

For readability, each of the existing UI elements will be set to its own variable in the global section, above `ui`.

```{r}
title <- titlePanel("U.S. Baby Names")
src <- p("Source:",
         tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html",
                "Social Security Administration"))
txt_box <- textInput("name", 
                     label = "Enter name",
                     placeholder = "Jane")
txt_disp <- textOutput("name_entered")
tbl_disp <- tableOutput("main_table")
```


# Pre-defined Layouts

Some UI functions are pre-set like `sidebarLayout()`.

```{r}
ui <- fluidPage(

  title,
  src,
  
  # A sidebarLayout with sidebarPanel and mainPanel
  sidebarLayout(
    sidebarPanel(),
    mainPanel()
    )

)
```

Place content within `sidebarPanel()` and `mainPanel()`.

```{r}
ui <- fluidPage(
  
  title,
  src,
  
  # A sidebarLayout with sidebarPanel and mainPanel
  sidebarLayout(
    sidebarPanel(
      txt_box,
      txt_disp
    ),
    mainPanel(
      tbl_disp
    )
  )
)

```

# Rows and Columns

In lieu of pre-defined layouts, you can build your layout with rows and columns using `fluidRow()` or `fixedRow()`. `columns()` are created within `*Row()` . 

<aside>
Set column widths using an integer between 1 and 12. The maximum number of units within a row is 12.
</aside>

You can also embed rows and columns within pre-defined layouts like in the example below.

```{r}
ui <- fluidPage(
  
  title,
  src,
  
  # A sidebarLayout with sidebarPanel and mainPanel
  sidebarLayout(
    sidebarPanel(
      txt_box,
      txt_disp
    ),
    mainPanel(
      # create columns within fluidRow or fixedRow 
      fluidRow(
        column(
          width = 6,
          h3("Table"),
          tbl_disp
        ),
        column(
          width = 6,
          # add a place holder for a plot
          h3("Plot"),
          plotOutput("plot")
        )
      )
    )
  )
  
)
```

While we're in the UI, let's add some additional inputs to the sidebar.

```{r}
ui <- fluidPage(
  
  title,
  src,
  
  # sidebar layout with sidebarPanel and mainPanel
  sidebarLayout(
    sidebarPanel(
      txt_box,
      txt_disp,
      # add a dropdown menu to select state
      selectInput("state",
                  label = 'Select State',
                  choices = unique(df$state),
                  selected = 'Washington')
    ),
    mainPanel(
      fluidRow(
        column(
          width = 6,
          h3("Table"),
          tbl_disp
        ),
        column(
          width = 6,
          # add a place holder for a plot
          h3("Plot"),
          plotOutput("plot")
        )
      )
    )
  )
  
)
```