Allow for vertical tabset panel

[mcanouil]

Discussed in #3963

^{Originally posted by kbvernon January 13, 2023}
So I don't come off as demanding, let me start off by saying Quarto is awesome. I'm very grateful for all the work you all put in to developing it. OK, so now for the FR.

tabby.js allows for vertical tabsets, you just have to set the display to grid. Would be nice if this could be implemented in Quarto. Here's some css based on the suggestion from the author of tabby:

@media (min-width: 30em) {

  .panel-tabset {
     display: grid;
     grid-gap: 2em;
     grid-template-columns: 25% 75%;
  }
  
  .panel-tabset-tabby {
     border-bottom: none !important;
     border-right: 1px solid #bbb; 
  }
  
  .panel-tabset [role=tab][aria-selected=true] {
     background-color: transparent;
     border: 1px solid #bbb !important;
  }
  
  h3 {
     margin-top: 0;
  }
  
}

Maybe this could be its own css class for use in Quarto, something like .panel-tabset-vertical? Would also be useful being able to set the relative column widths like:

::: {.panel-tabset-vertical columns="25% 75%"}
### First Tab

Thanks!

* Original discussion about this FR is over at RStudio Community.

[mcanouil]

Related to:

• Create a dropdown list with {panel-dropdown}  #419

[matthewt-assurity]

Hello! Is there any more work on this? Built-in vertical tabs would be awesome! Right now we use some CSS trickery to get vertical tabs.