# Enhanced Header Elements

#### David Granjon

#### 2024-08-18

## Left Navbar Elements

By default with `{shinydashboard}`, all elements included in the navbar will be displayed on the right side. `{shinydashboardPlus}` has a new option to add elements in the left part of the `dashboardHeader()`. Such items must be passed in the leftUi argument (if multiple elements, they must be wrapped in a `tagList()`, as shown below).

    library(shiny)
    library(shinyWidgets)
    library(shinydashboard)
    library(shinydashboardPlus)
     shinyApp(
       ui = dashboardPage(
         header = dashboardHeader(
           leftUi = tagList(
             dropdownButton(
               label = "Controls",
               icon = icon("sliders-h"),
               status = "primary",
               circle = FALSE,
               sliderInput(
                 inputId = "n",
                 label = "Number of observations",
                 min = 10, max = 100, value = 30
               ),
               prettyToggle(
                 inputId = "na",
                 label_on = "NAs kept",
                 label_off = "NAs removed",
                 icon_on = icon("check"),
                 icon_off = icon("trash")
               )
             ),
             dropdownMenu(
               type = "messages",
               badgeStatus = "success",
               messageItem(from = "Support Team", message = "This is the content of a message.", time = "5 mins"),
               messageItem(from = "Support Team", message = "This is the content of another message.", time = "2 hours"),
               messageItem(from = "New User", message = "Can I get some help?", time = "Today")
             )
           )
         ),
         sidebar = dashboardSidebar(),
         body = dashboardBody(
           setShadow(class = "dropdown-menu")
         ),
         title = "DashboardPage"
       ),
       server = function(input, output) { }
     )

This new feature perfectly works with the `dropdownButton()` from the `{shinyWidgets}` packages by dreamRs (as long as the screen size is large enough), as well as the classic `dropdownMenu()` from `{shinydashboard}`. With other individual elements, the result may not be as good, mainly for a space reason. Indeed, a `sliderInput()` would not be optimized to be embedded in the header since its label which takes too much space. This would require some CSS tricks, namely, reducing the slider size, and this is not the philosophy of `{shinydashboardPlus}`.

## Improved `dropdownMenu()`

The new function `dropdownBlock()` make it easy to embed input elements in a left navbar menu. It does not hide when the user click inside and is optimized to correctly render on mobile devices (contrary to `dropdownButton()`, see above).

    shinyApp(
      ui = dashboardPage(
        header = dashboardHeader(
          leftUi = tagList(
            dropdownBlock(
              id = "mydropdown",
              title = "Dropdown 1",
              icon = "sliders-h",
              sliderInput(
                inputId = "n",
                label = "Number of observations",
                min = 10, max = 100, value = 30
              ),
              prettyToggle(
                inputId = "na",
                label_on = "NAs kept",
                label_off = "NAs removed",
                icon_on = icon("check"),
                icon_off = icon("trash")
              )
            ),
            dropdownBlock(
              id = "mydropdown2",
              title = "Dropdown 2",
              icon = "sliders-h",
              prettySwitch(
                inputId = "switch4",
                label = "Fill switch with status:",
                fill = TRUE,
                status = "primary"
              ),
              prettyCheckboxGroup(
                inputId = "checkgroup2",
                label = "Click me!",
                thick = TRUE,
                choices = c("Click me !", "Me !", "Or me !"),
                animation = "pulse",
                status = "info"
              )
            )
          )
        ),
        sidebar = dashboardSidebar(),
        body = dashboardBody(
          setShadow(class = "dropdown-menu")
        ),
        title = "DashboardPage"
      ),
      server = function(input, output) { }
    )

## Other navbar items

### Enhanced dropdownMenu Items

In `{shinydashboardPlus}`, `taskItem()`, `messageItem()` and `notificationItem` have a new inputId parameter allowing them to behave like `shiny::actionButton`. This has always been quite frustrating not to be able to interact more with these elements in `{shinydashboard}`.

### dashboardUser Component

In the same spirit of the `sidebarUserPanel()` that display user informations on the sidebar, the brand new `dashboardUser()` dropdown component may be used as an admin panel or to display further information. `dashboardUserItem()` provides a refined column container.

Code

    library(shiny)
    library(shinydashboard)
    library(shinydashboardPlus)

    shinyApp(
      ui = dashboardPage(
        header = dashboardHeader(userOutput("user")),
        sidebar = dashboardSidebar(),
        body = dashboardBody(),
        title = "User dropdown"
      ),
      server = function(input, output) {
       output$user <- renderUser({
        dashboardUser(
           name = "Divad Nojnarg",
           image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
           title = "shinydashboardPlus",
           subtitle = "Author",
           footer = p("The footer", class = "text-center"),
           fluidRow(
            dashboardUserItem(
             width = 6,
             socialButton(
              href = "https://dropbox.com",
              icon = icon("dropbox")
             )
            ),
            dashboardUserItem(
             width = 6,
             socialButton(
              href = "https://github.com",
              icon = icon("github")
             )
            )
           )
          )
       })
      }
     )