r - Shiny WebApp and UI: add style and dropdown menu in the header

Question

I'm just starting using R and Shiny App and I'm a bit confused about how to achieve what I'm trying to do. I want to change the UI of my Shiny App. As a C# developer, I work with HTML/CSS, AdminLTE and so on. I can't find a proper documentation how to change the UI in a Shiny App.

What I want to achieve in the UI is something like the following image:

First, I removed the sidebar. Now, my problem is to box the UI. In the header, I want to add a dropdown menu with few options. Then, I want in the middle of the page to have a panel with 2 column: in the first column first row I desire to see the graph generate by R, then same text around it to explain the graph.

On top of that, I want to change the style for example of tabs or buttons.

After 2 days of work, I wrote this code but it is very far from what I want to achieve.

library(shiny)
library(shinydashboard)
 
# Define UI for application that draws a histogram
ui <- navbarPage(
    "Test",
    tabPanel(
        "Introduction",
        titlePanel(
            div(
                windowTitle = "Test window"
            )
        ),
        div(class = "my-class", 
            h3("LAI287 basal insulin study"),
            p("Lorem ipsum dolor sit amet..."),
            p("Lorem ipsum dolor sit amet..."),
            actionButton(
                inputId = "btnStart",
                label = "Start analysis",
                className = "btn-primary"
            )
        )
    ),
    tabPanel(
        "Attribute specification"
    ),
    tabPanel(
        dropdownMenu(type = "notifications",
                     notificationItem(
                         text = "5 new users today",
                         icon("users")
                     ),
                     notificationItem(
                         text = "12 items delivered",
                         icon("truck"),
                         status = "success"
                     ),
                     notificationItem(
                         text = "Server load at 86%",
                         icon = icon("exclamation-triangle"),
                         status = "warning"
                     )
        )
    )
)
 
# Define server logic required to draw a histogram
server <- function(input, output) {
    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
 
        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}
 
# Run the application 
shinyApp(ui = ui, server = server)

The result of this code is in the following screenshot. The only dropdown I found was for messages or notifications.

I know AdminLTE quite well but I don't understand how to write the code for Shiny App. Do you have any idea or suggestion how I can implement this UI? Is there any good tutorial I can read?

Update

I found some documentation on RStudio Shiny dashboard. First, I don't understand the difference between dashboardPage and navbarPage. Can I add a navbarPage to a dashboardPage?

From the documentation, I added this code:

box(
  title = "Histogram", status = "primary", solidHeader = TRUE,
  collapsible = TRUE,
  plotOutput("plot3", height = 250)
),

box(
  title = "Inputs", status = "warning", solidHeader = TRUE,
  "Box content here", br(), "More box content",
  sliderInput("slider", "Slider input:", 1, 100, 50),
  textInput("text", "Text input:")
)

and I expect something like

but my result is like that (thanks Jan for the menu)

I saw on the other page of the documentation that it is possible to add

dashboardPage(skin = "blue")

but in my case I don't have a dashboardPage.

Answer 1

Are you aware of the navbarMenu function? You can add menu items to the navbarPage with it:

navbarPage("App Title",
  tabPanel("Plot"),
  navbarMenu("More",
    tabPanel("Summary"),
    "----",
    "Section header",
    tabPanel("Table")
  )
)

Layouting can be done with fluid layouts, e.g.

fluidRow(
    column(width = 4,
      "4"
    ),
    column(width = 3, offset = 2,
      "3 offset 2"
    )

See the layout guide for the necessary details.