rstudio / shinydashboard

Shiny Dashboarding framework
https://rstudio.github.io/shinydashboard/
Other
893 stars 298 forks source link

navigation bar toggle button on left of title #267

Open krinaj opened 6 years ago

krinaj commented 6 years ago

I posted a question on stackoverflow earlier today, but am thinking this might be a better place to get it answered, so I am cross-posting here. https://stackoverflow.com/questions/49434420/navigation-bar-toggle-button-on-left-of-title-in-r-shinydashboard

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 understand that shinydashboard does not allow sidebar on right, that is why I am trying to move toggle button on left to keep both side bar and toggle button on the same side.

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 (as shown in picture) to be on left and header with logo on center?

capture

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

Any suggestions will be appreciated.

thanks, Krina

mayeulk commented 1 year ago

Answer in stackoverflow was:

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)