能否在flexdashboard中实现类似shiny-dashboard的折叠侧边菜单？

我刚好处理过类似的需求——在结合crosstalk使用flexdashboard时，侧边栏塞满输入控件确实会挤占空间、影响体验。借助Bootstrap的折叠组件（Collapse）+ 少量自定义CSS就能轻松实现可折叠的控件菜单，下面是完整的可落地方案：

核心思路 #

Flexdashboard本身基于Bootstrap框架，所以直接用Bootstrap原生的折叠组件来包裹crosstalk输入控件，再通过触发按钮控制显示/隐藏，既兼容原有风格，又不需要额外引入复杂依赖。

完整代码示例 #

---
title: "带折叠筛选器的Flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

<!-- 自定义CSS优化样式，和flexdashboard风格统一 -->
<style>
.sidebar .card {
  border: none;
  background-color: #f8f9fa; /* 匹配侧边栏默认背景色 */
}
.sidebar .btn-primary {
  width: 100%;
  margin-bottom: 12px;
}
</style>

```{r setup, include=FALSE}
library(flexdashboard)
library(crosstalk)
library(plotly)

# 构造共享数据（crosstalk核心）
shared_mtcars <- SharedData$new(mtcars)

Sidebar {.sidebar} #

数据筛选区 #

展开/收起筛选器

Column {data-width=650} #

关联散点图 #

plot_ly(shared_mtcars, x=~wt, y=~mpg, color=~factor(cyl), 
        type="scatter", mode="markers") %>%
  layout(title="车重 vs 油耗")

## 关键细节说明
1. **Bootstrap版本兼容**：
   - 如果你的flexdashboard版本较低（使用Bootstrap 3），需要把按钮属性从`data-bs-toggle`/`data-bs-target`改成`data-toggle`/`data-target`，否则折叠功能会失效。
2. **默认状态控制**：
   - 按钮的`aria-expanded="false"`表示默认收起面板，改成`true`则默认展开。
3. **样式优化**：
   - 用`.card`和`.card-body`包裹控件，让折叠区域的样式和flexdashboard原生控件对齐；自定义CSS则确保背景色、按钮宽度和侧边栏风格统一。
4. **多折叠面板扩展**：
   - 如果需要把控件分类（比如“基础筛选”和“高级筛选”），只需复制一套折叠结构，给每个面板设置唯一的`id`，触发按钮对应不同的`data-bs-target`即可。

## 进阶技巧
- 如果你想给折叠按钮添加图标，可以用Bootstrap Icons（flexdashboard已内置），比如把按钮文本改成：`☰ 展开/收起筛选器`
- 如果要移除折叠动画，给`collapse`类添加`collapse-no-transition`，或者自定义CSS覆盖`transition`属性。

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