Mobile friendly shiny app map layout with collapsible input panel, for Roke.

app.R

library(shiny)
library(shinyjs)
library(leaflet)

ui <- bootstrapPage(
  
  tags$head(includeCSS("styles.css")),
  
  shinyjs::useShinyjs(),
  
  leafletOutput("map", width = "100%", height = "100%"),
  
  absolutePanel(top = 100, left = 10, draggable = TRUE, width = "20%", 
                style = "z-index:500; min-width: 300px;", id = "controls", 
                
                div(id = "inputs",
                    selectInput("1", "test", "input"),
                    selectInput("2", "test", "input"),
                    selectInput("3", "test", "input"),
                    selectInput("4", "test", "input"),
                    selectInput("5", "test", "input"),
                    selectInput("6", "test", "input"),
                    actionButton("search", "Search", icon = icon("search"))
                ),
                
                shinyjs::hidden(
                    actionButton("show_controls", "Show Controls", icon = icon("filter"))
                )
  )
  
)

server <- function(input, output, session) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-0.1787, 51.5, zoom = 12)
  })
  
  observeEvent(input$search, {
    shinyjs::toggle("inputs", anim = TRUE)
    shinyjs::toggle("show_controls", anim = FALSE)
  })
  
  observeEvent(input$show_controls, {
    shinyjs::toggle("inputs", anim = TRUE)
    shinyjs::toggle("show_controls", anim = FALSE)
  })
  
}

shinyApp(ui, server)

styles.css

html, body {
  width:100%;
  height:100%; 
  font-family: sans-serif;
}

#controls {
  background-color: transparent;
  color: white;
  padding: 0;
  cursor: move;
}

#inputs {
  /* Appearance */
  color: white; 
  background-color: purple;
  padding: 10px;
  opacity: 0.5;
  zoom: 0.9;
  transition: opacity 500ms 0.3s;
}

#inputs:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}