quarto-dev / quarto-dev/quarto-cli

Navbar current page highlight doesn't work when logo is in sidebar (hybrid navigation)

Open
#9,277 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug websites
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

On website projects, Quarto sites that use a navbar will highlight the link of the page that is being currently viewed. However, when hybrid navigation is used and a sidebar is introduced, and when that sidebar includes a logo, the navbar does not highlight the correct page and instead always seems to highlight the home page of the website.

Here's what a sample website using hybrid navigation looks like without a logo in the sidebar. Note that the About page is visited, and the About header is highlighted in the navbar:

results_without_logo

Here's the same website, now with a logo in the sidebar. Note that the About page is visited, but the Home header is highlighted in the navbar:

results_with_logo

Here's the _quarto.yml used to generate this site. The only difference between the two images is that line containing the sidebar logo has been commented out in the case of the first screenshot:

project:
  type: website

website:
  title: "website-testing"
  navbar:
    left:
      - text: Home
        file: index.qmd
      - text: About this Site
        file: about.qmd


  sidebar:
    - title: Home
    # logo: seurat.jpg
      contents:
        - text: Home
          file: index.qmd

    - title: About this Site
      contents:
        - text: About
          file: about.qmd
        - text: More Info
          file: about2.qmd
        - text: Bibliography
          file: about3.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Thanks for looking into this, and thanks for making Quarto!

Steps to reproduce
  1. Clone the website project at https://github.com/aaronkrusniak/hybridnav-logo-issue.

  2. Run quarto preview on the project and navigate to the About page.

  3. Add/remove the logo: seurat.jpg code in the _quarto.yml file to see the changes.

Expected behavior

When a logo is added to the sidebar, the navbar should preserve link highlighting on the currently-viewed page.

Actual behavior

When a logo is added to the sidebar, the navbar highlights the Home page as though it were the currently-viewed page, regardless of which page is actually being viewed.

Your environment
  • IDE: RStudio 2023.09.01 Build 494
  • Quarto: 1.4.550
  • OS: Windows 10 Enterprise 19045.4170
Quarto check output
$ quarto check
Quarto 1.4.550
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.550
      Path: C:\Users\442894\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\442894\AppData\Roaming\TinyTeX\bin\win32\
      Version: 2022

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.11.5 (Conda)
      Path: C:/Users/442894/anaconda3/python.exe
      Jupyter: 5.5.0
      Kernels: rt-modeling, python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.2.0
      Path: C:/Users/442894/AppData/Local/Programs/R/R-4.2.0
      LibPaths:
        - C:/Users/442894/AppData/Local/R/win-library/4.2
        - C:/Users/442894/AppData/Local/Programs/R/R-4.2.0/library
      knitr: 1.45
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone the linked hybridnav-logo-issue project and inspect its _quarto.yml, especially the hybrid navbar and sidebar logo configuration. Run quarto preview, visit the About page, and toggle logo: seurat.jpg to reproduce the incorrect Home highlight. Done means the navbar highlights the currently viewed page with the sidebar logo enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.