Navigation bar Toggle button on left of title in R shinydashboard

Question

I have a R shiny app using shinydashboard. I want logo in center and side bar toggle button (with three horizontal bars) on left side of the screen.

I am using 95% of titlewidth with logo in center using below code. But, this pushes navigation bar with toggle button on right 5% screen. **How can I switch navigation bar to be on left (as shown in picuture) and title bar with logo in center? **

dashboardHeader(title = tags$a(tags$img(src='Logo.png', height=80)), 
 titleWidth = "95%")

Any suggestions will be appreciated.

Thanks, Krina

Answer 1

There's probably a better way, but here's a hacky option:

1. Conceal the logo as a dropdownMenu
2. Move logo to the center of the header using css
3. (Optional) Remove the css hover effect from the logo

Other dropdownMenus remain right-aligned.

library(shiny)
library(shinydashboard)

css <- HTML(
    "/* move logo to center */
    #logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* remove hover effect */
    #logo > a:hover {
        background-color: transparent !important;
        color: transparent !important;
    }"
)

ui <- dashboardPage(
    dashboardHeader(title = "Project Title",
                    tags$li(class = "dropdown",
                            id = "logo",
                            tags$a(tags$img(height = "20px",
                                            src="https://www.r-project.org/logo/Rlogo.png")
                            ),
                            tags$style(css)
                    ),
                    dropdownMenu(type = "messages", 
                                 badgeStatus = "primary",
                                 taskItem(value = 20, 
                                          "Example"
                                 ))
    ),
    dashboardSidebar(),
    dashboardBody()
)

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

}

shinyApp(ui, server)