How to create a responsive sidebar in Quarto Dashboard that changes subpages using shiny?

[joaobonifacio27]

Description

Hi ,

I’m building a dashboard in R using shinydashboard within Quarto, and I’m having trouble with navigation between pages and subpages.

Here’s what I’m trying to achieve:

• I want to have a responsive sidebar in the dashboard with main items (level 1 headings), and when I click on them, different subpages (subheadings) should be displayed.

• Essentially, I want the content in the main window of the dashboard to change when I click on a subitem in the sidebar.

I’ve seen that this can be done using a shinyapp with .r extension files, but I haven’t been able to reproduce the same functionality in Quarto with .qmd files.

[mcanouil]

Are you building a dashboard in shiny or are you building a Quarto dashboard with shiny components? The two are very different things.

[joaobonifacio27]

I'm building a Quarto dashboard with shiny components.

[mcanouil]

Did you try something simple already? See https://quarto.org/docs/dashboards/interactivity/ and more generally https://quarto.org/docs/dashboards/

It would be easier to work something, out of some basic document (also we unfortunately don't have the time/manpower to create custom examples like this).

[joaobonifacio27]

Yes, I’ve read that documentation, but I still haven’t found a solution to my problem.

First, I tried something like this in the YAML:

---
title: ""
format: dashboard
server: shiny
theme: styles.scss
sidebar:
  style: "docked"
  search: true
  contents:                           
    - text: "subpage_01"
      href: subpage_01.qmd
---

I based this on ideas from website-style side navigation (website navigation documentation), but it didn’t work.

Then, I tried something using Shiny:

---
title: ""
format: dashboard
server: shiny
---
´´´{r}
#| label: setup
library(shiny)
´´´
 
 
´´´{r}
#| label: setup
library(shiny)
´´´

# Page 1

## {.sidebar}

´´´{r}
tabsetPanel(
  id = "sub_1", 
  tabPanel("Subseção 1", value = "subpages_1")
)
tabsetPanel(
  id = "sub_2",
  tabPanel("Subseção 2", value = "subpages_2")
)
´´´
# Page 2

In this second case, the buttons appear, but I can’t make them responsive.
(https://shiny.posit.co/r/reference/shiny/0.11/tabsetpanel)

[mcanouil]

I based this on ideas from website-style side navigation (website navigation documentation), but it didn’t work.

If it did it would have been documented inside the Dashboard guide.

The only thing controlling sidebar is .sidebar as documented.

In this second case, the buttons appear, but I can’t make them responsive.

You mean collapsible because the sidebar and the whole dashboard is responsive.

I believe you need to use more advanced customisation involving JavaScript or other shiny components.
Unfortunately, we cannot offer custom/dedicated support for this.