Leave selected tabPanel description in Shiny App

Question

I made a CSS to change the color of my shiny theme. So far ok, but I would like an adjustment on the top bar where it says "abc". Before I create the CSS it is selected whenever I was in this panel, however after I created it, it is not. Do you know how to adjust this? I'm going to insert an image showing to better exemplify.

I'm inserting an executable code below:

Thank you very much!

library(shiny)
library(shinythemes)
library(dplyr)
library(tidyr)
library(lubridate)

function.cl<-function(dt){
  df <- structure(
    list(date = c("01-08-2021","01-08-2021","01-08-2021","01-08-2021","01-08-2021",
                  "08-08-2021","08-08-2021","08-08-2021","08-08-2021","08-08-2021","08-08-2021",
                  "13-08-2021","13-08-2021","13-08-2021","13-08-2021","13-08-2021"),
         DR01 = c(2,1,0,0,3,0,1,0,1,7,2,3,4,6,7,8), DR02 = c(2,0,0,0,4,2,1,0,1,4,2,3,4,5,6,7),  
         DR03 = c(2,0,0,2,6,2,0,0,1,5,2,2,4,5,7,5), DR04 = c(2,0,0,5,6,2,0,0,3,7,2,3,4,5,6,4)),  
      class = "data.frame", row.names = c(NA, -16L))
  
  df$date <- parse_date_time(df$date, c('ymd', 'dmy'))
  
  scatter_date <- function(dt, dta = df) {
    dta %>%
      filter(date == ymd(dt)) %>%
      summarize(across(starts_with("DR"), sum)) %>%
      pivot_longer(everything(), names_pattern = "DR(.+)", values_to = "val") %>%
      mutate(name = as.numeric(name)) %>%
      plot(xlab = "Days", ylab = "Types", xlim = c(0, 7))
  }  
  Plot1<-scatter_date(dt)
  
  return(list(
    "Plot1" = Plot1, 
    date = df$date
  ))
}


ui <- shiny::navbarPage(theme = shinytheme("flatly"), collapsible = TRUE, selected = "abc",
                        tags$head(tags$style(HTML('.navbar-static-top {background-color: #02BE7F;}
                                                  .navbar-default .navbar-nav>.active>a {background-color: #02BE7F;}'))),
                        tabPanel("abc",
                                 sidebarLayout(
                                   sidebarPanel(
                                     uiOutput("date"),
                                     
                                     br(),
                                   ),
                                   
                                   mainPanel(
                                     tabsetPanel(
                                       tabPanel("",plotOutput("Graph",width = "95%", height = "600"))
                                     )
                                   ),
                                 )
                        )
                        
                       
)


server <- function(input, output,session) {
  data <- reactive(function.cl("2021-08-01"))
  
  output$date <- renderUI({
    all_dates <- seq(as.Date('2021-01-01'), as.Date('2021-01-15'), by = "day")
    disabled <- as.Date(setdiff(all_dates, as.Date(data()$date)), origin = "1970-01-01")
    dateInput(input = "date", 
              label = "Select Date",
              min = min(data()$date),
              max = max(data()$date),
              value = max(data()$date),
              format = "dd-mm-yyyy",
              datesdisabled = disabled)
  })
  
  output$Graph <- renderPlot({
    req(input$date)
    function.cl(input$date)[["Plot1"]]
  })
  
}

shinyApp(ui = ui, server = server)

Before:

After:

Answer 1

You can try setting a different color for the .active class. Currently, you have specified background-color: #02BE7F, but it is not noticeable because it has the same color of the navbar.

Pro tip: you can modify your whole theme using de bslib package from RStudio. It works really well!