Buttons stuck on active in custom R Shiny navlist with collapsible menus

Question

I'm building a custom navigation sidebar with collapsible menus in R Shiny. The end product should be similar to what can be achieved with Shiny's navlistPanel(), however, instead of using headers to separate the links to the tab panels, I would like to show the links collapsing below the menu's title when clicking on the title.

Here an example of the UI (code below). In the example, there are two collapsible menus already collapsed, each containing two buttons linking to different tab panels.

The Issue: When navigating tabs across menus, the last clicked tab button in a menu remains stuck on the active class, hence when clicking again on that button it will not switch to the corresponding tab panel.

Examples: (Checking the button classes in the browser inspector)

1. Working example:

• Click on tab button 1, tab button 1 becomes active and tab panel 1 appears on the right side of the page.
• Then click on tab button 2, button 1 deactivates while button 2 activates and tab panel 2 appears on the right.
• Similarly if I navigate back from 2 to 1, or within item 2, from 3 to 4 and vice versa.

2. Not working example:

• Click on tab button 1 which activates and tab panel 1 appears on the right.
• Then click on tab button 3, button 3 activates and tab panel 3 appears, however tab button 1 does not deactivate.
• Clicking back on tab button 1 will not activate the button (since already stuck on active) while tab panel 3 will remain on the right.

Here a reproducible example:

library(shiny)

# helper functions
gen_nav_item <- function(id, title, ...) {
  button_tag <- tags$button(
    class = "btn",
    `data-bs-toggle` = "collapse",
    `data-bs-target` = paste0("#", id),
    title
  )
  
  content_tag <- tags$div(
    class = "collapse",
    id = id,
    tags$ul(
      class = "nav flex-column",
      ...
    )
  )
  
  tags$li(button_tag, content_tag) 
}

gen_tab_button <- function(tab_id, title) {
  tags$li(
    tags$button(
      class = "btn nav-link",
      `data-bs-toggle` = "tab",
      `data-bs-target` = paste0("#", tab_id),
      title)
    )
}

gen_tab_panel <- function(id, ...) {
  tags$div(
    class = "tab-pane",
    id = id,
    ...
  )
}

# html elements
tab_1 <- gen_tab_panel("tab-1", h1("This is Tab 1"))
tab_2 <- gen_tab_panel("tab-2", h1("This is Tab 2"))
tab_3 <- gen_tab_panel("tab-3", h1("This is Tab 3"))
tab_4 <- gen_tab_panel("tab-4", h1("This is Tab 4"))

button_tab_1 <- gen_tab_button("tab-1", "Tab 1")
button_tab_2 <- gen_tab_button("tab-2", "Tab 2")
button_tab_3 <- gen_tab_button("tab-3", "Tab 3")
button_tab_4 <- gen_tab_button("tab-4", "Tab 4")

item_1 <- gen_nav_item("item-1", "Item 1", button_tab_1, button_tab_2)
item_2 <- gen_nav_item("item-2", "Item 2", button_tab_3, button_tab_4)

# app code
ui <- fluidPage(
  theme = bslib::bs_theme(version = 5),
  fluidRow(
    column(
      width = 4,
      tags$ul(
        item_1,
        item_2,
      )
    ),
    column(
      width = 8,
      tags$div(
        class = "tab-content",
        tab_1,
        tab_2,
        tab_3,
        tab_4
      )
    )
  )
)
server <- function(input, output, session) {}
shinyApp(ui, server)

Question: How to deactivate the buttons when navigating across menus? Is there some JavaScript code missing here (I'm using Bootstrap 5 classes to handle interactivity)?