Aligning a button with tab names.

[arangaca]

Consider this simple Shiny app with two pages and a switch button:

ui <- tagList(
  bslib::page_fluid(
    bslib::navset_tab(
      bslib::nav_panel("Foo"),
      bslib::nav_panel("Bar"),
      bslib::input_switch("blah", "Blah"),
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Is there a way to align the button with the tab names without tweaking the CSS?

I'd like to have something that visually looks more or less like the following:

ui <- tagList(
  bslib::page_fluid(
    bslib::navset_tab(
      bslib::nav_panel("Foo"),
      bslib::nav_panel("Bar"),
      bslib::nav_panel(bslib::input_switch("blah", "Blah")),
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

[ismirsehregal]

What is the issue with using CSS?

[arangaca]

None except that tweaking CSS tends to be relatively time consuming by experience so I was wondering if there was a simpler way to align these elements that doesn't require manipulating CSS.

[ismirsehregal]

Below please find a insertUI approach (using just a tiny bit of CSS):

ui <- tagList(
  bslib::page_fluid(
    bslib::navset_tab(
      id = "navset-id",
      bslib::nav_panel("Foo"),
      bslib::nav_panel("Bar")
    )
  )
)

server <- function(input, output, session) {
  insertUI(
    selector = "#navset-id",
    where = "beforeEnd",
    ui = tagAppendAttributes(bslib::input_switch("blah", "Blah"), style = "margin-left:15px; margin-top:9px; margin-bottom: 0px;"),
    multiple = FALSE,
    immediate = TRUE,
    session = getDefaultReactiveDomain()
  )
}

shinyApp(ui, server)