When using startExpanded = TRUE the arrow icon isn't pointing downwards

[ismirsehregal]

When using the startExpanded parameter for childfull menuItems the arrow icon is using fa-angle-left when first invoking the app (Maybe this is because the parent li.treeview tag isn't getting updated with class "active"?). Instead it should point downwards (using fa-angle-down), to be aligned with the behaviour when clicking the menuItem manually:

Example code:

library(shiny)
library(shinydashboard)

ui <- function(req) {
  dashboardPage(
    dashboardHeader(title = "Simple tabs"),
    dashboardSidebar(
      sidebarMenu(
        id = "sidebarItemSelected",
        menuItem(
          "Childfull menuItem 1",
          menuItem(
            "Childless menuItem 1",
            tabName = "childlessTab1",
            icon = icon("dashboard"),
            selected = TRUE
          ),
          # fileInput("upload", "Upload"),
          bookmarkButton(),
          expandedName = "childfullMenuItem1",
          startExpanded = TRUE
        ),
        menuItem(
          "Childfull menuItem 2",
          menuItem(
            "Childless menuItem 2",
            icon = icon("th"),
            tabName = "childlessTab2",
            badgeLabel = "new",
            badgeColor = "green"
          ),
          expandedName = "childfullMenuItem2"
        )
      )
    ),
    dashboardBody(tabItems(
      tabItem(tabName = "childlessTab1",
              h2("Dashboard tab content")),
      tabItem(tabName = "childlessTab2",
              h2("Widgets tab content"))
    ))
  )
}

server <- function(input, output, session) {
  observe({
    cat(
      paste(
        "\nsidebarItemSelected:",
        input$sidebarItemSelected,
        "\nsidebarItemExpanded:",
        input$sidebarItemExpanded,
        "\nsidebarCollapsed:",
        input$sidebarCollapsed,
        "\n"
      )
    )
  })
}

shinyApp(ui, server, enableBookmarking = "url")

[ghost]

I am running into the same problem if I select another menuItem before first collapsing the current menuItem.

[ismirsehregal]

As a workaround the currently opened menu can be monitored via JS to update the icon accordingly:

library(shiny)
library(shinydashboard)
library(htmltools)

ui <- function(req) {
  dashboardPage(
    dashboardHeader(title = "Simple tabs"),
    dashboardSidebar(
      sidebarMenu(
        id = "sidebarItemSelected",
        menuItem(
          "Childfull menuItem 1",
          menuItem(
            "Childless menuItem 1",
            tabName = "childlessTab1",
            icon = icon("dashboard"),
            selected = TRUE
          ),
          # fileInput("upload", "Upload"),
          bookmarkButton(),
          expandedName = "childfullMenuItem1",
          startExpanded = TRUE
        ),
        menuItem(
          "Childfull menuItem 2",
          menuItem(
            "Childless menuItem 2",
            icon = icon("th"),
            tabName = "childlessTab2",
            badgeLabel = "new",
            badgeColor = "green"
          ),
          expandedName = "childfullMenuItem2"
        )
      )
    ),
    dashboardBody(
      tags$head(
        tags$script(HTML(
          "
          function checkSidebarIcons() {
            var x = document.getElementById('sidebarItemExpanded');
             if(x){
               const col = x.getElementsByClassName('treeview');
                for (let i = 0; i < col.length; i++) {
                var tar = col[i].getElementsByClassName('fas pull-right')[0];
                  if(col[i].getElementsByClassName('menu-open').length > 0){
                    if(tar.classList.contains('fa-angle-left')){
                      tar.classList.add('fa-angle-down');
                      tar.classList.remove('fa-angle-left');
                    }
                  } else {
                    if(tar.classList.contains('fa-angle-down')){
                      tar.classList.add('fa-angle-left');
                      tar.classList.remove('fa-angle-down');
                    }
                  }
                };
             };
             return null;
          };
          // needed if startExpanded = TRUE
          $(document).on('shiny:connected', function(event) {
            checkSidebarIcons();
          });
          $(document).on('click','#sidebarItemExpanded', function () {
            checkSidebarIcons();
          });
          "
        ))
      ),
      tabItems(
        tabItem(tabName = "childlessTab1",
                h2("Dashboard tab content")),
        tabItem(tabName = "childlessTab2",
                h2("Widgets tab content"))
      )
    )
  )
}

server <- function(input, output, session) {
  observe({
    cat(
      paste(
        "\nsidebarItemSelected:",
        input$sidebarItemSelected,
        "\nsidebarItemExpanded:",
        input$sidebarItemExpanded,
        "\nsidebarCollapsed:",
        input$sidebarCollapsed,
        "\n"
      )
    )
  })
}

shinyApp(ui, server, enableBookmarking = "url")