How to capture tabName of selected sidebar item in argonDash sidebar

I'm building a Shiny dashboard using the argonDash package, and I need to capture the tabName of the selected item from the argonDashSidebar in a reactive way so that I can use it elsewhere in my app (e.g., display it or trigger certain events). In shinydashboard, we can easily retrieve the tabName of a selected sidebar item through input$sidebar_menu, but this doesn't seem to work with argonDash.

I've tried using shinyjs to listen for click events, but I still can't get the tabName to behave reactively like it does in shinydashboard. The input$sidebar_menu doesn't seem to update with the tabName of the selected argonSidebarItem.

What I need: I want to reactively capture the tabName of the selected item from argonDashSidebar (similar to input$sidebar_menu in shinydashboard). Display this captured tabName somewhere in the UI as an example. Reproducible Example:

Here is a simplified version of my Shiny app to demonstrate what I’m trying to achieve:

library(shiny)
library(argonR)
library(argonDash)
library(shinyjs)

# UI
argonSidebar <- argonDashSidebar(
  vertical = TRUE,
  skin = "light",
  background = "white",
  size = "md",
  side = "left",
  id = "my_sidebar",
  icon = tags$img(src = "logo.png", alt = "custom icon"),
  br(),
  argonSidebarMenu(
    id = "sidebar_menu",
    argonSidebarItem(
      tabName = "cards",
      icon = argonIcon(name = "tv-2", color = "info"),
      "Overview",
      id = "item_cards"
    ),
    argonSidebarItem(
      tabName = "tables",
      icon = argonIcon(name = "bullet-list-67", color = "red"),
      "Charts",
      id = "item_tables"
    ),
    argonSidebarItem(
      tabName = "bulletin",
      icon = argonIcon(name = "book-bookmark", color = "green"),
      "Bulletin",
      id = "item_bulletin"
    )
  )
)

server <- function(input, output, session) {
  # I'd like to reactively capture the tabName of the selected sidebar item.
  
  # Example: I want to display the currently selected tabName
  output$selected_tab_display <- renderText({
    # Placeholder: This should display the current tabName
    paste("Selected tab is:", input$sidebar_menu)
  })
}

# Main UI
ui <- argonDashPage(
  useShinyjs(),
  sidebar = argonSidebar,
  body = argonDashBody(
    h2(textOutput("selected_tab_display"))  # Display the selected tabName here
  )
)

shinyApp(ui, server)

In this example, I want input$sidebar_menu to reflect the currently selected sidebar item (tabName), but it doesn't seem to work like it does in shinydashboard. How can I capture the tabName of the selected item in argonDashSidebar?

This is currently not natively supported, but a solution is given in RinteRface/argonDash#7: You can use a small JS handler which defines the active tab's name and sets it as an input:

library(shiny)
library(argonR)
library(argonDash)

# UI
argonSidebar <- argonDashSidebar(
  vertical = TRUE,
  skin = "light",
  background = "white",
  size = "md",
  side = "left",
  id = "my_sidebar",
  icon = tags$img(src = "logo.png", alt = "custom icon"),
  br(),
  argonSidebarMenu(
    id = "sidebar_menu",
    argonSidebarItem(
      tabName = "cards",
      icon = argonIcon(name = "tv-2", color = "info"),
      "Overview",
      id = "item_cards"
    ),
    argonSidebarItem(
      tabName = "tables",
      icon = argonIcon(name = "bullet-list-67", color = "red"),
      "Charts",
      id = "item_tables"
    ),
    argonSidebarItem(
      tabName = "bulletin",
      icon = argonIcon(name = "book-bookmark", color = "green"),
      "Bulletin",
      id = "item_bulletin"
    )
  )
)

server <- function(input, output, session) {
  # I'd like to reactively capture the tabName of the selected sidebar item.
  
  # Example: I want to display the currently selected tabName
  output$selected_tab_display <- renderText({
    # Placeholder: This should display the current tabName
    paste("Selected tab is:", input$activeTab)
  })
}

# Main UI
ui <- argonDashPage(
  sidebar = argonSidebar,
  body = argonDashBody(
    tags$script("$(document).on('click', function(event) {
                   Shiny.onInputChange('activeTab', 
                     $('.active').data().value);
                 });"),
    h2(textOutput("selected_tab_display"))  # Display the selected tabName here
  )
)

shinyApp(ui, server)