ui <- dashboardPagePlus(
  title = "RadaR",
  skin = "black", collapse_sidebar = TRUE, sidebar_background = "light", 
  # HEADER ------------------------------------------------------------------
  
  dashboardHeader(
    title = span(img(src = "radar.png", height = 30), strong("RadaR 2.0")),
    titleWidth = 500,
    
    tags$li(
      a(
        strong("About RadaR"),
        height = 40,
        href = "https://www.jmir.org/2019/6/e12843/",
        title = "",
        target = "_blank"
      ),
      class = "dropdown",
    )
  ),
  
  # SIDEBAR -----------------------------------------------------------------
  
  dashboardSidebar(disable = TRUE,
                   sidebarMenu(id = "sidebar_id",
                               menuItem(icon = icon("check-square"),
                                        materialSwitch(
                                          inputId = "allInput",
                                          label = "All specialties selected", 
                                          value = TRUE, 
                                          status = "danger")),
                     menuItem(icon = icon("user-nurse"), 
                              checkboxGroupInput(inputId = "specialtyInput", 
                                                 label = "Select specialties", 
                                                 choices = sort(unique(radar_data$specialty_shiny)))),
                     menuItem(icon = icon("hospital"),
                              checkboxGroupInput(inputId = "departmentInput", 
                                                 label = "Select departments" ,
                                                 choices = sort(unique(radar_data$department))))
                     )
                   ),
  
  
  # BODY --------------------------------------------------------------------
  
  dashboardBody(
    
    # fluidRow(
    #   column = 12,
    # infoBoxOutput(outputId = "no_tests", width = 4),
    # infoBoxOutput(outputId = "no_pos", width = 4),
    # infoBoxOutput(outputId = "top_mo", width = 4)
    # ),
    # br(),
    fluidRow(
      tags$style(
      ".nav-tabs {background-color: white;}
      .nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {background-color: transparent; border-color: transparent;}
      .nav-tabs-custom .nav-tabs li.active {border-top-color: black;}"),
      div(
        id = "resistance", 
        column(
          width = 6,
          uiOutput("box2")

        ),
        column(
          width = 6,
          uiOutput("box1")
        ),
        column(
          width = 6,
          uiOutput("box3")
        ),
        column(
          width = 6,
          uiOutput("box4")
        )
      )
    )
  )
)