Semi-collapsed sidebar re-designed - R shiny dashboardplus

问题

Trying to make use of the Shiny dashboardplus semi-collapse sidebar, but run into some issues and would appreciate your advice.

A reproducible script:

library("shiny")
library("htmltools")
library("shinydashboard")
library("shinydashboardPlus")
library("bootstrap")
library("shinyjs")


# UI Page Starts
ui = dashboardPagePlus(

  title = "Shiny App",

  dashboardHeader(
    title = "Title with A Few Other Things",
    titleWidth = 530
  ),

  dashboardSidebar(
    fluidRow(
      useShinyjs(),
      column(8, align = "left", offset = 0, 
             style='padding-left: 28px;  padding-top: 10px', 
             h4(HTML(paste0("Project Lists")))),
      column(2, align = "left", offset = 0, 
             style='padding-top: 5px',
             actionButton("toggleSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

    # Remove the sidebar toggle element
    tags$script(JS("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';")),

    fluidRow(
      h4(HTML(paste0("Contents that are not supposed to show when collapsed.")))
    )
  ),

  dashboardBody()
)



#Server
server = function(input, output, session) {
  #side bar  
  observeEvent(input$toggleSidebar, {
    shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

In this example, I removed the default dashboardplus toggle-sidebar button, and added a new one to the sidebar top right. (Of note, even I use the default one, it ends up to be the same issue) When click to collapse the sidebar, the sidebar itself semi-collapse as expected. However, I would like to also

get rid of the items in the sidebar when semi-collapsed.
add "project list" vertically to the semi-collapsed sidebar.
leave the header as is, without collapsing

Below I am showing first what it is right now and what I want it to be. Thanks so much in advance for your help!

回答1:

This is not a complete answer to all of your questions, but at least a partial one to solve the logo/title issue.

I did a lot of digging through the CSS of this item (i also happened to need this for my application), and found a solution in CSS.

The 230px is the default width of the logo span, but yours seems longer, so you might have to change all occurences of 230px with the width of your logo span (you should be able to find this by using inspect element and hovering over it)

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 230px;
  }
}
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .main-header .navbar {
    margin-left: 230px !important;
  }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar {
    width: 100% !important;
    float: none;
  }
}

.main-header .logo {
  width: 230px;
}

If you don't know how to source a CSS file in your shiny app, you can add

tags$head(
  includeCSS("styles.css")
)

(where styles.css is your CSS file including this code) to the top of your initial tab's fluidPage() (or whatever it is you render the page)

来源：https://stackoverflow.com/questions/58616828/semi-collapsed-sidebar-re-designed-r-shiny-dashboardplus

标签

javascript

css

Shiny

shinydashboard