Add input binding to get the currently selected item in the sidebar

[DivadNojnarg]

In the meantime, we may use shiny.setInputValue:

library(shiny)
library(gentelellaShiny)

options(shiny.jquery.version=1)
shinyApp(
  ui = gentelellaPageCustom(
    title = "Shiny Gentelella",
    navbar = gentelellaNavbar(),
    sidebar = gentelellaSidebar(
      sidebarProfile(
        name = "Mark",
        img = "https://image.flaticon.com/icons/svg/236/236831.svg"
      ),
      sidebarDate(),
      sidebarMenu(
        sidebarItem(
          "Tab 1",
          tabName = "tab1"
        ),
        sidebarItem(
          "Tab 2", 
          tabName = "tab2"
        )
      )
    ),
    body = gentelellaBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          tags$head(
            tags$script(
              "$(function() {
                $('li a').on('click', function() {
                  var val = $(this).attr('data-value');
                  Shiny.setInputValue('currentTab', val);
                });
                // trigger click on the first item
                setTimeout(function(){
                  $('li a').first().trigger('click');
                }, 10);
              });
              "
            )
          ),
          "Tab 1 content"
        ),
        tabItem(
          tabName = "tab2",
          "Tab 2 content"
        )
      )
    ),
    footer = gentelellaFooter()
  ),
  server = function(input, output, session) {
    observe(print(input$currentTab))
  }
)

See here to get the related post

[Sebastianlecoz]

Hi, I'm new to css and html. Is it normal this does not work with dynamic tabs ?

Here is my example :

library(shiny)
  library(gentelellaShiny)

  options(shiny.jquery.version=1)
  shinyApp(
    ui = gentelellaPageCustom(
      title = "Shiny Gentelella",
      navbar = gentelellaNavbar(),
      sidebar = gentelellaSidebar(
        sidebarProfile(
          name = "Mark",
          img = "https://image.flaticon.com/icons/svg/236/236831.svg"
        ),
      sidebarDate(),
      sidebarMenu(

          uiOutput("tab11"),

          uiOutput("tab22")

      )
    ),
    body = gentelellaBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          tags$head(
            tags$script(
              "$(function() {
                $('li a').on('click', function() {
                  var val = $(this).attr('data-value');
                  Shiny.setInputValue('currentTab', val);
                });
                // trigger click on the first item
                setTimeout(function(){
                  $('li a').first().trigger('click');
                }, 10);
              });
              "
            )
          ),
          "Tab 1 content"
        ),
        tabItem(
          tabName = "tab2",
          "Tab 2 content"
        )
      )
    ),
    footer = gentelellaFooter()
  ),
  server = function(input, output, session) {
    observe(print(input$currentTab))

    output$tab22 <- renderMenu({

      sidebarItem(" item 1", tabName = "tab2",
       icon =  tags$i(class = "fas fa-exchange-alt", style = "color: rgb(255,255,255)"))

    })
    output$tab11 <- renderMenu({

      sidebarItem("Item 2", tabName = "tab1",
      icon =  tags$i(class = "fas fa-exchange-alt", style = "color: rgb(255,255,255)"))

    })

  }
)`