How to clean up the shiny sidebar UI

Question

I want to make the text and UI on the sidebar of shiny easier to see. In other words, I want to create an enclosure like a separator.

Specifically, https://shiny.rstudio.com/gallery/radiant.html I want to create a sidebar developed in.

For example, "data sets:", "Load data of type:", and "Save data to type:" are enclosed. How can I change the UI like this?

Below is a sample code.

library(shiny)
library(leaflet)
library(leaflet.extras)

ui <- fluidPage(
  titlePanel("ShinyApp"),
  sidebarLayout(
    sidebarPanel(
      h3("Separate1"),
      h3("Separate2"),
      h3("Separate3"),
      h3("Separate4"),
      h3("Separate5"),
      
    ),
    
    mainPanel(
      leafletOutput('maps')
    )
  )
)

server <- function(input, output, session) {
  
  output$maps <- renderLeaflet({leaflet()%>%addTiles()})
  
}
shinyApp(ui, server)

I recognize that the part to be edited is the part of ui.r. Separate1 to Separate5 are displayed on the sidebar. How can I add an enclosure to Separate1 to Separate5 as shown in the URL? I want you to tell me.

Answer 1

Will this do?

library(shiny)
library(leaflet)

ui <- fluidPage(
    titlePanel("ShinyApp"),
    sidebarLayout(
        sidebarPanel(
            div(style='border: 1px solid grey; margin:1px;',
                h3("Separate1")
            ),
            div(style='border: 1px solid grey; margin:1px;',
                h3("Separate2")
            ),
            div(style='border: 1px solid grey; margin:1px;',
                h3("Separate3")
            ),
            div(style='border: 1px solid grey; margin:1px;',
                h3("Separate4")
            ),
            div(style='border: 1px solid grey; margin:1px;',
                h3("Separate5")
            )
            
        ),
        mainPanel(
            leafletOutput('maps')
        )
    )
)

server <- function(input, output, session) {
    
    output$maps <- renderLeaflet({
        leaflet() %>%
            addTiles()
    })
    
}
shinyApp(ui, server)