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)"))
  
    
  })
  
}
)`