Shiny layout, is it possible to have a left and ride sidebarLayout in Shiny?

Question

In Shiny is it possible to have a layout like this?

I would ideally like a left and right sidebar (I have seen some solutions in shinydashboardPlus but this is not exactly what I am after...)

I have an app with a similar structure to this example:

mychoices <- c("pick me A", 
               "pick me - a very long name here", 
               "no pick me - B", 
               "another one that is long")

ui <- 
  navbarPage(
    tabPanel("Dataset description",
    ),
    tabPanel("Data",
             sidebarLayout(
               sidebarPanel(
                 fluidRow(
                   column(2,
                          p(strong("Classes")),
                          actionButton(inputId = "selectall", label="Select/Deselect all",
                                       style='padding:12px; font-size:80%'),
                          br(), br(),
                          checkboxGroupButtons(
                            inputId = "classes",
                            choices = mychoices,
                            selected = mychoices,
                            direction = "vertical",
                            width = "100%",
                            size = "xs",
                            checkIcon = list(
                              yes = icon("ok", 
                                         lib = "glyphicon"))
                          ),
                   ),
                   column(6,
                          br()
                   ),
                   column(4,
                          p(strong("Controls")),
                          p("Transparency"),
                          sliderInput("trans", NULL,
                                      min = 0,  max = 1, value = .5),
                          actionButton("resetButton", "Zoom/reset plot", 
                                       style='padding:6px; font-size:80%'),
                          actionButton("clear", "Clear selection", 
                                       style='padding:6px; font-size:80%'),
                          actionButton("resetColours", "Reset colours", 
                                       style='padding:6px; font-size:80%'),
                   )
                 )
               ),
               mainPanel(
                 tabsetPanel(type = "tabs",
                             tabPanel("Scatter", id = "panel1",
                                      plotOutput(outputId = "scatter")),
                             tabPanel("PCA", id = "panel2"))
               )
             ))
  )


server <- function(input, output) {}

shinyApp(ui, server)

Ideally I would like to split the sidebarLayout so that one column is on the left (classes), and one on the right (controls) as when the app loads the two columns are overlapping like this.

Any suggestions on a better an app design or solutions to this please?

Answer 1

Maybe this is what you are looking for. Was just an idea ... so I dropped the sidebarLayout and added a second sidebarPanel. To make sure that both sidebars and the main panel fit in one row I used the width argument.

library(shiny)
library(shinyWidgets)

mychoices <- c(
  "pick me A",
  "pick me - a very long name here",
  "no pick me - B",
  "another one that is long"
)

ui <-
  navbarPage(
    tabPanel("Dataset description", ),
    tabPanel(
      "Data",
      sidebarPanel(
        width = 3,
        p(strong("Classes")),
        actionButton(
          inputId = "selectall", label = "Select/Deselect all",
          style = "padding:12px; font-size:80%"
        ),
        br(), br(),
        checkboxGroupButtons(
          inputId = "classes",
          choices = mychoices,
          selected = mychoices,
          direction = "vertical",
          width = "100%",
          size = "xs",
          checkIcon = list(
            yes = icon("ok",
              lib = "glyphicon"
            )
          )
        )
      ),
      mainPanel(
        width = 6,
        tabsetPanel(
          type = "tabs",
          tabPanel("Scatter",
            id = "panel1",
            plotOutput(outputId = "scatter")
          ),
          tabPanel("PCA", id = "panel2")
        )
      ),
      sidebarPanel(
        width = 3,
        p(strong("Controls")),
        p("Transparency"),
        sliderInput("trans", NULL,
          min = 0, max = 1, value = .5
        ),
        actionButton("resetButton", "Zoom/reset plot",
          style = "padding:6px; font-size:80%"
        ),
        actionButton("clear", "Clear selection",
          style = "padding:6px; font-size:80%"
        ),
        actionButton("resetColours", "Reset colours",
          style = "padding:6px; font-size:80%"
        )
      )
    )
  )


server <- function(input, output) {}

shinyApp(ui, server)