How do you link to multiple pages in a single sidebar navigation item?

[melissavanbussel]

Description

I'm wondering if there's a way to have multiple clickable URLs displayed in a single sidebar navigation item on a Quarto website. For example, I currently have something like this:

sidebar: 
    title: My title
    contents:
      - href: page_example_english.qmd
        text: Page Example EN
      - href: page_example_french.qmd
        text: Page example FR

And I'd like to have something like this:

sidebar: 
    title: My title
    contents:
      - href: [page_example_english.qmd, page_example_french.qmd]
        text: Page Example [EN] [FR]

So that when it renders, it would look something like this in the sidebar navigation:

Page Example [EN] [FR]

Is there a way to do this?

(Note: I'm already using lang: en and lang: fr and have a button to switch over to the opposite-language version of the site, but hoping there's a way to have the direct links to all the pages of both languages in the sidebar)

Thank you in advance for your help!

[mcanouil]

Use JavaScript to change the URL when you toggle your button to switch languages.

[melissavanbussel]

Thank you for your help! Is there an example of how to do that? Right now, I've got a "en" and a "fr" folder with identical structure, and this (in the _quarto.yml file within the "en" folder):

    tools: 
      - icon: translate
        href: ../fr/
        text: Français

At the moment, clicking on the translate icon just redirects the user to the homepage of the opposite language site.

[mcanouil]

Not currently, but the idea is the same as to switch between image files, see https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/.

[melissavanbussel]

Thank you, the link is very helpful.

I don't have any javascript experience, but this is what I tried:

1. Added this to the bottom of my /en/_quarto.yml file:

include-after-body:
  text: |
    <script type="application/javascript" src="switch-languages.js"></script>    

2. Modified the translate button in the en/_quarto.yml to say:

    tools: 
      - icon: translate
        href: ../fr/
        text: Français
        id: switchlanguages

3. Created en/switch-languages.js that includes this (based on this tutorial):

$("#switchlanguages").on('click', function() {
    window.location = location.href.replace('/en/','/fr/') ;
  });

When I click the translate button, though, it still leads to the root of the fr folder (fr/index.qmd) rather than replacing the fr in the current URL with en. Any help is greatly appreciated!

(Edit: I also tried removing the href: ../fr/ from the en/_quarto.yml and then the button doesn't do anything upon click)

[cscheid]

@mcanouil @dragonstyle I wonder if the "right" fix is for quarto to "bless" a set of language-specific classes, and for documents to hide by default entries that have a mismatched language.

[mcanouil]

@cscheid the best fix would be to address #275 but there is a need for a deeper thinking to plan it properly as it will likely have big impact on the codebase.

[melissavanbussel]

Update: Here is a solution that worked for me :)

In _quarto.yml:

website:
  body-header: |
    <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css><button onclick="window.location = location.href.replace('/en/','/fr/');" class="btn"><i class="fa fa-language"></i> Français</button>

And some CSS to make it look a bit nicer:

.btn {
  background-color: dodgerblue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  float: right;
}
.btn:hover {
  background-color: #1a7bd9;
  color: white;
}