如何解决Shiny Dashboard侧边栏展开标签时与主内容区重叠的问题

重叠问题修复 #

你之前的布局将自定义内容块Codepan直接放在sidebarMenu的同级节点，而非「Deine Auswertung」菜单项的子元素，同时设置了overflow: visible导致内容溢出时无法撑开父容器，后续的「Kontakte」菜单位置不会被向下挤压，就会和溢出内容重叠。
修复步骤：

• 将Codepan移入「Deine Auswertung」对应的menuItem内部作为子元素
• 删除sidebarMenu上的style = "position: relative; overflow: visible;"配置
• 给「Deine Auswertung」的menuItem添加startExpanded = FALSE参数，默认收起自定义内容

再次点击折叠功能实现 #

原生shinydashboard的menuItem默认绑定了标签切换逻辑，重复点击已激活的菜单项不会触发折叠，我们可以通过一段自定义JS代码覆盖该逻辑：

• 给「Deine Auswertung」菜单项绑定点击事件
• 当点击的是已经激活的菜单项时，直接切换Codepan内容块的显示/隐藏状态
• 阻止默认的标签切换事件，避免页面跳转

#LIBRARIES
library (shiny)
library(shinydashboard)
library (shinyjs)
library (fresh)
library (ggplot2)
library (shinyscreenshot)
library (dplyr)
library (data.table)
library (rdrop2)


#sidebar vordefinieren
Codepan <-   div( id = 'sidebar_cr',
                  conditionalPanel("input.sidebar === 'Main'",
                                   textInput(inputId = "Code", label= HTML("<b>Willkommen auf unserer Auswertungsseite! Bitte gib hier deinen persönlichen Code ein.</b><br><em>(Gross- oder Kleinschreibung ist egal) </em>"), placeholder= "z.B. 01ABAB01"),
                                   actionButton (inputId = "Button", label = "Meine Ergebnisse anzeigen"),
                                   box(width = 12, background= "blue",HTML(
                                     "<br><em>Zur Erinnerung:</em> <br> <b> Dein Code setzt sich folgendermaÃen zusammen:</b> <br> <br> 
                        <p><b>1. Der Tag (ohne den Monat) an dem du Geburtstag<br>  hast. </b>
                        <br>Wenn du zum Beispiel am 01.05.2005 geboren wurdest, <br> schreibst du 01, wenn du zum Beispiel am  26.04.2005 <br>geboren wurdest, schreibst du 26.
                        <br>2.<b> Die letzten zwei Buchstaben des Vornamens deines <br> Vaters. </b> 
                        <br>Wenn dein Vater zum Beispiel Georg heisst, schreibst du <br> RG, wenn dein Vater zum Beispiel Max heisst, schreibst <br> du AX.
                        <br>3.<b> Der zweite und dritte Buchstabe deines eigenen <br> Vornamens. </b>
                        <br>Wenn du zum Beispiel Sina heisst, schreibst du IN, <br> wenn du zum Beispiel Leon heisst, schreibst du EO.<br><b>4. Der Geburtsmonat deiner Mutter (als Zahl). </b> 
                        <br>Wenn deine Mutter zum Beispiel im Januar geboren <br> wurde, schreibst du 01, wenn deine Mutter im Oktober <br> geboren wurde, schreibst du 10.<br></p>"))
                                    
                  ))


sidebar <- 
  dashboardSidebar(
    width = 350,
    sidebarMenu(
      id = 'sidebar',
      menuItem( "Willkommen!", tabName = 'intro', icon = icon('dashboard'),
                badgeLabel = "Read Me!", badgeColor = "green" ),
      # 把Codepan移到menuItem内部作为子元素
      menuItem( "Deine Auswertung", tabName = "Main", icon = icon('barcode'),
                startExpanded = FALSE,
                Codepan),
      menuItem( "Kontakte", tabName = "Kontakte", icon = icon('barcode'))
    ))


#Body vordefinieren
body <- dashboardBody(
  # 添加自定义JS实现再次点击折叠
  tags$script(HTML("
    $(document).on('click', 'a[data-value=\"Main\"]', function(e) {
      if($(this).hasClass('active')) {
        $('#sidebar_cr').toggle();
        e.preventDefault();
        e.stopPropagation();
      }
    });
  "))
)



# hier beginnt die eigentliche App:
ui <- 
  dashboardPage(
    dashboardHeader(title = "Deine Ergebnisse", disable = FALSE),
    sidebar,
    body
  )



server <- function(input, output) {}
  


shinyApp(ui=ui, server=server)

内容的提问来源于stack exchange，提问作者Ninke