---
title: "Left menu in the navbar"
author: "David Granjon"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Left menu in the navbar}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

## Introduction

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 navbar. You just have to pass the "left_menu" argument
to the `dashboardHeaderPlus()` function. All elements should be embbeded in a `tagList()`,
as shown below.

<video width="640" height="480" controls style="display: block; margin: 0 auto;">
  <source src="figures/navbar-left-menu.mp4" type="video/mp4">
</video>

<br>

```r
 library(shiny)
 library(shinyWidgets)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPagePlus(
     header = dashboardHeaderPlus(
       enable_rightsidebar = TRUE,
       rightSidebarIcon = "gears",
       left_menu = tagList(
         dropdownButton(
           label = "Controls",
           icon = icon("sliders"),
           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("remove")
           )
         ),
         dropdownMenu(
           type = "messages", 
           badgeStatus = "success",
           messageItem("Support Team", "This is the content of a message.", time = "5 mins"),
           messageItem("Support Team", "This is the content of another message.", time = "2 hours"),
           messageItem("New User", "Can I get some help?", time = "Today")
         )
       ),
       dropdownMenu(
        type = "tasks", 
        badgeStatus = "danger",
        taskItem(value = 20, color = "aqua", "Refactor code"),
        taskItem(value = 40, color = "green", "Design new layout"),
        taskItem(value = 60, color = "yellow", "Another task"),
        taskItem(value = 80, color = "red", "Write documentation")
       )
     ),
     sidebar = dashboardSidebar(),
     body = dashboardBody(
       setShadow(class = "dropdown-menu")
     ),
     rightsidebar = rightSidebar(),
     title = "DashboardPage"
   ),
   server = function(input, output) { }
 )
```

This new feature perfectly works with the `dropdownButton()` from shinyWidgets packages
by [dreamRs](https://twitter.com/_pvictorr) (as long as the screen size is large enough), 
as well as the classic `dropdownMenu()` from shinydashboard. 
It works less with other individual elements, for a space reason, mainly.
Indeed, a `sliderInput()` would not be optimized to be inserted in the header 
because of the 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** to change basic shiny elements. 

## 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 but only outside and is optimized to
correctly render with mobiles (contrary to `dropdownButton()`, see above).

```r
library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears",
      left_menu = tagList(
        dropdownBlock(
          id = "mydropdown",
          title = "Dropdown 1",
          icon = "sliders",
          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("remove")
          )
        ),
        dropdownBlock(
          id = "mydropdown2",
          title = "Dropdown 2",
          icon = "sliders",
          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"
          )
        )
      ),
      dropdownMenu(
        type = "tasks", 
        badgeStatus = "danger",
        taskItem(value = 20, color = "aqua", "Refactor code"),
        taskItem(value = 40, color = "green", "Design new layout"),
        taskItem(value = 60, color = "yellow", "Another task"),
        taskItem(value = 80, color = "red", "Write documentation")
      )
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      setShadow(class = "dropdown-menu")
    ),
    rightsidebar = rightSidebar(),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)
```