If you're looking to enhance your user interface, consider using a bit of JavaScript:
js <- HTML("
$(function() {
$('.menu-open > .active').parentsUntil('.sidebar', 'li').children('a:first-child').addClass('has-selected-child');
$('.menu-open > li').on('click', function() {
let $me = $(this);
let $menu = $me.parents('.main-sidebar');
$menu.find('.has-selected-child').removeClass('has-selected-child');
$me.parentsUntil('.sidebar', 'li').children('a:first-child').addClass('has-selected-child');
})
})")
body <- dashboardBody(
tags$head(tags$script(js)),
tags$head(tags$style(HTML('
/* selected parent */
.skin-blue .main-sidebar .sidebar .sidebar-menu .has-selected-child {
background-color: #E0E0E0;
color: #666666;
}
/* main sidebar */
.skin-blue .main-sidebar {
background-color: #EBEBEB;
}
/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
background-color: #E0E0E0;
color: #666666;
}
/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: #EBEBEB;
color: #666666;
}
/* other links in the sidebarmenu when hovered */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
background-color: #E0E0E0;
color: #000000;
}
'))),
tabItems(
tabItem(tabName = "tab1",
box(title = "Table", width = 10, status = "warning", DT::dataTableOutput("table"))
),
tabItem(tabName = "tab2",
plotOutput("plot1")
)
)
)
Simplified Explanation
- We use JavaScript to add a class to clicked menu items, highlighting them and their parent elements.
- The accompanying CSS styling ensures the highlighted elements stand out visually.
- The initial assignment of the class prepares the first element for interaction.