Search code examples
htmlcssrshinybslib

How to insert a textInput in the navbar of the bslib::page_sidebar()?

I want to insert a search bar inside the navbar, how to do that?

enter image description here

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
  ),
  title = "Weather",textInput("search","Search"),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
                    ),
  
  layout_columns(
    
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
         ), col_widths = c(8,4),
    layout_columns(card("card4")))
  
)

enter image description here

I need the search bar where the red box is. Any way to do that?

Solution

  • You can wrap the title inside a tagList which contains a label for the title ("weather") and the textInput, and then use display: grid; on the navbar as well as a suitable column-gap:

    enter image description here

    library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$style(HTML('
                     .navbar.navbar-static-top {display: grid;}
                     .navbar.navbar-static-top > div:first-child {column-gap: 8.25rem;}
                    ')
               )
  ),
  title = tagList(tags$div("Weather") |> tagAppendAttributes(class = "bslib-page-title navbar-brand"), 
                  textInput("searchInput","Search")),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
  ),
  layout_columns(
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
    ), col_widths = c(8,4),
    layout_columns(card("card4")))
)