Updated Answer (Corresponding To OP's 2nd Edit)
The concept remains the same. Here we are just replacing those menu items under the tools with the button created from index.qmd file using javascript.
If you need to add more csv or xlsx data, just add the corresponding code for creating button inside the .download_btn pandoc divs and add more - text: "" and url: "#" in the _quarto.yml file.
_quarto.yml
project:
type: book
book:
title: "Quarto Book"
author: "Jane Doe"
date: "9/29/2022"
chapters:
- index.qmd
- intro.qmd
downloads: [pdf, epub]
sidebar:
pinned: true
tools:
- icon: save
menu:
- text: ""
url: "#"
- text: ""
url: "#"
- text: ""
url: "#"
repo-url: https://www.rstudio.com/
search:
location: sidebar
type: textbox
format:
html:
include-after-body: custom.html
theme: cosmo
index.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 20px;
color: black;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: grey;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "mtcars.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
iris %>%
download_this(
output_name = "Iris data set",
output_extension = ".csv",
button_label = "iris.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
palmerpenguins::penguins %>%
download_this(
output_name = "penguins data set",
output_extension = ".csv",
button_label = "penguins.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
custom.html
<script>
var all_btns = document.querySelectorAll(".download_btn a");
var data_nav = document.querySelectorAll('[aria-labelledby="sidebar-tool-dropdown-0"] li')
for (let i = 0; i < data_nav.length; i++) {
let li = document.createElement("li");
li.appendChild(all_btns[i]);
data_nav[i].parentElement.replaceChild(li, data_nav[i])
}
</script>
Old Answer
Since so far there's no default option from Quarto to add buttons for downloading csv data, as a workaround we can add a download button in the Book navbar with the help of {downloadthis} R-package and using a few line of javascript code.
So at first, add the code for creating button and a bit css to style the button's appearance in the index.qmd file with echo: false.
index.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 24px;
padding: 0px;
margin-top: -5px;
color: white;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: whitesmoke;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
Now by default, the button will be created in the book body of the index page. But we want this in the book navbar. To do that, we can add a save icon with href: "#" as a placeholder in the right side of the navbar, and then using javascript we can replace this save icon with our created download button.
Now to add js code, create an html file custom.html and put these lines of codes in that file and then add this custom.html file with include-after-body: custom.html in _quarto.yml.
custom.html
<script>
var btn = document.querySelector(".download_btn");
var nav = document.querySelector(".navbar-nav .bi-save");
nav.parentElement.replaceChild(btn, nav);
</script>
_quarto.yml
project:
type: book
book:
title: "Quarto Book"
chapters:
- index.qmd
- intro.qmd
navbar:
right:
- icon: save
href: "#"
format:
html:
include-after-body: custom.html
theme: cosmo
Now the rendered book navbar looks like,
Refer to the downloadthis package documentation to know about various options for adding buttons to download csv or xlsx files or any R-object as rds file and to know about how to style the buttons.
Disclaimer: I am just an R-user and know just a little bit javascript. So anyone, please feel free to edit this answer with more efficient js code. :-)
